AWS AmplifyのAuthenticatorでのSignUp時にPhone Numberを非表示にしたい

3403 ワード
Vue.js cognito AWS amplify AWS テキストリンク

やりたいこと

  • AmplifyAuthenticatorコンポーネントからのSignUp時、
    • EメールアドレスをUser名として利用したい
    • 電話番号フィールドを非表示にしたい

デフォルトではこのようになっている。

やること

  • formFieldsでSign Upフォームに表示するカラムを指定する
  • username-alias にてEメールアドレスを usernameとして登録できるようにする
    • (注意事項) amplify add auth時にEメールでの登録を有効にしておく必要がある

最終的なコードは以下のとおり。

<template>
  <amplify-authenticator>
    <amplify-sign-out></amplify-sign-out>
    <amplify-sign-up
      slot="sign-up"
      username-alias="email"
      :form-fields.prop="formFields"
    ></amplify-sign-up>
  </amplify-authenticator>
</template>

<script>
export default {
  name: 'Auth',
  data() {
    return {
      formFields: [
        { type: "email" },
        { type: "password" },
      ]
    }
  }
}
</script>

参考

ここにまとめたものは公式ドキュメントの以下のページにて解説されています。

Authenticate with email or phone number

Hiding form fields