サーバーレスのウェブアプリケーションを構築2 Amazon Cognito を使ったユーザー管理

2021.07.15

こんにちは。イムチェジョンです。
前のブログではAWS Amplify を使った静的ウェブホスティングをやってみました。今回は続いてAmazon Cognito を勉強し、ユーザー管理をしてみようと思います。

[サーバーレスのウェブアプリケーションを構築シリーズ]
1. AWS Amplify を使った静的ウェブホスティング
2. Amazon Cognito を使ったユーザー管理
3. バックエンドの構築 (AWS Lambda、Amazon DynamoDB)
4. RESTful API (Amazon API Gateway、 AWS Lambda)

アジェンダ

  1. 今回の目標
  2. Amazon Cognito とは
  3. Amazon Cognitoを使ったユーザー管理
  4. まとめ

0. 今回の目標

目標:Amazon Cognitoを勉強し、ユーザー管理を行う。

1. Amazon Cognito とは

Amazon Cognito

  • Amazon Cognitoでは数百万のユーザに拡張でき、Apple、Facebook、Google、Amazonのようなソーシャル資格証明供給者とエンタープライズ資格証明供給者(SAML 2.0およびOpenID Connect使用)によるログインをサポート
  • ウェブとモバイルアプリに素早く簡単にユーザー登録、ログイン、アクセス制御機能を追加可能

Amazon Cognitoの長所

  • 安全で拡張的なユーザーディレクトリー
    • Amazon Cognitoユーザープールは、多数のユーザーに拡張できる安全なユーザーディレクトリーを提供
    • ユーザープールは完全管理型サービスなので、サーバーインフラ構成の心配なく簡単に設定可能
  • ソーシャル及びエンタープライズ資格証明の連動
    • ユーザーがApple, Google, Facebook, and Amazonのようなソーシャル資格証明供給者とSAML 2.0、OpenID Connectのようなエンタープライズ資格証明供給者を通じてログイン可能
  • 標準基盤認証
    • 標準基盤の資格証明供給者で、Oauth 2.0、SAML 2.0、OpenID Connectのような資格証明、アクセス管理標準をサポート
  • 簡単にアプリと統合
    • 資格証明供給者連動のための基本UIと手軽な構成を使用してAmazon Cognitoを統合し、数分でアプリにユーザー登録、ログイン、アクセス制御機能を追加可能
  • AWSリソースへのアクセス制御
    • アプリのAWSリソースへのアクセスを制御するソリューションを提供
    • 役割を定義し、ユーザを役割に結びつけることができるため、当該ユーザにアクセス権限が付与されたリソースのみにアプリがアクセスできる。
    • またはAWS Identity and Access Management権限ポリシーに資格証明供給者の属性を使用し、特定の属性条件を満たすユーザーでリソースアクセスを制御

2. Amazon Cognitoを使ったユーザー管理

2-1. Amazon Cognito ユーザープールを作成

まず、Amazon Cognitoでユーザープールを作成しましょう。 Amazon Cognitoページでユーザープールに入り、新しいユーザープールを作成します。

ユーザープール名にAmplify_siteを入力し、デフォルトで設定をして作成をします。

作成済みのページでプールIDとプールARNを記憶しておきます。

これでユーザープールを作成ができました。

2-2. ユーザープールにアプリケーションを追加

次はユーザープールにアプリケーションを追加します。

アプリクライアントでアプリクライアントを追加で作成します。
アプリクライアント名:amplify-site
クライアントシークレットを生成にチェック解除

作成済みのページでアプリクライアントIDを記憶しておきます。

これでユーザープールにアプリケーション追加を完了しました。

2-3. ウェブサイトのConfig設定をアップデート

これからウェブサイトのConfig設定をアップデートしてみましょう。
ローカルのプロジェクトのamplify/js/config.jsを修正します。

window._config = {
    cognito: {
        userPoolId:  'プールID',
        userPoolClientId:  'アプリクライアントID',
        region:  'レギオン'
    },
    api: {
        invokeUrl:  'プール ARN' 
    }
};

修正して$ git pushします。

2-4. 実装をテスト

今までしたことをテストしてみましょう。 ドメインの/register.html(会員登録ページ)に移動します。

ここから会員登録を2つの方法に分けて説明します。
1) emailを利用する方法
-1. メールとパスワードを入力する。
ここでメールは実際に使えることを使用する。

-2. 入力したメールを確認してみるとメールが来てます。

-3. メールコードを/verify.htmlページに入力します。
こうすると会員登録ができます。

2) Amazon Cognitoを利用する方法
-1. まず、メールとパスワードを入力する。
ここでメールは実際に使ってない偽物でも大丈夫です。
メール名:fakeEmail@ggmail.com

-2. Amazon Cognitoの上で作ったユーザープールの[ユーザーとグルプ]ページに移動します。
今まで会員登録しようとしたユーザーの情報を確認できます。

-3. 許可するIDに入り、ユーザーの確認をクリックします。

こうするとアカウントのステータスが変更されているのが確認できます。

最後にログインしてみると成功的にログインできました。

3. まとめ

今回はAmazon Cognitoを使ってユーザー管理をしてみました。
次のブログではAWS LambdaとAmazon DynamoDBを利用してバックエンドを作ってみましょう。