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

2021.07.15

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

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

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

アジェンダ

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

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します。