AWS の開始方法

サーバーレスのウェブアプリケーションを構築する

AWS Lambda、Amazon API Gateway、AWS Amplify、Amazon DynamoDB、および Amazon Cognito を使用

モジュール 2: ユーザーを管理する

ユーザーのアカウントを管理するための Amazon Cognito ユーザープールを作成します。

概要

このモジュールでは、ユーザーのアカウントを管理するための Amazon Cognito ユーザープールを作成します。顧客が新しいユーザーとして登録し、自分の E メールアドレスを確認して、そしてサイトにサインインできるようにするページを配置します。​

アーキテクチャの概要

アーキテクチャの概要

ユーザーがお客様のウェブサイトにアクセスすると、彼らは最初に新しいユーザーアカウントを登録します。​このワークショップの目的上、登録のために E メールアドレスとパスワードを提供するようにユーザーに要求するだけです。​ただし、独自のアプリケーションで追加の属性を要求するように Amazon Cognito を設定できます。

ユーザーが登録を送信した後、Amazon Cognito は提供されたアドレスに確認コードを記載した確認メールを送信します。ユーザーのアカウントを確認するには、ユーザーはお客様のサイトに戻り、自分の E メールアドレスと受け取った確認コードを入力します。​Amazon Cognito コンソールとテスト用のダミーの E メールアドレスを使用してユーザーアカウントを確認することもできます。

ユーザーが確認済みアカウントを取得した後 (コンソールでの E メール確認プロセスまたは手動確認のいずれかを使用)、サインインできるようになります。​ユーザーがサインインするときに、ユーザー名 (または E メール) とパスワードを入力します。その後、JavaScript 関数が Amazon Cognito と通信し、セキュアリモートパスワードプロトコル (SRP) を使用して認証して、一連の JSON ウェブトークン (JWT) を受け取ります。JWT にはユーザーの ID に関するクレームが含まれており、Amazon API Gateway で構築した RESTful API に対して認証するために次のモジュールで使用されます。

 所要時間

30 分

 利用するサービス

 CloudFormation テンプレート

次のモジュールにスキップしたい場合は、モジュール 1 で使用したのと同じリージョンでこれらの AWS CloudFormation テンプレートのいずれかを起動できます。

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

実装

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

    1. Amazon Cognito コンソールで、[ユーザープールを作成] を選択します。
    2. [サインインエクスペリエンスを設定] ページの [Cognito ユーザープールのサインインオプション] セクションで、[ユーザー名]  を選択します。[プロバイダーのタイプ] など、他の設定はデフォルトのままにし、[ユーザー名の要件] は何も選択しないでください。[次へ] をクリックします。
    3. [セキュリティ要件を設定] ページで、[パスワードポリシーモード][Cognito のデフォルト] のままにします。多要素認証 (MFA) を設定するか、[MFA なし] を選択して他の設定をデフォルトのままにすることができます。[次へ] をクリックします。
    4. [サインアップエクスペリエンスを設定] ページで、すべてをデフォルトのままにします。[次へ] をクリックします。
    5. [メッセージ配信を設定] ページの [E メールプロバイダー] で、[Amazon SES で E メールを送信 - 推奨] が選択されていることを確認します。[送信元 E メールアドレス] フィールドで、「Amazon Simple Email Service Developer Guide」の「Verifying an email address identity」の手順に従って、Amazon SES で確認した E メールアドレスを選択します。
      注意: ドロップダウンに確認済みの E メールアドレスが表示されない場合は、チュートリアルの最初に選択したのと同じリージョンで確認済みの E メールアドレスを作成していることを確認してください。
    6. [アプリケーションを統合] ページで、ユーザープールに「WildRydes」という名前を付けます [最初のアプリケーションクライアント] で、アプリクライアントに「WildRydesWebApp」という名前を付け、他の設定はデフォルトのままにします。
    7. [確認と作成] ページで、[ユーザープールの作成] を選択します。
    8. [ユーザープール] ページでユーザープール名を選択すると、作成したユーザープールに関する詳細情報が表示されます。[ユーザープールの概要] セクションにあるユーザープール ID をコピーし、ローカルマシンの安全な場所に保存します。 
    9. [アプリの統合] タブを選択し、新しく作成したユーザープールの [アプリクライアントと分析] セクションでクライアント ID をコピーして保存します。
  • /js/config.js ファイルには、ユーザープール ID、アプリクライアント ID、およびリージョンの設定が含まれています。前のステップで作成したユーザープールとアプリの設定でこのファイルを更新し、ファイルをバケットにアップロードします。

    1. ローカルマシンで任意のテキストエディタを使用し、wildryde-site/js/config.js ファイルを開きます。
    2. ファイルの cognito セクションを、前のセクションのステップ 8 と 9 で保存した [ユーザープール ID][アプリクライアント ID] の正しい値に更新します。userPoolID[ユーザープールの概要] セクションの [ユーザープール ID] であり、userPoolClientID は Amazon Cognito の [アプリの統合] > [アプリクライアントと分析] セクションにある [アプリクライアント ID] です。 
    3. 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',
        }
    };

        4.変更したファイルを保存します。

        5.ターミナルウィンドウでファイルを追加、コミット、Git リポジトリにプッシュすると、自動的に Amplify コンソールにデプロイされます。

    次のコードブロックは、ターミナルウィンドウに表示される内容の例です。

    $ git add .
    $ git commit -m "new_config"
    $ git push
    
    1. Finder ウィンドウまたは Windows ファイルエクスプローラーで、モジュール 1 でローカルマシンにコピーした wildrydes-site フォルダに移動します。 
    2. /register.html にアクセスするか、サイトのホームページ (index.html ページ) の [Giddy Up] ボタンをクリックします。
    3. 登録フォームに入力して、[Let's Ryde] を選択します。自分の E メールを使うか、ダミーの E メールを入力することができます。少なくとも 1 つの大文字、数字、および特殊文字を含むパスワードを必ず選択してください。入力したパスワードを後で忘れることがないようにしてください。ユーザーが作成されたことを確認するアラートが表示されます。
    4. 次の 2 つの方法のいずれかを使用して、新しいユーザーを確認します。
      1. 自分が管理する電子メールアドレスを使用した場合は、自分のウェブサイトドメインにある /verify.html にアクセスし、電子メールで受け取った認証コードを入力して、アカウントの検証プロセスを完了できます。確認メールは、スパムメールフォルダに分類される可能性があります。実際のデプロイでは、ユーザープールを設定して Amazon Simple Email Service を使用して、自分が所有するドメインから E メールを送信することをお勧めします。
      2. ダミーの E メールアドレスを使用した場合は、Cognito コンソールから手動でユーザーを確認する必要があります。​
        1. Amazon Cognito コンソールで、[WildRydes] ユーザープールを選択します。
        2. [ユーザー] タブで、登録ページを通して送信した E メールアドレスに対応するユーザーを確認する必要があります。ユーザーの名前を選択して、[ユーザー詳細] ページを開きます。
        3. [アクション] ドロップダウンで [アカウントの確認] を選択し、アカウント作成プロセスを完了します。
        4. [ユーザーアカウントの確認] ポップアップで、[確認] を選択します。
    5. /verify.html ページまたは Cognito コンソールを使用して新しいユーザーを確認した後、/signin.html にアクセスし、登録ステップで入力した E メールアドレスとパスワードを使用してログインします。
    6. 成功した場合、/ride.html にリダイレクトされます。API が設定されていないという通知が表示されます。
      重要: 次のモジュールで Amazon Cognito ユーザープールオーソライザーを作成するために、認証トークンをコピーして保存してください。
    認証に成功しました!

このページはお役に立ちましたか?

サーバーレスバックエンドを構築する