AWS CognitoユーザPoolの作成とSignupの実装

ユーザPoolの作成

CloudFormationのtemplate.yamlとして記述しました。

cognito-template.yaml

Resources:
  UserPool:
    Type: 'AWS::Cognito::UserPool'
    Properties:
      Schema:
        - Name: 'email'
          StringAttributeConstraints:
            MinLength: '0'
            MaxLength: '2048'
          Required: true
          AttributeDataType: 'String'
          Mutable: true
      AliasAttributes: ['email']
      AutoVerifiedAttributes: ['email']
      EmailVerificationSubject: 'Your verivication code'
      EmailVerificationMessage: 'Your confirmation code is {####}.'
      MfaConfiguration: 'OFF'
      UserPoolName:
        Ref: AWS::StackName
      Policies:
        PasswordPolicy:
          RequireLowercase: false
          RequireSymbols: false
          RequireNumbers: false
          MinimumLength: 6
          RequireUppercase: false
  UserPoolClient:
    Type: "AWS::Cognito::UserPoolClient"
    Properties:
      ClientName: 'your-app-name'
      GenerateSecret: false
      UserPoolId: !Ref UserPool
Outputs:
  UserPoolId:
    Value: !Ref UserPool
  UserPoolClientId:
    Value: !Ref UserPoolClient

認証要素はデフォルトでusername(twitterでいうところの@マークID)とpassword。多分、usernameは外せない？ので、emailのみを認証要素に使いたい場合はusernameにemailの入力を案内して、cognitoにemail値を送信すればよい。

上記の例では、usernameoremailで認証可能とし、emailはAliasAttributes: ['email']でusernameの代替として使用できるよう設定しています。

AutoVerifiedAttributes: ['email']はメールの受信確認を行う。ユーザはEmailVerificationMessageに記載されている{####}内に埋め込まれた数値を確認し、入力することでsignupを完了させる。

UserPoolClientはCognitoを使用するアプリケーションを登録する設定。アプリケーションは払い出されたUserPoolClientIDを使用してCognitoにアクセスする。

CloudFormationでCognitoユーザプールを作成

Cognito ユーザPoolの作成

$ aws cloudformation create-stack --stack-name your-user-pool-name \
--region ap-northeast-1 --template-body file://cognito-template.yaml

UserPoolClientIDとUserPoolIDの確認

$ aws cloudformation describe-stacks --stack-name your-user-pool-name --region ap-northeast-1

Signupの実装

JavaScriptからの実装例を記述します。

依存ライブラリのインストール

AWS & Cognito SDKのインストール

$ npm install aws-sdk --save
$ npm install amazon-cognito-identity-js --save

Signupの処理記述

import {
  CognitoUserPool, CognitoUserAttribute, CognitoUser
} from 'amazon-cognito-identity-js'

export default {
  singup: function (username, email, password) {
    var poolData = {
      UserPoolId: yourUserPoolID,
      ClientId: UserPoolClientID
    }

    var userPool = new CognitoUserPool(poolData)
    var attributeList = []
    var dataEmail = {
      Name: 'email',
      Value: email
    }

    var attributeEmail = new CognitoUserAttribute(dataEmail)
    attributeList.push(attributeEmail)
    return new Promise((resolve, reject) => {
      userPool.signUp(username, password, attributeList, null, function (err, result) {
        if (err) {
          console.log(err)
          reject(err)
        } else {
          console.log('username is ' + result.user.getUsername())
          resolve(result)
        }
      })
    })
  }
}

singupメソッドの各引数に入力されたusername,email,passwordを渡して呼び出せばよい。

あとは呼び出し元で、Promiseに対するresolve、reject時のコールバックを記述すればよい。

この時点でEmail未確認のユーザPoolレコードが作成されます。

また、userPool.signUpが成功すれば、入力email宛てにAWSから自動でメール送信が行われます。

Emailの存在確認

Emailに記述された認証コードの確認をします。

import {
  CognitoUserPool, CognitoUserAttribute, CognitoUser
} from 'amazon-cognito-identity-js'

export default {
  singup: function (username, email, password) {
     //...略
  },

  confirm: function (username, confirmation_number) {
    var _this = this
    var poolData = {
      UserPoolId: yourUserPoolId,
      ClientId: yourUserPoolClientId
    }
    var userPool = new CognitoUserPool(poolData)
    var userData = {
      Username: username,
      Pool: userPool
    }
    var cognitoUser = new CognitoUser(userData)
    return new Promise((resolve, reject) => {
      cognitoUser.confirmRegistration(confirmation_number, true, function (err, result) {
        if (err) {
          console.log(err)
          reject(err)
        } else {
          console.log('call result: ' + result)
          resolve(result)
        }
      })
    })
  }
}

引数confirmation_numberにユーザが入力した確認用数値列を渡せばよい。

cognitoUser.confirmRegistrationが成功すると対象のユーザPoolレコードがEメール確認済み CONFIRMEDとなります。

リンク

追憶行