CloudFront + S3 + Cognito to create a sign-in screen

CloudFront + S3 + Cognito to create a sign-in screen

We have confirmed the CloudFront + S3 configuration in “How to create a React SPA with CloudFront + S3“. This time, we would like to add a sign-in screen with Cognito.

The sign-in screen can be realized by creating a user pool in AWS Cognito.

Create a user pool

CloudFront + S3 + Cognitoでサインイン画面を作成する

Click on “Create User Pool.”

CloudFront + S3 + Cognitoでサインイン画面を作成する

Click on “Follow the Steps to Setup.”

CloudFront + S3 + Cognitoでサインイン画面を作成する

Make sure you sign in with your “username.”

CloudFront + S3 + Cognitoでサインイン画面を作成する

Check “email” for the standard attribute. Click “Next Step.”

CloudFront + S3 + Cognitoでサインイン画面を作成する

Leave the password strength as default and click “Next Step”.

CloudFront + S3 + Cognitoでサインイン画面を作成する

Disable multi-factor authentication (MFA). Click “Next Step” without creating a new role name.

CloudFront + S3 + Cognitoでサインイン画面を作成する

For “Verification Type,” select “Code. Click “Next Step.

CloudFront + S3 + Cognitoでサインイン画面を作成する

Click on “Next Steps.”

CloudFront + S3 + Cognitoでサインイン画面を作成する

Click on “Next Steps.”

CloudFront + S3 + Cognitoでサインイン画面を作成する

Enter an appropriate name in the “App Client Name” field.

Uncheck “Create Client Secret.

Click “Create App Client.

CloudFront + S3 + Cognitoでサインイン画面を作成する

Click on “Next Steps.”

CloudFront + S3 + Cognitoでサインイン画面を作成する

Click on “Next Steps.”

CloudFront + S3 + Cognitoでサインイン画面を作成する

Click on “Create Pool.”

CloudFront + S3 + Cognitoでサインイン画面を作成する

Note down the “Pool ID” as it will be used later. This completes the creation of the user pool.

Create an identity pool with federated identities

Next, create an ID pool.

CloudFront + S3 + Cognitoでサインイン画面を作成する

Here, the ID pool name is “my_app_name”.

CloudFront + S3 + Cognitoでサインイン画面を作成する

The authentication provider is “Cognito” and the user pool ID and application client ID are entered. *These are displayed when the user pool is created.

Click “Create Pool.”

CloudFront + S3 + Cognitoでサインイン画面を作成する

Click “Allow.” This completes the creation of the ID pool.

CloudFront + S3 + Cognitoでサインイン画面を作成する

Sample code will be displayed, this time JS sample code. Copy this and use it on the sign-in screen.

Create a sign-in screen

index.html and js are placed in S3.

In this case, they will be placed on the web server for convenience.

Required Libraries

  • aws-cognito-sdk.js
  • amazon-cognito-identity.js
  • aws-sdk.js

Download “amazon-cognito-identity-js“, in which aws-cognito-sdk.js is stored.

Download “aws-amplify“, in which amazon-cognito identity.js is stored.

Download the AWS SDK from Federated Identity in the AWS Management Console.

The awk-sdk.js is stored in this file.

Creating a user

CloudFront + S3 + Cognitoでサインイン画面を作成する

I can create a user from the user pool, but the status is “FORCE_CHANGE_PASSWORD”.

In this state, we need to create a sign-up screen and change the status to “CONFIRMED”, so we can create the user from the AWS CLI command.

$ aws cognito-idp sign-up --client-id <作成したClientId> --username user01 --password 00000000 --user-attributes
$ aws cognito-idp admin-confirm-sign-up --user-pool-id <作成したPoolId> --username user01

You can now confirm Cognito integration only on the sign-in screen.

コメント

Discover more from 株式会社CONFRAGE ITソリューション事業部

Subscribe now to keep reading and get access to the full archive.

Continue reading

Copied title and URL