Hosted UI を探究する
Hosted UI とオプションについて調べてみましょう。
ユーザープール画面の「開始方法」の下にユーザープールの設定値に関するタブが表示されています。
タブの中から「アプリケーションの統合」をクリックします。(表示がない場合はタブ欄の右端についている 「>」ボタンを何度かクリックして表示項目を切り替えてください)
表示項目が切り替わったら「アプリケーションクライアントのリスト」>「アプリクライアントと分析」の中から「petstore-client」をクリックします。
画面が切り替わったらページを中段までスクロールし、「ホストされた UI」の「ホストされた UI を表示」ボタンをクリックします。
Hosted UI が表示されます。「Sign up」をクリックし、新規ユーザーを登録しましょう。
表示が切り替わったら「Email」「Password」に任意の値を入力し「Sign up」ボタンをクリックします。
「Sign up」ボタンをクリックすると有効なメールアドレスか確認を行うために、「Email」欄に入力したメールアドレス宛に「Verification Code」が届きます。メールボックスに届いたCodeを確認し、「Verification Code」欄に入力します。
入力が完了したら「Confirm account」をクリックし、アカウントを登録します。
今回のラボではアプリケーションをホストしていないため、コールバックURLとしてlocalhostを設定しました。
「Confirm account」をクリックすると
https\://localhost/?code=c4248548-8691-4547-9e66-06d4b64d64ee (codeの値はそれぞれ異なります)
にリダイレクトされブラウザではエラーが表示されるはずです。
次はImplicit flow sign in に変更した場合の反応を確認してみましょう。ブラウザのタブを切り替えAWSマネジメントコンソールの画面に戻ります。
もう一度「ホストされた UI」の「ホストされた UI を表示」ボタンを右クリックし、リンクアドレスのコピーをしてください。
https://<ユーザープールで設定したドメイン名>.auth.ap-northeast-1.amazoncognito.com/oauth2/authorize?client_id=xxxxx&response_type=code&scope=email+openid+petstore%2Fread+phone+profile&redirect_uri=https%3A%2F%2Flocalhost
テキストエディタにコピーしたリンクを貼り付けます。
https://xxxx.auth.ap-northeast-1.amazoncognito.com ドメインの後ろに /oauth2/authorize? という値があるので /login? に置き換えます。
置き換えたURLをブラウザに貼り付けます。
すると前のセッションからログインされたままの状態となり、「Sign in as a different user?」というリンクが表示されるのでクリックします。
画面が切り替わったら、ブラウザのURLバーを確認してください。URLは以下のような値となっているはずです。
&response_type=code&scope=email+openid+petstore%2Fread+phone+profile&redirect_uri=https%3A%2F%2Flocalhost
URLの中で設定されているresponse_typeは「code」になっているはずなので「token」に変更し、エンターキーを押して新しいURLを読み込みます。
&response_type=token&scope=email+openid+petstore%2Fread+phone+profile&redirect_uri=https%3A%2F%2Flocalhost
すると再度ログイン画面が表示されるので、先程登録したユーザー情報を入力し、「Sign in」をクリックします。
localhostでアプリケーションのホストを行っていないためエラーが表示されるはずです。
ブラウザのURLバーを確認すると以下のような値が表示されているはずです。
https://localhost/#id_token={a-large-id-token}&access_token={a-large-access-token}&expires_in=3600&token_type=Bearer