AWS

【AWS】フロントエンドで送信したデータをAmazon Cognitoに登録する

作成日：2022年01月29日

更新日：2022年01月30日

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

【AWS】Amazon Cognitoのユーザープールを作成する

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

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

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

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

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

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

poolDataを作ります。

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

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

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

次は、userPool を作成し、AmazonCognitoIdentityのCognitoUserPoolを設定します。

jsx
const userPool = new AmazonCognitoIdentity.CognitoUserPool(poolData);

空のattributeListを設定します。

jsx
const attributeList = [];

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

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

dataEmailを設定します。

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

attributeEmailを設定し、attributeListにpushするよう設定します。

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

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

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

jsx
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());
  }
);

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

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

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

Cognito で確認すると、

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

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

jsx
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;