Google reCAPTCHAの設定/ amplifyのauthの設定

Google reCAPTCHA

reCAPTCHA設定

https://www.google.com/recaptcha/intro/v3.html

画面上部の中央にある「Admin console」をクリックします。

amplifyに認証設定する

amplify add authのコマンドを実行し下記の選択を行う

$ amplify add auth
Using service: Cognito, provided by: awscloudformation
 Do you want to use the default authentication and security configuration? [Default configuration]

 How do you want users to be able to sign in? [Email]

 Do you want to configure advanced settings? [Yes, I want to make some additional changes.]

※default以外に登録に必要な属性は何ですか？→誕生日、性別などを追加指定しました。
 What attributes are required for signing up? [Birthdate (This attribute is not supported by Login With Amazon, Signinwithapple.), Email, Gender (This attribute is not s
upported by Login With Amazon, Signinwithapple.), Nickname (This attribute is not supported by Facebook, Google, Login With Amazon, Signinwithapple.), Updated At (This
attribute is not supported by Google, Login With Amazon, Signinwithapple.)]

※ 以下の機能のいずれかを有効にしますか？　→「Google reCaptcha」を追加する
 Do you want to enable any of the following capabilities? [Add Google reCaptcha Challenge]

Do you want to edit your captcha-define-challenge function now? [Yes]
/<app_root>/amplify/backend/function/winlogic1d56dd94DefineAuthChallenge/src/captcha-define-challenge.js

? Do you want to edit your captcha-create-challenge function now? No
✔ Enter the Google reCaptcha secret key: ·[google reCAPTCHAで取得したシークレットキーを指定する]

? Do you want to edit your captcha-verify function now? [Yes]
/<app_root>/amplify/backend/function/winlogic1d56dd94VerifyAuthChallengeResponse/src/captcha-verify.js

amplify pushする

• ローカルバックエンドリソースを構築し、クラウドでプロビジョニングします

amplify　サインアップサンプル

• ボタンを押すと、固定のユーザーとなりますが、amplifyのsignUpメソッドを実行するサンプルとなります。

import { Amplify, Auth } from 'aws-amplify';
import awsExports from '../src/aws-exports';
Amplify.configure(awsExports);

import styles from '../styles/Home.module.css';

async function signUp() {
  try {
   // 更新日付を取得
    const date = new Date();
    const unixtimeUpdatedAt = date.getTime() ;

    const { user } = await Auth.signUp({
            username: "＜your email＞",
            password: '＜your password＞',
            attributes: {
              email: "＜your email＞",
              gender: 'm',
              nickname: 'hogehoge',
              birthdate: '＜your birthdate＞',
              updated_at: unixtimeUpdatedAt.toString()
            }
        });
        console.log(user);
    } catch (error) {
        console.log('error signing up:', error);
    }
}

export default function signingUp() {
  return (
    <div className={styles.container}>
      <main className={styles.main}>
        <button onClick={signUp} className="shadow bg-teal-400 hover:bg-teal-400 focus:shadow-outline focus:outline-none text-white font-bold py-2 px-4 rounded" type="button">
          Signing Up!!
        </button>
      </main>
    </div>
  );
}

次回

• フォームからユーザーを登録できるようにする。またGoogle reCAPTCHAを導入にチャレンジジョイしてみます。