AWS でのプロジェクト:

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

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

はじめに

静的ウェブサイトをホストする

ユーザーの管理

サーバーレスバックエンドの構築

RESTful API のデプロイ

リソースを終了する

モジュール 2。ユーザー管理

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

アーキテクチャの概要

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

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

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

モジュールの所要時間: 30 分

使用したサービス: Amazon Cognito

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

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

CloudFormation の起動手順

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

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

  3. [Website Bucket Name (ウェブサイトバケット名)] で、モジュール 1 で付けたウェブサイトバケットの名前 (たとえば、wildrydes-yourname) を指定し、[次へ] をクリックします。

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

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

  5. [Review (確認)] ページで、CloudFormation によって IAM リソースが作成されることを確認するチェックボックスをオンにして、[作成] を選択します。

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

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

  7. 「ステップ 4実装のテスト」に記載されているステップに従って、次のモジュールに進む準備ができていることを確認します。

実装手順

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

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

    Amazon Cognito ユーザープールを作成する

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

    1. AWS コンソールで、[サービス] を選択してから、「モバイルサービス」の下にある [Cognito] を選択します。
    2. [Manage your User Pools (ユーザープールの管理)] を選択します。
    3. [ユーザープールを作成する] を選択します。
    4. WildRydes のようなユーザープールの名前を入力し、[デフォルトを確認する] を選択します。
    5. [Review (確認)] ページで、[Create pool (プールの作成)] をクリックします。
    6. 新しく作成したユーザープールの [プールの詳細] ページの [プール ID] を書き留めます。

  • ステップ 2: ユーザープールにアプリを追加する

    ユーザープールにアプリを追加する

    Amazon Cognito コンソールからユーザープールを選択し、次に [App clients (アプリケーションクライアント)] セクションを選択します。新しいアプリクライアントを追加し、[Generate client secret (クライアントシークレットの生成)] オプションの選択が解除されていることを確認します。クライアントシークレットは、現在 JavaScript SDK ではサポートされていません。生成されたシークレットでアプリケーションを作成した場合は、それを削除して正しい設定で新しいアプリケーションを作成してください。

    1. ユーザープールの [Pool Details (プールの詳細)] ページで、ナビゲーションバーの左側の [General Settings (一般設定)] セクションから [App clients (アプリケーションクライアント)] を選択します。
    2. [Add an app client (アプリケーションクライアントの追加)] を選択します。
    3. アプリケーションクライアントに WildRydesWebApp などの名前を付けます。
    4. [Generate client secre (クライアントシークレットを生成する)] オプションをオフにします。クライアントシークレットは、現在ブラウザベースのアプリケーションでの使用はサポートされていません。
    5. [Create app client (アプリケーションクライアントの作成)] を選択します。
    6. 新しく作成されたアプリケーションのアプリケーションクライアント ID を書き留めます。

  • ステップ 3:ウェブサイトの設定を更新する

    ウェブサイトの設定を更新する

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

    a.ローカルマシンでお好みのテキストエディタを使用し、「wild-ryde-site/js/config.js」を開きます。

    b.作成したユーザープールとアプリケーションの正しい値で Cognito セクションを更新します。

    作成したユーザープールを選択すると、Amazon Cognito コンソールのプールの詳細ページで userPoolId の値を確認できます。
    左側のナビゲーションバーでアプリのクライアントを選択すると、userPoolClientId の値を確認できます。前のセクションで作成したアプリケーションについては [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',
    }
};

    d.変更済みのファイルを保存して、ファイルを Amplify コンソールへ自動的にデプロイするため Git リポジトリにプッシュします。

    $ git push

  • ステップ 4: 実装をテストする

    実装を検証する

    1. お客様のウェブサイトのドメインの /register.html にアクセスするか、Giddy Up を選択してください。お客様のサイトのホームページのボタンをクリックしてください。
    2. 登録フォームに入力して、「Let's Ryde」を選択してください。自分の E メールを使うか、ダミーの E メールを入力することができます。少なくとも 1 つの大文字、数字、および特殊文字を含むパスワードを必ず選択してください。入力したパスワードを後で忘れることがないようにしてください。ユーザーが作成されたことを確認するアラートが表示されます。
    3. 次の 2 つの方法のいずれかを使用して、新しいユーザーを確認してください。
    4. 自分が管理する電子メールアドレスを使用した場合は、自分のウェブサイトドメインにある /verify.html にアクセスし、電子メールで受け取った認証コードを入力して、アカウントの検証プロセスを完了できます。 確認メールは、スパムメールフォルダに分類される可能性があります。実際のデプロイでは、ユーザープールを設定して Amazon Simple Email Service を使用して、自分が所有するドメインから E メールを送信することをお勧めします。
    5. ダミーの E メールアドレスを使用した場合は、Cognito コンソールから手動でユーザーを確認する必要があります。​
    6. AWS コンソールで、[セキュリティ、アイデンティティ、コンプライアンス] の [Cognito] を選択します。
    7. [Manage your User Pools (ユーザープールの管理)] を選択します。
    8. WildRydes ユーザープールを選択し、左側のナビゲーションバーの [Users and groups (ユーザーおよびグループ)] をクリックします。
    9. 登録ページを通して送信した E メールアドレスに対応するユーザーを確認する必要があります。ユーザーの名前を選択して、[User detail (ユーザー詳細)] ページを開きます。
    10. [Confirm user (ユーザーの確認)] を選択して、アカウント作成プロセスを終了します。
    11. /verify.html ページまたは Cognito コンソールを使用して新しいユーザーを確認した後、/signin.html にアクセスし、登録ステップで入力した E メールアドレスとパスワードを使用してログインします。
    12. 成功した場合、/ride.html にリダイレクトされます。API が設定されていないという通知が表示されます。
次: サーバーレスバックエンドの構築