Help us understand the problem. What is going on with this article?

Amazon Cognito を利用して、会員登録を行う。

はじめに

ここでは、Amazon Cognito を使用して、メールアドレスとパスワードを登録するためのソースコードを書きます。ただし、既にユーザープールを作成し、ユーザープールにアプリを追加ているものとします。

AWS Amplify ライブラリをインストール

Amazon Cognito を使用するには、AWS Amplify ライブラリが必要なのでインストールします。

$ npm install aws-amplify --save

ちなみに 「Amazon Cognito ID SDK for JavaScript」が「AWS Amplify ライブラリ」 の一部になったらしいです。

ソースコードに次の記述を書きます。HTML は省略します。

import * as AmazonCognitoIdentity from "amazon-cognito-identity-js";

export default class UserRegistration {

  // フォームの登録ボタンをクリックした時にこれを呼び出す。
  public registerUser() {

    let poolData = {
      UserPoolId: <ユーザープールのID>,
      ClientId: <アプリクライアントID>
    };
    let userPool = new AmazonCognitoIdentity.CognitoUserPool(poolData);

    let email = {
      Name: "email",
      Value: <ユーザーが入力したメールアドレス>
    };

    let attributeEmail = new AmazonCognitoIdentity.CognitoUserAttribute(
      email
    );

    userPool.signUp(
      <ユーザーが入力したメールアドレス>,
      <ユーザーが入力したパスワード>,
      [attributeEmail],
      [],
      (err, result) => {
        if (!err) {
          // 成功した場合の処理。
        } else {
          // 失敗した場合の処理。
        }
      }
    );
  }
}

ユーザーのメールアドレスとパスワードをフォームから取得して、Cognito に送信します。
 これで、フォームの登録ボタンなどをクリックした時に registerUser() を実行すると、ユーザーが入力したメールアドレスに確認コードが届きます。次は、確認コードを Cognito に送信しなければなりません。
 メールアドレスの確認を行うためのソースコードが以下です。

import * as AmazonCognitoIdentity from "amazon-cognito-identity-js";

export default class EmailVerification {

  public verifyEmail() {

    let poolData = {
      UserPoolId: <ユーザープールのID>,
      ClientId: <アプリクライアントID>
    };
    let userPool = new AmazonCognitoIdentity.CognitoUserPool(poolData);

    this.createCognitoUser(userPool).confirmRegistration(
      <ユーザーが入力した確認コード>,
      true,
      (err, result) => {
        if (!err) {
          // 成功した時の処理。
        } else {
          // 失敗した時の処理。
        }
      }
    );
  }

  private createCognitoUser(userPool) {
    return new AmazonCognitoIdentity.CognitoUser({
      Username: <メールアドレス>,
      Pool: userPool
    });
  }

}

ユーザーが入力した確認コードをフォームから取得し、Cognito に送信しています。

参考資料

以下を参考にしてソースコードを書きました。
https://aws.amazon.com/jp/getting-started/projects/build-serverless-web-app-lambda-apigateway-s3-dynamodb-cognito/module-1/
https://github.com/aws-samples/aws-serverless-workshops/tree/master/WebApplication/1_StaticWebHosting/website

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away