AWS Amplifyを使ってサインインを実装する-2

Authenticationを利用してサインアップを実装していきます。
前回のAWS Amplifyを使ってサインインを実装する-1 に追加していきます。

環境等

項目 バージョン
node v10.15.3
npm 6.4.1
@aws-amplify/cli 1.6.11
aws-amplify 1.1.28
aws-amplify-vue 0.2.11
vuesax 3.8.65
material-icons 0.3.1

実装

コードは最後にまとめて記載しています。

Sign up

views/Signup.vueを作成します。
Auth.signUpを利用して、Sign upを行います。

Sign upを行うと、検証コードが記入したメールアドレスに送信されます。
検証コードによる確認のため、views/ConfirmSignup.vueに遷移するようにしています。

検証コードによる確認

views/ConfirmSignup.vueを作成します。
Auth.confirmSignUpを利用して、検証コードによる登録確認を行います。

登録確認が完了すると、views/Signin.vueに遷移するようにしています。

ルート定義の追加と認証済みチェック

router.jsを修正します。
上記で追加したページへの遷移と、認証済みである事を要求するページとして、views/About.vueを指定しています。
これは、vue cliで作成されたものですので、記載しません。

認証済みチェックには、Auth.currentAuthenticatedUserを利用しています。

Sign upへのリンク追加

App.vueを修正し、リンクを生成します。

Sign upリンクを追加しています。

Sign in後の遷移

Signup.vueはSign inが完了すると、abaout.vueに遷移するようにしています。

コード

スポンサーリンク
  • このエントリーをはてなブックマークに追加
スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA