このモジュールでは、Amazon Cognito ユーザープールを作成し、ユーザーアカウントを管理します。顧客が新しいユーザーとして登録し、電子メールアドレスを確認し、サイトにサインインすることが可能になるページをデプロイします。

Serverless_Web_App_LP_assets-03

ユーザーがウェブサイトを訪問すると、まず新しいユーザーアカウントを登録します。このワークショップでは、登録するために電子メールアドレスとパスワードしか求めません。しかし、Amazon Cognito では、使用するアプリケーションで追加の属性を求めるように設定することもできます。

ユーザーが登録した後、Amazon Cognito は、提供されたアドレスに、認証コードが含まれた確認メールを送信します。アカウントを確認するには、ユーザーはサイトに戻り、自分の電子メールアドレスと受信した認証コードを入力します。テスト用に偽の電子メールアドレスを使用した場合でも、Amazon Cognito コンソールを使用してユーザーアカウントを確認できます。

ユーザーはアカウントを確認した後 (電子メール認証処理、またはコンソールを介した手動による確認のいずれかを使用)、サインインできるようになります。ユーザーがサインインするときは、ユーザー名 (または電子メール) とパスワードを入力します。次いで、JavaScript 関数は Amazon Cognito と通信し、Secure Remote Password プロトコル (SRP) を使って認証し、一組の JSON Web トークン (JWT) を受け取ります。この JWT には、ユーザーの ID に関する情報が含まれており、Amazon API Gateway で構築した RESTful API に対して認証するために次のモジュールで使用されます。

モジュールを完了するための時間:30 分

使用されるサービス :Amazon Cognito

CloudFormation テンプレート:スキップして次のモジュールに進む場合、モジュール 1 で使用したのと同じリージョン内の AWS CloudFormation テンプレートの 1 つを起動できます。

リージョン CloudFormation テンプレート
米国東部 (バージニア北部) スタックを起動 >
米国東部 (オハイオ) スタックを起動 >
米国西部 (オレゴン) スタックを起動 >
欧州 (フランクフルト) スタックを起動 >
欧州 (アイルランド) スタックを起動 >
欧州 (ロンドン) スタックを起動 >
アジアパシフィック (東京) スタックを起動 >
アジアパシフィック (ソウル) スタックを起動 >
アジアパシフィック (シドニー) スタックを起動 >
アジアパシフィック (ムンバイ) スタックを起動 >
Serverless_Web_App_LP_assets-17

CloudFormation 起動手順

  1. 任意のリージョンについて、上記の [Launch Stack (スタックを起動)] リンクを選択します。

  2. [Select Template (テンプレートを選択) ] ページで、[Next (次へ)] を選択します。

  3. ウェブサイトバケット名で、モジュール 1 で付けたウェブサイトバケットの名前を指定し (例 : wildrydes-yourname)、[Next (次へ)] を選択します。

    注意:前のモジュールで使用したのと同じバケット名を指定する必要があります。存在しないバケット名、または書き込みアクセス権を有していないバケット名を指定した場合、CloudFormation スタックは、作成中に失敗します。

  4. [Options (オプション) ] ページで、すべてのデフォルトをそのままにして [Next (次へ)] を選択します。

  5. [Review (レビュー) ] ページで、CloudFormation が IAM リソースを作成することに同意するチェックボックスをオンにし、[Create (作成)] を選択します。

    このテンプレートはカスタム リソースを使用して、Amazon Cognito ユーザープールとクライアントを作成し、このユーザープールに接続してウェブサイト バケットにアップロードするのに必要な詳細を含む設定ファイルを生成します。このテンプレートは、これらのリソースを作成し、設定ファイルをバケットにアップロードするためのアクセス権を提供するロールを作成します。

  6. wildrydes-webapp-2 スタックが、 CREATE_COMPLETE のステータスに到達するまで待ちます。

  7. ステップ 4 で説明されている手順に従います。実装をテストし、次のモジュールに進む準備が完了していることを確認します。


以下の詳細な手順に従ってユーザープールを作成します。各ステップの番号をクリックして、セクションを展開してください。

  • ステップ 1.Amazon Cognito ユーザープールを作成する

    Amazon Cognito は、ユーザーを認証するための2つの異なるメカニズムを提供します。サインアップおよびサインイン機能をアプリケーションに追加するために、Cognito ユーザープールを使用することができ、また、SAML ID ソリューションによって、Facebook、Twitter、Amazon などのソーシャル アイデンティティープロバイダーを介して、ユーザーを認証するために Cognito アイデンティティプールを使用することができます。このモジュールでは、提供された登録およびサインインページのためのバックエンドとしてユーザープールを使用します。


    1. AWS コンソールで [サービス] をクリックしてから、「モバイルサービス」にある [Cognito] を選択します。
    2. [Manage your User Pools (ユーザープールを管理)] を選択します。
    3. [Create a User Pool (ユーザープールを作成)] を選択します。
    4. ユーザープールのために、WildRydesなどの名前を提供し、次に Review Defaults を選択します
    5. [Review (レビュー) ] ページで、[Create pool (プールを作成)] をクリックします。
    6. 新たに作成したユーザープールのプールの詳細 ページにプール ID を記入します。
  • ステップ 2.ユーザープールにアプリを追加する

    Amazon Cognito コンソールから、ユーザープールを選択し、次いでアプリのクライアントセクションを選択します。新しいアプリのクライアントを追加し、クライアントの秘密の生成オプションが選択解除されていることを確認してください。クライアントの秘密は、現在 JavaScript SDK でサポートされていません。生成された秘密によってアプリを作成する場合、それを削除し、正しい設定を使用して新しいアプリを作成します。


    1. ユーザープールの [Pool Details (プールの詳細) ] ページで、左側のナビゲーションバーから [App clients (アプリのクライアント)] を選択します。
    2. [Add an app client (アプリのクライアントを追加)] を選択します。
    3. アプリに WildRydesWebApp のような名前を付けます。
    4. [Generate client secret (クライアントの秘訣を生成) ] オプションのチェックを外します。クライアントの秘密は、現在、ブラウザベースのアプリケーションで使用するためにサポートされていません。
    5. [Create app client (アプリのクライアントを作成)] をクリックします。
    6. 新しく作成されたアプリケーションのための [App client ID (アプリのクライアントのID)] を書き留めます。
  • ステップ 3.ウェブサイトバケットの config.js ファイルを更新する

    /js/config.js ファイルには、ユーザープール ID、アプリのクライアント ID、およびリージョンに関する設定が含まれています。前のステップで作成したユーザープールとアプリからの設定によってこのファイルを更新し、バケットにそのファイルをアップロードします。


    1. このリポジトリの最初のモジュールのウェブサイトディレクトリからローカルマシンにconfig.js ファイルをダウンロードします。作成した S3 バケットに戻って「js」 という名前のフォルダに移動すると見つけることができます。
    2. 任意のテキストエディターを使用してダウンロードしたファイルを開きます。
    3. 作成したばかりのユーザープールとアプリのための正しい値によって cognito セクションを更新します。
    4. userPoolId の値は、作成したユーザープールを選択した後に、Amazon Cognito コンソールのプールの詳細ページにあります。
      userPoolClientId の値は、左のナビゲーションバーから [ App clients (アプリのクライアント)] を選択することによって見つけられます。前のセクションで作成したアプリについては [ App client ID (アプリのクライアントのID)] フィールドの値を使用します。
      region の値は、ユーザープールを作成した AWS リージョンコードになります。 例:バージニア北部リージョンは us-east-1 また、オレゴンリージョンは us-west-2 となります。使用するコードがわからない場合、プールの詳細ページのプールの ARN 値を調べることができます。リージョンコードは、 arn:aws:cognito-idp: の直後にある ARN の部分です。
      更新された config.js ファイルは次のようになります。お客様のファイルの実際の値は異なる場合があるということに注意してください:

    window._config = { cognito:{ userPoolId:'us-west-2_uXboG5pAb', // e.g. us-east-2_uXboG5pAb userPoolClientId:'25ddkmj4v6hfsfvruhpfi7n4hv', // e.g. 25ddkmj4v6hfsfvruhpfi7n4hv region:'us-west-2' // e.g. us-east-2 }, api:{ invokeUrl:'' // e.g. https://rc7nyt4tql.execute-api.us-west-2.amazonaws.com/prod', } };

    1. ファイル名が引き続き config.js であることを確認して、変更したファイルを保存します。
    2. https://console.aws.amazon.com/s3/ にアクセスして、Amazon S3 コンソールを開きます。
    3. 前のモジュールで作成した Wild Rydes ウェブサイトバケットを選択します。
    4. js プレフィックスを参照します。
    5. [Upload (アップロード)] を選択し、次に [Add Files (ファイルを追加)] を選択します。
    6. ローカルで変更したバージョンの config.js ファイルを保存したディレクトリを参照し、それを選択し、[Open (開く)] を選択します。
    7. ダイアログボックスの左側にある [Upload (アップロード)] を選択します。

    注意 : 登録、認証、およびサインインの流れを管理するために、ブラウザ側コードを記入するのではなく、最初のモジュールでデプロイしたアセットで機能する実装を提供します。cognito-auth.js ファイル には、UI イベントを取り扱い、適切な Amazon Cognito Identity SDK メソッドを呼び出すコードが含まれています。SDK の詳細については、GitHub の「プロジェクトページ」を参照してください。

  • ステップ 4.実装のテスト


    1. ウェブサイトドメインの下にある /register.html を参照するか、サイトのホームページにある [Giddy Up!] ボタンを選択します。
    2. 登録フォームを完成して [Let's Ryde]を選択します。独自の電子メールまたは偽の電子メールを使用できます。少なくとも 1 つの大文字、数字、特殊文字を含んでいるパスワードを選択していることを確認します。後で分かるように、入力したパスワードを忘れないようにします。ユーザーが作成されたことを確認するアラートが表示されます。
    3. 次の 2 つの方法のいずれか 1 つを使用して新しいユーザーを確認します。
    4. 自分が管理する電子メールアドレスを使用した場合は、自分のウェブサイトドメインにある /verify.html にアクセスして、電子メールで受け取った認証コードを入力して、アカウントの検証プロセスを完了できます。 なお、認証電子メールは、迷惑メールフォルダに分類されるおそれがあることにご注意ください。実際のデプロイについては、所有するドメインから電子メールを送信するために、Amazon Simple Email Service を使うようユーザープールを設定することをお勧めします。
    5. ダミーの電子メールアドレスを使用した場合、Cognito コンソール全体にわたって手動でユーザーを確認していただく必要があります。
    6. AWS コンソールから、[Services (サービス) ] をクリックし、次に Security、Identity & Compliance の下の [Cognito] を選択します。
    7. [Manage your User Pools (ユーザープールの管理)] を選択します
    8. WildRydes ユーザープールを選択し、左側のナビゲーションバーの [Users and groups (ユーザーおよびグループ)] をクリックします。
    9. 登録ページを介して提出した電子メールアドレスに対応するユーザーが表示されます。ユーザーの詳細情報ページを表示するには、そのユーザー名を選択します。
    10. アカウント作成プロセスを完了するには、[Confirm user (ユーザーを確認)] を選択します。
    11. /verify.html ページまたは Cognito コンソールを使用して新しいユーザーを確認した後、/signin.html にアクセスし、登録手順で入力した電子メールアドレスとパスワードを使用してログインします。
    12. 成功した場合、 /ride.html にリダイレクトされます。API が設定されていないという通知が表示されます。
    successful-login