🦔
Auth0でログイン画面を構築する
概要
UdacityのFull Stack Web Developer講座のまとめである。詳しく学びたい人は、下記講座を受けること。 今回はAuth ServiceとFrontendの連携部分を構築する。
- フロントエンドへアクセスすると、ログイン画面へ誘導される。
- ログイン操作を実行すると、そのログインの成功/失敗結果がtokenと一緒に返される。
- ログイン操作が成功すると、メイン画面へ遷移する。
- メイン画面へ遷移する際は、tokenと一緒に情報を送ることで、そのユーザがどういった情報に対して権限があるかを判定し画面表示する。（例：ショッピングサイトにおいて、一般ユーザは商品閲覧しかできないが、管理ユーザは商品編集ができる等）
ApplicationおよびAPIの準備
Applicationの設定
- Auth0でアカウント作成する
- アプリケーションを作成する。（＊今回はImageServiceでRegular Web Applicationsを作成する）
- Applicationsの設定ページで、下記設定を行う
4. Allowed Callback URLs: localhost:8080/login-results
5. Application Login URI: https://127.0.0.1:8080/login
6. Application Logout URLs: http://localhost:8080/logout
「2.」の作業
「3.」〜「6.」の作業
Application内のAPI設定
「1.」〜「6.」によりアプリケーションの設定が完了。次にApplication内で使用するAPIを作成する。
- Create APIをクリックする。
- 添付画像に記載の下記内容を設定する。
Auth0認証を使用しログインする
下記urlをブラウザに貼り付けると、ログインページが表示される。
https://{{YOUR_DOMAIN}}/authorize?audience={{API_IDENTIFIER}}&response_type=token&client_id={{YOUR_CLIENT_ID}}&redirect_uri={{YOUR_CALLBACK_URI}}
下記内容を入力することで、Auth0のログインページが表示される。
- YOUR_DOMAIN
- API_IDENTIFIER
- YOUR_CLIENT_ID
- YOUR_CALLBACK_URI
その後、ログインをするとtokenが表示される。（＊この場合は、まだlocalhostのlogin-resultsページを設定していないため、ページが表示されていない。）
取得したtokenをJWT.ioのDebuggerページに貼り付けると、tokenの詳細が確認できる。
認証方法について
Auth0のConnectionsページへいくと、Google / Facebook / Microsoftといった認証方法を選択できる。
ToDo：次に向けて
セッション, JWT, statelessを調べる
Discussion