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

今回はサインインエラーの対応を記載します。
合わせてパスワードを忘れた際のページを作成しています。
Multi-Factor Authentication (MFA)は扱いません。

前回のAWS Amplifyを使ってサインインを実装する-3 に追加していきます。
基本的に、views/Signin.vueを修正します。

環境等

項目 バージョン
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

実装

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

サインインエラー

サインイン時のエラーは以下があります。

エラーコード 説明
UserNotConfirmedException Sign up時のユーザ確認が完了していない
PasswordResetRequiredException Cognitoコンソールでパスワードがリセットされた
NotAuthorizedException 間違ったパスワードが入力された
UserNotFoundException 指定されたユーザ名/メールアドレスがユーザプールに存在しない

Sign up時のユーザ確認が完了していない

Auth.resendSignUpを利用して、再度検証コードを送信します。

そして、ConfirmSignup.vueに遷移し、あとはSign upと同じ流れになります。

Cognitoコンソールでパスワードがリセットされた

Auth.forgotPasswordを利用して、パスワードを忘れた際のリクエストを発行します。
検証コードが発行されるので、そのコードとパスワードを入力させるため、ForgotPassword.vueに遷移させます。(router.jsにルートを追加)

ここでは、email, 検証コード, パスワードを入力してもらい、その内容で登録します。
登録には、Auth.forgotPasswordSubmitを利用します。

パスワードを忘れた際のページができたので、ついでにSign inページにリンクを用意しています。

間違ったパスワード/ユーザプールに存在しない

NotAuthorizedException,UserNotFoundExceptionについては、メッセージを表示するだけで済ませています。
ユーザにそれぞれのエラー詳細を教えることはしていません。

コード

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

コメントをどうぞ

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

CAPTCHA