前回は、Amazon Cognito のユーザープールを作成しました。

今回は、Amazon Cognito を AWS Amplify を使わずに連携し、Emal とパスワードを登録します。

テスト用のフォームを React で簡単に作成しました。

image2

まずは、amazon-cognito-identity-js をインストールします。

ターミナルで、npm install --save amazon-cognito-identity-jsを実行します。

amazon-cognito-identity-jsをインポートしましょう。

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

poolDataを作ります。

const poolData = {
  UserPoolId: "*****",
  ClientId: "*****",
}

UserPoolIdには、Cognito のユーザープール名横に記載されている、ユーザープール ID を指定します。

image3

また、ClientIdは、ユーザープールの『アプリケーションの統合』を選択し、一番下に書かれているクライアント ID を指定します。

image4

image5

次は、userPool を作成し、AmazonCognitoIdentityCognitoUserPoolを設定します。

const userPool = new AmazonCognitoIdentity.CognitoUserPool(poolData)

空のattributeListを設定します。

const attributeList = []

useStateを使って、emailpasswordの状態を管理しましょう。

const [auth, setAuth] = useState({ email: "", password: "" })

dataEmailを設定します。

const dataEmail = {
  Name: "email",
  Value: auth.email,
}

attributeEmailを設定し、attributeListpushするよう設定します。

const attributeEmail = new AmazonCognitoIdentity.CognitoUserAttribute(dataEmail)
attributeList.push(attributeEmail)

handleSubmitの中に、userPoolsignUpを設定します。

第一引数と第二引数は、それぞれ、auth.emailauth.passwordを指定します。

userPool.signUp(
  auth.email,
  auth.password,
  attributeList,
  null,
  function (err, result) {
    if (err) {
      console.log(err.message || JSON.stringify(err))
      return
    }
    var cognitoUser = result.user
    console.log("Email is " + cognitoUser.getUsername())
  }
)

一通り完成したので、テストしましょう。

image6

『送信』をクリックし、console.log を確認すると、

image7

無事、登録できているようです。

Cognito で確認すると、

image8

先程送信した、Email が登録されていました。

全文は、以下の通りです。

import React, { useState } from "react"
import * as AmazonCognitoIdentity from "amazon-cognito-identity-js"

const SignUp = () => {
  const [auth, setAuth] = useState({ email: "", password: "" })

  const poolData = {
    UserPoolId: "*****",
    ClientId: "*****",
  }

  const userPool = new AmazonCognitoIdentity.CognitoUserPool(poolData)

  const attributeList = []

  const dataEmail = {
    Name: "email",
    Value: auth.email,
  }

  const attributeEmail = new AmazonCognitoIdentity.CognitoUserAttribute(
    dataEmail
  )
  attributeList.push(attributeEmail)

  const handleChange = e => {
    const newAuth = { ...auth }
    newAuth[e.target.id] = e.target.value
    setAuth(newAuth)
  }

  const handleSubmit = e => {
    e.preventDefault()

    userPool.signUp(
      auth.email,
      auth.password,
      attributeList,
      null,
      function (err, result) {
        if (err) {
          console.log(err.message || JSON.stringify(err))
          return
        }
        var cognitoUser = result.user
        console.log("Email is " + cognitoUser.getUsername())
      }
    )
  }

  return (
    <div>
      <form onSubmit={e => handleSubmit(e)}>
        <label>
          メールアドレス: 
          <input
            type="email"
            id="email"
            value={auth.email}
            onChange={e => handleChange(e)}
          />
        </label>
        <br />
        <label>
          パスワード  : 
          <input
            type="password"
            id="password"
            value={auth.password}
            onChange={e => handleChange(e)}
          />
        </label>
        <div>
          <button type="submit">送信</button>
        </div>
      </form>
      <br />
      <form onSubmit={e => handleSubmit(e)}>
        <label>
          メールアドレス: 
          <input
            type="email"
            id="email"
            value={auth.email}
            onChange={e => handleChange(e)}
          />
        </label>
        <br />
        <label>
          パスワード  : 
          <input
            type="password"
            id="password"
            value={auth.password}
            onChange={e => handleChange(e)}
          />
        </label>
        <div>
          <button type="submit">送信</button>
        </div>
      </form>
      <br />
    </div>
  )
}

export default SignUp

次回は、Amazon Cognito から送られてきた確認コードを確認済みにします。

ブログ一覧