Zenn
👏

AWS Cognitoのローカル開発

2021/12/24に公開
AWS
Cognito
tech

前提条件

http://localhost:8080で動かせるサーバーがある

書いた事

  • Cognitoユーザープールの作成
  • ローカル開発サーバーとの連携

書いてない事

  • CDKの細かい説明
  • JWT検証
  • ローカル開発サーバー

手順

  • CDKでUserPool作成
  • ブラウザからcognitoにアクセス

CDKでUserPool作成

import {
    App, Stack, StackProps, RemovalPolicy, Tags,
    aws_cognito as cognito,
    aws_ssm as ssm,
} from 'aws-cdk-lib'

export class CognitoUserpoolStack extends Stack {
    constructor(scope: App, id: string, props?: StackProps) {
        super(scope, id, props);

        const project: string = 'myproject'

        const userPool = new cognito.UserPool(this, `${project}-user-pool`, {
            userPoolName: `${project}-user-pool`,
            selfSignUpEnabled: true, // サインアップ有効
            standardAttributes: {
                email: { required: true, mutable: true },
            },
            signInAliases: { email: true },
            accountRecovery: cognito.AccountRecovery.EMAIL_ONLY,
            removalPolicy: RemovalPolicy.DESTROY,
        });
        const domainPrefix = `${project}`
        const userPoolDomain = new cognito.UserPoolDomain(this, "UserPoolDomain", {
            userPool: userPool,
            cognitoDomain: {
                domainPrefix: domainPrefix,
            },
        });
        const userPoolClient = userPool.addClient('client', {
            userPoolClientName: `${project}-${stage}-client`,
            oAuth: {
                scopes: [
		    // クライアントがアクセス可能なユーザー属性情報
                    cognito.OAuthScope.EMAIL,
                    cognito.OAuthScope.OPENID,
                    cognito.OAuthScope.PROFILE,
                ],
                callbackUrls: "http://localhost:8080",
                logoutUrls: "http://localhost:8080/logout",
                flows: {
                    authorizationCodeGrant: true,
                },
            },
            authFlows: {
                adminUserPassword: true,
                userPassword: true
            },
            generateSecret: true,
        });
    }
}

ブラウザからcognitoにアクセス

AWSコンソールから > Cognito > 今回作成したユーザープール > アプリケーションの統合タブ > 「Cognito ドメイン」と「クライアント ID」をコピー

Cognito ドメインは[<domainPrefix>.auth.<region>.amazoncognito.com]となっています

https://<domainPrefix>.auth.<region>.amazoncognito.com/login?
                response_type=code&
                client_id=<クライアント ID>&
                redirect_uri=http://localhost:8080&
                state=STATE&
                scope=openid+profile+email

下の画像のような認証画面が出てきたら、signupをクリックしてユーザーを作成。emailにverification codeがきているので認証

ログインが完了するとhttp://localhost:8080にリダイレクトされます

あとはJWT検証してユーザー情報を取得。ここでは割愛
JWT検証は「使用言語 JWT検証　cognito」で検索すればたくさん出てきますし公式ドキュメントもあります

Discussion