🦔

Auth0でログイン画面を構築する

2023/02/14に公開

概要

UdacityのFull Stack Web Developer講座のまとめである。詳しく学びたい人は、下記講座を受けること。
https://www.udacity.com/course/full-stack-web-developer-nanodegree--nd0044
今回はAuth ServiceとFrontendの連携部分を構築する。

  • フロントエンドへアクセスすると、ログイン画面へ誘導される。
  • ログイン操作を実行すると、そのログインの成功/失敗結果がtokenと一緒に返される。
  • ログイン操作が成功すると、メイン画面へ遷移する。
  • メイン画面へ遷移する際は、tokenと一緒に情報を送ることで、そのユーザがどういった情報に対して権限があるかを判定し画面表示する。(例:ショッピングサイトにおいて、一般ユーザは商品閲覧しかできないが、管理ユーザは商品編集ができる等)

ApplicationおよびAPIの準備

Applicationの設定

  1. Auth0でアカウント作成する
  2. アプリケーションを作成する。(*今回はImageServiceでRegular Web Applicationsを作成する)
  3. 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を調べる
https://learn.udacity.com/nanodegrees/nd0044/parts/cd0039/lessons/d266ef96-8da1-4dc0-b5b1-d6c3e4af9923/concepts/cb376f28-7abb-4a1f-8878-506754e1c714

Discussion