実装

• Amazon Cognito ユーザープールを作成し、アプリをユーザープールと統合する

  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',
      }
  };

  Code snippet copied

  コピー

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

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

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

  $ git add .
  $ git commit -m "new_config"
  $ git push
  

  Code snippet copied

  コピー
• 実装を検証する
  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 ユーザープールオーソライザーを作成するために、認証トークンをコピーして保存してください。