Crear e implementar el formulario web para usar la mensajería SMS de Amazon Pinpoint - Amazon Pinpoint

Aviso de fin de soporte: el 30 de octubre de 2026, AWS finalizará el soporte para Amazon Pinpoint. Después del 30 de octubre de 2026, ya no podrá acceder a la consola de Amazon Pinpoint ni a los recursos de Amazon Pinpoint (puntos de conexión, segmentos, campañas, recorridos y análisis). Para obtener más información, consulte Fin de soporte de Amazon Pinpoint. Nota: Este cambio no afecta a las API relacionadas con los SMS, los mensajes de voz, las notificaciones push móviles, la OTP y la validación de números de teléfono, por lo que son compatibles con Mensajería para usuarios finales de AWS.

Crear e implementar el formulario web para usar la mensajería SMS de Amazon Pinpoint

Todos los componentes que utilizan servicios de AWS para la mensajería SMS mediante Amazon Pinpoint ya están instalados. El último paso es crear e implementar el formulario web que captura los datos del cliente.

En esta sección, creará una función de JavaScript que analiza el contenido del formulario web que crea en la siguiente sección. Después de analizar el contenido, esta función envía los datos a la API que ha creado en Configurar Amazon API Gateway.

Para crear el gestor de formularios, realice el siguiente procedimiento:

  1. En un editor de texto, cree un nuevo archivo.

  2. En el editor, pegue el siguiente código.

    $(document).ready(function() {

  // Handle form submission.
  $("#submit").click(function(e) {

    var firstName = $("#firstName").val(),
        lastName = $("#lastName").val(),
        source = window.location.pathname,
        optTimestamp = undefined,
        utcSeconds = Date.now() / 1000,
        timestamp = new Date(0),
        phone = $("#areaCode").val()
              + $("#phone1").val()
              + $("#phone2").val();

    e.preventDefault();

    if (firstName == "") {
      $('#form-response').html('<div class="mt-3 alert alert-info" role="alert">Please enter your first name.</div>');
    } else if (lastName == "") {
      $('#form-response').html('<div class="mt-3 alert alert-info" role="alert">Please enter your last name.</div>');
    } else if (phone.match(/[^0-9]/gi)) {
      $('#form-response').html('<div class="mt-3 alert alert-info" role="alert">Your phone number contains invalid characters. Please check the phone number that you supplied.</div>');
    } else if (phone.length < 10) {
      $('#form-response').html('<div class="mt-3 alert alert-info" role="alert">Please enter your phone number.</div>');
    } else if (phone.length > 10) {
      $('#form-response').html('<div class="mt-3 alert alert-info" role="alert">Your phone number contains too many digits. Please check the phone number that you supplied.</div>');
    } else {
      $('#submit').prop('disabled', true);
      $('#submit').html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>  Saving your preferences</button>');

      timestamp.setUTCSeconds(utcSeconds);

      var data = JSON.stringify({
        'destinationNumber': phone,
        'firstName': firstName,
        'lastName': lastName,
        'source': source,
        'optTimestamp': timestamp.toString()
      });

      $.ajax({
        type: 'POST',
        url: 'https://example.execute-api.us-east-1.amazonaws.com/v1/register',
        contentType: 'application/json',
        data: data,
        success: function(res) {
          $('#form-response').html('<div class="mt-3 alert alert-success" role="alert"><p>Congratulations! You&apos;ve successfully registered for SMS Alerts from ExampleCorp.</p><p>We just sent you a message. Follow the instructions in the message to confirm your subscription. We won&apos;t send any additional messages until we receive your confirmation.</p><p>If you decide you don&apos;t want to receive any additional messages from us, just reply to one of our messages with the keyword STOP.</p></div>');
          $('#submit').prop('hidden', true);
          $('#unsubAll').prop('hidden', true);
          $('#submit').text('Preferences saved!');
        },
        error: function(jqxhr, status, exception) {
          $('#form-response').html('<div class="mt-3 alert alert-danger" role="alert">An error occurred. Please try again later.</div>');
          $('#submit').text('Save preferences');
          $('#submit').prop('disabled', false);
        }
      });
    }
  });
});

  3. En el ejemplo anterior, reemplace https://example.execute-api.us-east-1.amazonaws.com/v1/register por la URL de invocación que ha obtenido en Implementar la API.

  4. Guarde el archivo.

En esta sección, debe crear un archivo HTML que contenga el formulario que los clientes utilizan para registrar su programa de SMS. Este archivo utiliza el gestor de formularios JavaScript que creó en la sección anterior para transmitir los datos del formulario a la función de Lambda.

importante

Cuando un usuario envía este formulario, se desencadena una función de Lambda que llama a varias operaciones de la API de Amazon Pinpoint. Los usuarios maliciosos podrían lanzar un ataque en su formulario que podría hacer que se generara un gran número de solicitudes. Si tiene previsto utilizar esta solución para un caso de uso de producción, debe protegerla mediante un sistema como Google reCAPTCHA.

Para crear el formulario, realice el siguiente procedimiento:

  1. En un editor de texto, cree un nuevo archivo.

  2. En el editor, pegue el siguiente código.

    <!doctype html>
<html lang="en">

<head>
  <!-- Meta tags required by Bootstrap -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" crossorigin="anonymous"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script type="text/javascript" src="SMSFormHandler.js"></script>
  <title>SMS Registration Form</title>
</head>

<body>
  <div class="container">
    <div class="row justify-content-center mt-3">
      <div class="col-md-6">
        <h1>Register for SMS Alerts</h1>
        <p>Enter your phone number below to sign up for PromotionName messages from ExampleCorp.</p>
        <p>We don't share your contact information with anyone else. For more information, see our <a href="http://example.com/privacy">Privacy Policy</a>.</p>
        <p>ExampleCorp alerts are only available to recipients in the United States.</p>
      </div>
    </div>
    <div class="row justify-content-center">
      <div class="col-md-6">
        <form>
          <div class="form-group">
            <label for="firstName" class="font-weight-bold">First name</label>
            <input type="text" class="form-control" id="firstName" placeholder="Your first name" required>
          </div>
          <div class="form-group">
            <label for="lastName" class="font-weight-bold">Last name</label>
            <input type="text" class="form-control" id="lastName" placeholder="Your last name" required>
          </div>
          <label for="areaCode" class="font-weight-bold">Phone number</label>
          <div class="input-group">
            <span class="h3">(&nbsp;</span>
            <input type="tel" class="form-control" id="areaCode" placeholder="Area code" required>
            <span class="h3">&nbsp;)&nbsp;</span>
            <input type="tel" class="form-control" id="phone1" placeholder="555" required>
            <span class="h3">&nbsp;-&nbsp;</span>
            <input type="tel" class="form-control" id="phone2" placeholder="0199" required>
          </div>
          <div id="form-response"></div>
          <button id="submit" type="submit" class="btn btn-primary btn-block mt-3">Submit</button>
        </form>
      </div>
    </div>
    <div class="row mt-3">
      <div class="col-md-12 text-center">
        <small class="text-muted">Copyright © 2019, ExampleCorp or its affiliates.</small>
      </div>
    </div>
  </div>
</body>

</html>

  3. En el ejemplo anterior, reemplace SMSFormHandler.js por la ruta completa al archivo JavaScript del gestor de formularios que ha creado en la sección anterior.

  4. Guarde el archivo.

Ahora que ha creado el formulario HTML y el gestor de formularios JavaScript, el último paso es publicar estos archivos en Internet. En esta sección se da por hecho que dispone de un proveedor de host web existente. Si no tiene un proveedor de alojamiento existente, puede lanzar un sitio web con Amazon Route 53, Amazon Simple Storage Service (Amazon S3) y Amazon CloudFront. Para obtener más información, consulte Alojamiento de un sitio web estático.

Si utiliza otro proveedor de alojamiento web, consulte la documentación del proveedor para obtener más información sobre la publicación de páginas web.

Después de publicar el formulario, debe enviar algunos eventos de prueba para asegurarse de que funciona según lo previsto.

Para probar el formulario de registro, realice el siguiente procedimiento:

  1. En un navegador web, diríjase a la ubicación en la que cargó el formulario de registro. Si utilizó el ejemplo de código de Crear el gestor de formularios JavaScript, verá un formulario con un aspecto parecido al del ejemplo de la siguiente imagen.

    El formulario de solicitud del cliente creado en el paso 5.1.

  2. Escriba su información de contacto en los campos First name (Nombre), Last name (Apellidos) y Phone number (Número de teléfono).

    nota

    Cuando envíe el formulario, Amazon Pinpoint intentará enviar un mensaje al número de teléfono especificado. Debido a esta funcionalidad, debe utilizar un número de teléfono real para probar la solución al completo.

    Si ha probado la función de Lambda en Creación de funciones de Lambda, el proyecto de Amazon Pinpoint ya contiene al menos un punto de conexión. Cuando pruebe este formulario, deberá enviar un número de teléfono diferentes en el formulario, o eliminar el punto de enlace existente mediante la operación de la API DeleteEndpoint operación.

  3. Compruebe el dispositivo asociado al número de teléfono que especificó para asegurarse de que recibió el mensaje.

  4. Abra la consola de Amazon Pinpoint en https://console.aws.amazon.com/pinpoint/.

  5. En la página Todos los proyectos, elija el proyecto que creó en Crear un proyecto de Amazon Pinpoint.

  6. En el panel de navegación, seleccione Segments (Segmentos). En la página Segments (Segmentos), elija Create a segment (Crear un segmento).

  7. En Segment group 1 (Grupo de segmento 1), en Add filters to refine your segment (Añadir filtros para acotar el segmento), elija Filter by user (Filtrar por usuario).

  8. En Choose a user attribute (Elegir un atributo de usuario), elija FirstName. A continuación, en Choose values (Elegir valores), seleccione el nombre que especificó cuando envió el formulario.

    La sección Segment estimate (Estimación de segmento) debe mostrar que no hay puntos de enlace aptos y un punto de enlace (en Total endpoints [Puntos de enlaces totales]), como se muestra en el siguiente ejemplo. Este resultado es el previsto. Cuando la función de Lambda crea un nuevo punto de conexión, se cancela la suscripción de este de forma predeterminada.

    Un segmento en el que no hay ningún punto de conexión suscrito.

  9. En el dispositivo que recibió el mensaje, conteste al mensaje con la palabra clave de SMS bidireccional que especificó en Habilitar SMS bidireccionales. Amazon Pinpoint envía un mensaje de respuesta inmediatamente.

  10. En la consola de Amazon Pinpoint, repita los pasos del 4 al 8. Esta vez, cuando cree el segmento, verá un punto de enlace apto y un punto de enlace total. El resultado es el esperado, ya que ahora se ha realizado la suscripción al punto de enlace.