Amazon Pinpoint のSMSメッセージングを使用するウェブフォームを作成してデプロイする

Amazon Pinpoint を使用したSMSメッセージングに AWS サービスを使用するすべてのコンポーネントが導入されました。最後のステップは、お客様のデータをキャプチャするウェブフォームを作成してデプロイすることです。

このセクションでは、次のセクションで作成したウェブフォームのコンテンツを解析する JavaScript 関数を作成します。コンテンツを解析すると、この関数は Amazon API Gateway のセットアップでAPI作成したにデータを送信します。

フォームハンドラを作成するには

テキストエディタで新規ファイルを作成します。

エディタで、次のコードを貼り付けます。


$(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);
        }
      });
    }
  });
});

前の例では、https://example.execute-api.us-east-1.amazonaws.com/v1/register をデプロイでURL取得した呼び出しを使用します。 API
ファイルを保存します。

このセクションでは、お客様がSMSプログラムに登録するために使用するフォームを含むHTMLファイルを作成します。このファイルは、前のセクションで作成した JavaScript フォームハンドラーを使用して、フォームデータを Lambda 関数に送信します。

重要

ユーザーがこのフォームを送信すると、複数の Amazon Pinpoint APIオペレーションを呼び出す Lambda 関数がトリガーされます。悪意のあるユーザーが、多数のリクエストが発生する原因になる攻撃をフォームで起動する可能性があります。このソリューションを本番稼働用ユースケースに使用する場合は、Google re CAPTCHAなどのシステムを使用してセキュリティを確保する必要があります。

フォームを作成するには

テキストエディタで新規ファイルを作成します。

エディタで、次のコードを貼り付けます。


<!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" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" 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>

前の例では、SMSFormHandler.js 前のセクションで作成したフォームハンドラー JavaScript ファイルへのフルパス。
ファイルを保存します。

HTML フォームと JavaScript フォームハンドラーを作成したら、最後のステップはこれらのファイルをインターネットに公開することです。このセクションでは、既存のウェブホスティングプロバイダーがあることを前提としています。既存のホスティングプロバイダーがない場合は、Amazon Route 53、Amazon Simple Storage Service (Amazon S3)、および Amazon を使用してウェブサイトを起動できます CloudFront。詳細については、「静的ウェブサイトをホスティングする」を参照してください。

別のウェブホスティングプロバイダーを使用する場合は、ウェブページの発行の詳細について、プロバイダーのドキュメントを参照してください。

フォームを発行した後は、想定どおりに動作するかどうかを確認するためにいくつかのテストイベントを送信する必要があります。

登録フォームをテストするには

ウェブブラウザで、登録フォームのアップロード先に移動します。 JavaScript フォームハンドラーの作成のコード例を使用した場合、次の画像に例に似たフォームが表示されます。
連絡先情報を、[名]、[姓]、[電話番号] の各フィールドに入力します。

注記
フォームを送信すると、Amazon Pinpoint により指定した電話番号へのメッセージの送信が試行されます。この機能のため、ソリューションをテストするには、最初から最後まで実際の電話番号を使用する必要があります。
Create Lambda 関数で Lambda 関数をテストした場合、Amazon Pinpoint プロジェクトにはすでに少なくとも 1 つのエンドポイントが含まれています。このフォームをテストするときは、フォームで別の電話番号を送信するか、 DeleteEndpointAPIオペレーションを使用して既存のエンドポイントを削除する必要があります。
指定した電話番号に関連付けられたデバイスを確認し、そのデバイスがテストメッセージを受信したことを確認します。
で Amazon Pinpoint コンソールを開きますhttps://console.aws.amazon.com/pinpoint/。
すべてのプロジェクトページで、Amazon Pinpoint プロジェクトの作成で作成したプロジェクトを選択します。
ナビゲーションペインの [Segments] を選択します。[セグメント] ページで、[セグメントの作成] を選択します。
[セグメントグループ 1] の [Add filters to refine your segment] で、[Filter by user] を選択します。
ユーザー属性を選択するで、を選択しますFirstName。次に、[Choose values] に、フォームを送信したときに指定した名前を選択します。

[Segment estimate] セクションに、次の例に示すように、適格なエンドポイントがゼロであり、エンドポイントが 1 つあることが表示されます。この結果は正常です。Lambda 関数が新しいエンドポイントを作成すると、デフォルトでエンドポイントがオプトアウトされます。
メッセージを受け取ったデバイスで、双方向を有効にする SMSで指定した双方向SMSキーワードでメッセージに返信します。Amazon Pinpoint はすぐに応答メッセージを送信します。
Amazon Pinpoint コンソールで、ステップ 4～8 を繰り返します。今回は、セグメントを作成するときに、1 つの適格なエンドポイントと、合計 1 つのエンドポイントが表示されます。エンドポイントがオプトインされたため、これは想定される動作です。

ブラウザで JavaScript が無効になっているか、使用できません。

AWS ドキュメントを使用するには、JavaScript を有効にする必要があります。手順については、使用するブラウザのヘルプページを参照してください。

ドキュメントの表記規則

Amazon API Gateway のセットアップ

次のステップ

Amazon Pinpoint のSMSメッセージングを使用するウェブフォームを作成してデプロイする

フォームハンドラを作成するには

重要

フォームを作成するには

登録フォームをテストするには

注記