Criar e implantar o formulário da web para usar mensagens SMS para o Amazon Pinpoint - Amazon Pinpoint

Aviso de fim do suporte: em 30 de outubro de 2026, a AWS encerrará o suporte para o Amazon Pinpoint. Após 30 de outubro de 2026, você não poderá mais acessar o console do Amazon Pinpoint nem seus recursos (endpoints, segmentos, campanhas, jornadas e analytics). Para acessar mais informações, consulte Amazon Pinpoint end of support. Observação: as APIs relacionadas a SMS, voz, notificações push para dispositivos móveis, OTP e validação de número de telefone não são afetadas por essa alteração e são compatíveis com o AWS End User Messaging.

Criar e implantar o formulário da web para usar mensagens SMS para o Amazon Pinpoint

Todos os componentes que usam os serviços da AWS para mensagens SMS usando o Amazon Pinpoint já estão prontos. A última etapa é criar e implantar o formulário da Web que captura os dados do cliente.

Nesta seção, você cria uma função JavaScript que analisa o conteúdo do formulário da Web criado na próxima seção. Depois de analisar o conteúdo, essa função envia os dados para a API que você criou em Configurar o Amazon API Gateway.

Para criar o manipulador de formulários

  1. Em um editor de texto, crie um novo arquivo.

  2. No editor, cole o código a seguir.

    $(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. No exemplo anterior, substitua https://example.execute-api.us-east-1.amazonaws.com/v1/register pelo URL de invocação que você obteve em Implantar a API.

  4. Salve o arquivo.

Nesta seção, você cria um arquivo HTML que contém o formulário que os clientes usam para se inscrever no seu programa de SMS. Esse arquivo usa o manipulador de formulários JavaScript que você criou na seção anterior para transmitir os dados do formulário à função do Lambda.

Importante

Quando um usuário envia esse formulário, ele aciona uma função do Lambda que chama várias operações da API do Amazon Pinpoint. Usuários mal-intencionados podem lançar um ataque ao seu formulário que poderia provocar um grande número de solicitações. Caso você planeje usar essa solução para produção, deverá protegê-la usando um sistema como o reCAPTCHA do Google.

Para criar o formulário

  1. Em um editor de texto, crie um novo arquivo.

  2. No editor, cole o código a seguir.

    <!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. No exemplo anterior, substitua SMSFormHandler.js pelo caminho completo para o arquivo JavaScript do manipulador de formulários que você criou na seção anterior.

  4. Salve o arquivo.

Agora que você criou o formulário HTML e o manipulador de formulários JavaScript, a última etapa é publicar esses arquivos na Internet. Esta seção pressupõe que você tenha um provedor de hospedagem da Web existente. Se você não tiver um provedor de hospedagem, poderá iniciar um site usando o Amazon Route 53, o Amazon Simple Storage Service (Amazon S3) e o Amazon CloudFront. Para obter mais informações, consulte Hospedar um site estático.

Se você usar outro provedor de hospedagem da Web, consulte a documentação do provedor para obter mais informações sobre a publicação de páginas da Web.

Depois de publicar o formulário, você deve enviar alguns eventos de teste para garantir que ele funcione conforme o esperado.

Para testar o formulário de registro

  1. Em um navegador da Web, acesse o local em que carregou o formulário de registro. Se você tiver usado o exemplo de código de Criar o manipulador de formulários JavaScript, verá um formulário que se parece com o exemplo na imagem a seguir.

    O formulário de solicitação do cliente criado na etapa 5.1.

  2. Insira suas informações de contato nos campos First name (Nome), Last name (Sobrenome) e Phone number (Número de telefone).

    nota

    Quando você envia o formulário, o Amazon Pinpoint tenta enviar uma mensagem para o número de telefone que você especificou. Por causa dessa funcionalidade, você deve usar um número de telefone real para testar a solução do início ao fim.

    Se você testou a função do Lambda em Criar funções do Lambda, seu projeto do Amazon Pinpoint já contém pelo menos um endpoint. Ao testar esse formulário, você deve enviar um número de telefone diferente no formulário ou excluir o endpoint existente usando a operação da API DeleteEndpoint.

  3. Verifique o dispositivo associado ao número de telefone que você especificou para garantir que recebeu a mensagem.

  4. Abra o console do Amazon Pinpoint em https://console.aws.amazon.com/pinpoint/.

  5. Na página Todos os projetos, escolha o projeto que você criou em Criar um projeto do Amazon Pinpoint.

  6. No painel de navegação, selecione Segmentos. Na página Segmentos, selecione Criar um segmento.

  7. Em Segment group 1 (Grupo de segmentos 1), em Add filters to refine your segment (Adicionar filtros para refinar seu segmento), escolha Filter by user (Filtrar por usuário).

  8. Para Choose a user attribute (Escolher um atributo do usuário), escolha FirstName. Em seguida, em Choose values (Escolher valores), escolha o primeiro nome que você especificou quando enviou o formulário.

    A seção Segment estimate (Estimativa de segmento) deve mostrar que há zero endpoints elegíveis e um endpoint (em Total de endpoints), conforme mostrado no exemplo a seguir. Tal resultado é esperado. Quando a função do Lambda cria um endpoint, o endpoint é cancelado por padrão.

    Um segmento com zero endpoints selecionados.

  9. No dispositivo que recebeu a mensagem, responda à mensagem com a palavra-chave por SMS bidirecional que você especificou em Habilitar SMS bidirecional. O Amazon Pinpoint envia uma mensagem de resposta imediatamente.

  10. No console do Amazon Pinpoint, repita as etapas de 4 a 8. Desta vez, ao criar o segmento, você verá um endpoint elegível e um endpoint total. Esse resultado é esperado, porque o endpoint agora está ativado.