LoginSignup

This article is a Private article. Only a writer and users who know the URL can access it.
Please change open range to public in publish setting if you want to share this article with other users.

More than 3 years have passed since last update.

Cognitoで出来ることをまとめる(ホストされたUI編)

Last updated at Posted at 2020-12-08

概要

Cogntioで出来ることをまとめる。
のホストされたUI特化のページ。
現時点では商用サイトのサインインページとして使うには時期尚早な感じ。

ホストされたUI

Cognitoの機能として、ある程度の認証周りの機能を持ったページを自動生成することが可能。
便利ではあるが色々と制限事項もあるので注意。

出来る事

  • 認証機能
  • パスワード忘れ対応機能
    (ForgotPassword、ConfirmForgotPasswordを使っている)

認証

認証を行った場合、アプリクライアントの設定で指定したリダイレクト先へ 認証コード or IDトークン がクエリパラメータとして付与された状態で遷移する。

認証コードがIDトークンかはアプリクライアントの設定で設定する。

アクセストークン、更新トークンは取得できないので注意。
※情報更新が必要な場合、CognitoAPIを直接叩くことができないので、用途に応じたAPIを自前で用意する必要がある

パスワード忘れ対応機能

メールアドレスを使って復旧する

MFAそして確認 > ユーザーはどのようにしてアカウントを回復できますか? でメールアドレスが含まれる項目を選択する。

"Forgot your password?" のリンク先の画面にてログインIDを入れることで、紐づけされているメールアドレスへ検証コードが送信されて来る。
検証コードのメールのメッセージは、メッセージのカスタマイズ から可能。

なおこのリンク、ユーザからPW復旧不可※にしても表示され、実行しようとすると画面にエラーが出る。
全般設定 > MFAそして確認 > ユーザーはどのようにしてアカウントを回復できますか?なし にする

メールアドレスが検証済みでない場合、ログインIDを入れると画面に謎のメアド(t***@g***.com)が表示されて怖い。
※実際にはどこにも送信されていないのだと思われるが。。

故に、実戦ではメールアドレスは検証済みであることが前提となる。
ホストされたUIを使う場合、情報変更などする場合、自前のAPIを叩くことになるので(アクセストークンが取得できない)、この辺りはAPIの実装でカバーしていればOKだと思われる

メールアドレス以外(電話番号)を使って復旧する

ここまでメールを使ってパスワード忘れ対応することを前提にしてきたが、実際には、全般設定 > MFAそして確認 > ユーザーはどのようにしてアカウントを回復できますか? での設定により、復旧のための検証コードの送信先に使用する項目、条件の設定が可能(項目的には メール or 電話番号の二択)。
※電話番号を使う設定で認証済みの電話番号になっていない場合、謎の電話番号が表示されるのでやっぱり怖い。

APIのリファレンス

画面スタイル

アプリの統合 > UIのカスタマイズ からスタイルは変更可能(アプリクライアント毎に設定可能)。
ただ、表示されている文言を変えることは出来ないので注意(つまり、日本語にできない)。

制限事項

  • UIのスタイルを変更することは出来るが、表示されている文言を日本語にすることができない
    ※日本人には割と致命的
  • アクセストークンを取得することができない
    ※つまり、CognitoのAPIを直接叩くことができないので、自前でAPIを用意する必要がある
  • パスワード忘れ対応でユーザが入力する項目は サインイン用ID になる(メールアドレスの入力からは不可)
    ※おそらく使用してる API のIF的に無理

TODO

  • ソーシャルログインについて
  • Amplifyから生成された版(こちらからだとsignup等もできる)

別記事

0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up