AWS Cognitoを使用してログイン機能を実装する

はじめに

この記事では、AWS Cognitoを使用して以下の機能の実装方法を説明します。

• メアドとパスワードを使用したサインアップ、ログイン、ログアウト、アカウントの削除
  • CognitoのUIを使用する場合
  • 自分でUIを用意する場合（途中）
• パブリックサービスを使用したサインアップ、ログイン、ログアウト、アカウントの削除（まだ書いてません）

前提知識

フェデレーションとは

ユーザープールとIDプールの違い

CognitoにはユーザープールとIDプールという主な２つのコンポーネントがあります。両者の違いについて公式ドキュメントでは以下のように説明されています。

ユーザープールでは認証 (アイデンティティの検証) ができます。ユーザープールを使用すると、アプリユーザーはユーザープールを通じたサインインや、サードパーティーのアイデンティティプロバイダー (IdP) を介した連携ができます。

ID プールでは認可 (アクセスコントロール) ができます。ID プールを使用すると、ユーザーに一意の ID を作成して、他の AWS サービスへのアクセスを許可できます。

ユーザープールでまずユーザーが誰なのかをはっきりさせます。例えばこの人はうちのサービスにこの前登録してくれた山田太郎さんというユーザーだからサインインさせてあげよう、あの人はまだ登録してくれてないからまずはサインアップからしてもらおうなどと判断することです。この行為を一般的には認証と呼びます。

IDプールでは、ユーザーが何かしたいと言ってきたときにそれを許可するか判断します。例えばさっき認証した山田太郎さんというユーザーがファイルをアップロードしたいと言ってきたけどこのユーザーにはその権限は与えてないので許可しないようにしよう、田中次郎さんというユーザーがユーザー名を変更したいと言ってきたけど、その権限は与えてるから許可しようなどと判断することです。この行為を一般的には認可と呼びます。

一般的なCognitoの使用シナリオ

以下が参考になります。

メアドとパスワードを使用したログイン機能

Cognitoを用いてログイン機能を実装する場合、Cognitoが用意してくれるUI（サインアップ画面やログイン画面など）を使用するか、自分でUIを用意するかを選べます。以下では、両者の設定を説明します。

ユーザープールの作成

サインインエクスペリエンスを設定

1. Cognitoのダッシュボードにアクセスし、「ユーザープールを作成」をクリックします。
   
2. 「Cognitoユーザープールのサインインオプション」の「Eメール」を選択し、「次へ」を押す
   

セキュリティ要件を設定

1. 「パスワードポリシー」はそのままで大丈夫です
   
2. 「多要素認証」に関しては今回は「MFAなし」にします
   • これはサインイン（ログイン）の際にMFAを必須とするかどうかの設定ですが、そこまでの強度が必要でなければUXを下げるだけなのでMFAは使用しません。
     
3. 「ユーザーアカウントの復旧」はそのままにして、「次へ」を押します
   

サインアップエクスペリエンスを設定

1. 「セルフサービスのサインアップ」は有効のままにします
   
2. 「属性検証とユーザーアカウントの確認」の「Cognito アシスト型の検証および確認」は、「E メールのメッセージを送信、E メールアドレスを検証」を選択
   
3. 「属性検証とユーザーアカウントの確認」の「属性変更の確認」はそのままにします
   
4. 「必須の属性」と「カスタム属性」はそのままにして「次へ」を押します
   

メッセージ配信を設定

1. 「Eメール」の「E メールプロバイダー」はCognitoの方を選択します。そのほかもデフォルトのままにして「次へ」を押します
   
   • Cognitoを使って送信する方法だと、送信できる数に制限があるほか、デフォルトでは[e-mail]というメアドからの送信になります
     • 詳細はこのドキュメントが参考になります

アプリケーションを統合

1. 「ユーザープール名」の「ユーザープール名」には任意のこのユーザープールの名前を入力します。自分のUIを使う場合はチェックを外しましょう
   
   • CognitoのUIを使用したい場合はチェックを入れ、「ドメイン」の「ドメインタイプ」には「Cognitoドメインを使用する」を選択し、「Cognitoドメイン」には任意のドメインプレフィックスを入力してください
     
2. 「最初のアプリケーションクライアント」の「アプリケーションタイプ」は「パブリッククライアント」を選択、「アプリケーションクライアント名」は任意の名前を入力、「クライアントのシークレット」は「クライアントのシークレットを生成しない」を選択し、「次へ」を押す
   • Amazon Cognito JavaScriptSDKはクライアントシークレットを使用しないので、例外処理が行われてしまうため、「クライアントのシークレットを生成しない」を選択する¹らしいです。自分もよくわかってないんで、誰か教えてください
     
   • CognitoのUIを使用する人は「クライアントのシークレット」の下に「許可されているコールバックURL」にhttp://localhostと入力しましょう。httpsではなく、httpにしてください
     

確認および作成

確認して問題なければ「ユーザープールを作成」を押しましょう。

IDプールの作成

1. ユーザープール作成後の画面から作成したユーザープール名をクリックし、ユーザープールの詳細画面を表示します。後で必要なので「ユーザープールID」と「クライアントID」（アプリケーションの統合タブに書いてあります）をメモします
2. ユーザープール作成後の画面からIDプールの画面に行くまではちょっとわかりづらいです。まずはユーザープール作成後の画面の上にあるパンくずリストの「Amazon Cognito」をクリックしましょう
   
3. Cognitoのダッシュボードに戻ったら、「ビジネスケースからはじめる」の下のリストから「AWSのサービスへのアクセス権を付与する」という項目を選び、下の「IDプールを作成」を押しましょう
   
4. 「IDプール名」に任意の名前を入力します
   
5. 「認証プロバイダー」の「Cognito」タブを選択し、先ほどメモした「ユーザープールID」と「クライアントID」をそれぞれ入力し、「プールの作成」を押します
   
6. 「許可」を押します
   

ログイン機能を実装する

ログインページのUIを用意する

CognitoのUIを使う場合

1. クライアントIDを確認したのと同じ手順で、作成したユーザープールの詳細画面にアクセスして、「アプリケーションの統合」タブを開きます
2. 「アプリケーションクライアント名」に表示されているアプリケーションクライアントをクリックし、詳細画面を開きます
3. 「ホストされたUI」の「ホストされたUIを表示」をクリックします。するとサインイン画面が表示されます。「Sign Up」をクリックします
   
4. サインアップ画面に遷移するので自分のメアドと任意のパスワードを入力しましょう
   
5. すると認証コードの入力を求められるのでメールを確認して届いたコードを入力してボタンをクリックします
   • 認証コードが届かない場合は迷惑メールを確認してみてください。私の場合も迷惑メールに入ってました
   • ボタンをクリック後はコールバックURLとして指定したhttp://localhostにリダイレクトすると思うのですが、もちろんlocalhostは動いてないのでエラーメッセージが表示されます。ページを閉じてもう一度「ホストされたUIを表示」をクリックすると同じエラーメッセージが出てくるlocalhostにリダイレクトされるので、ログイン状態が保持されているんだなとわかります
     

自分でUIを用意する場合

以下の記事が参考になります。

IDプールに作成したロールにポリシーをアタッチする

1. IDプールに作成したロールの名前を確認する
   • IDプールの詳細画面にアクセスしたいのですが、これまたわかりにくい場所にあります。まずCognitoのダッシュボードを開きます。左側のメニューバー（折り畳まれている場合は開いてください）にある「フェデレーティッドID」をクリックします
     
   • すると作成したIDプールが表示されるので、名前部分をクリックしてください
     
   • 右上にある「IDプールの編集」をクリックすると「認証されていないロール」と「認証されたロールの名前」が確認できます
2. 今度はAWSのサービス一覧からIAMのダッシュボードに行って、「ロール」にアクセスすると先ほど確認した２つのロールが表示されているのが確認できます。
3. 認証されたロールの方をクリックして詳細画面に行き、「許可」タブにアクセスして、「許可を追加」 > 「ポリシーをアタッチ」で任意のポリシーをアタッチします

ユーザープールにカスタムドメインを割り当てる

自分のドメインを持っている場合はそれを割り当てることでログイン機能を自分のサイトに実装できます。ドメインを割り当てる前にRoute53にてDNSレコードを追加する必要があります。

1. Route53のダッシュボードにアクセスします
2. 「ホストゾーン」に行き、ドメイン名をクリックします
3. 「レコード」タブにて、「レコードを作成」をクリックします
4. 「レコード名」にauthと入力します
   • ホストされた UI への独自のドメインの使用で言及されているようにCognitoではルートドメインを使用できず、サブドメインを使う必要があります。特にauthというサブドメインを使用するように推奨されています。
5. 「レコードタイプ」は「A」を選択します。
   • Aレコードやその他のDNSレコードについてはこの記事が参考になります
6. ユーザープールのダッシュボードを開き、作成したユーザープールの詳細画面にアクセスし、「アプリケーションの統合」タブを開きます。
7. Cgnitoドメインの削除
8. 「ドメイン」の「アクション」から「カスタムドメインを作成」をクリックします
9. 「カスタムドメイン」に使用したいドメイン名を入力し、「ACM証明書」から証明書を選択し、「カスタムドメインを作成」を押す
   • ACM証明書がない場合は「ACM証明書を作成」を押して作成してください

パブリックサービスを使用したログイン機能

1. はじめてのCognito! CognitoのログインUIを使って認証システムを実装したまとめ ↩