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

今回は、フォームで送信したユーザー情報を、Amazon Cognito でユーザー認証します。

まずは、Login.jsx を作成するために、ユーザー登録時に作成したコードをコピーします。

SignUpLoginへ修正しましょう。

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

const Login = () => {
  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 />
    </div>
  )
}

export default Login

UsernamePasswordを設定する、authenticationDataを作成します。

const authenticationData = {
  Username: auth.email,
  Password: auth.password,
}

AmazonCognitoIdentityAuthenticationDetailsauthenticationDetailsを作成します。

const authenticationDetails = new AmazonCognitoIdentity.AuthenticationDetails(
  authenticationData
)

dataEmailattributeEmailを削除します。

UsernamePoolを設定する、userDataを作成します。

const userData = {
  Username: auth.email,
  Pool: userPool,
}

AmazonCognitoIdentityCognitoUserで、cognitoUserを作成します。

const cognitoUser = new AmazonCognitoIdentity.CognitoUser(userData)

handleSubmit内で、cognitoUserauthenticateUserを使用します。

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

  cognitoUser.authenticateUser(authenticationDetails, {},
  });
};

認証が成功した場合と、失敗した場合を設定します。

失敗した場合は、エラーを返すようにします。

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

  cognitoUser.authenticateUser(authenticationDetails, {
    onSuccess: function (result) {},
    onFailure: function (err) {
      console.log(err.message || JSON.stringify(err))
    },
  })
}

result から、トークンを取得します。

cognitoUser.authenticateUser(authenticationDetails, {
  onSuccess: function (result) {
    const accessToken = result.getAccessToken().getJwtToken();

AWS の SDK を利用するために、ターミナルでnpm install --save aws-sdk を実行し、インストールします。

regionを設定します。

cognitoUser.authenticateUser(authenticationDetails, {
  onSuccess: function (result) {
    const accessToken = result.getAccessToken().getJwtToken();

    AWS.config.region = "ap-northeast-1";

Cognito のフェデレーティッド ID が必要になるので、Amazon Cognito サービスへアクセスします。

ダッシュボードの『フェデレーティッド ID』をクリックします。

image2

ID プール名を入力します。

image3

認証されていない ID にチェックを入れます。

image4

認証プロバイダーをクリックし、Cognito のユーザープール ID とアプリクライアント ID を入力します。

image5

『プールの作成』をクリックします。

image6

『許可』をクリックします。

image7

Amazon Cognito での作業開始画面へ遷移しました。

プラットフォームを JavaScript へ変更します。

IdentityPoolId が必要になるので、値をコピーします。

image8

コードエディタに戻って、CognitoIdentityCredentialsを設定します。

<IdentityPoolId>には、先程コピーした値を貼り付けます。

<リージョン>には、AWS.config.regionの値(ap-northeast-1)を貼り付けます。

<UserPoolId>には、上部に設定したpoolDataUserPoolIdを貼り付けます。

AWS.config.credentials = new AWS.CognitoIdentityCredentials({
  IdentityPoolId: <IdentityPoolId>,
  Logins: {
    "cognito-idp.<リージョン>.amazonaws.com/<UserPoolId>":
      result.getIdToken().getJwtToken(),
  },
});

credentialを更新します。

更新が成功した場合は、トークンを返し、失敗した場合は、エラーを返すようにします。

AWS.config.credentials.refresh(error => {
  if (error) {
    console.log(error)
  } else {
    console.log(accessToken)
  }
})

一通り完成したので、フォームで確認しましょう。

image9

『送信』ボタンをクリックし、Console で確認すると、

image10

トークンが返ってきました。

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

import React, { useState } from "react"
import * as AmazonCognitoIdentity from "amazon-cognito-identity-js"
import AWS from "aws-sdk/global"

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

  const authenticationData = {
    Username: auth.email,
    Password: auth.password,
  }

  const authenticationDetails = new AmazonCognitoIdentity.AuthenticationDetails(
    authenticationData
  )

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

  const userPool = new AmazonCognitoIdentity.CognitoUserPool(poolData)

  const userData = {
    Username: auth.email,
    Pool: userPool,
  }

  const cognitoUser = new AmazonCognitoIdentity.CognitoUser(userData)

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

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

    cognitoUser.authenticateUser(authenticationDetails, {
      onSuccess: function (result) {
        const accessToken = result.getAccessToken().getJwtToken()

        AWS.config.region = "ap-northeast-1"

        AWS.config.credentials = new AWS.CognitoIdentityCredentials({
          IdentityPoolId: "*****",
          Logins: {
            "cognito-idp.ap-northeast-1.amazonaws.com/*****": result
              .getIdToken()
              .getJwtToken(),
          },
        })

        AWS.config.credentials.refresh(error => {
          if (error) {
            console.log(error)
          } else {
            console.log(accessToken)
          }
        })
      },
      onFailure: function (err) {
        console.log(err.message || JSON.stringify(err))
      },
    })
  }

  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 />
    </div>
  )
}

export default Login
ブログ一覧