Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

Auth0 を用いてVue.js/Python(fastAPI)で書かれたSPAに認証機能をつける

kohge4
November 20, 2019

Auth0 を用いてVue.js/Python(fastAPI)で書かれたSPAに認証機能をつける

ハンズオン形式でSPAに認証機能を実装していきつつ、Auth0で使われている技術について簡単に説明しています。フロントにログイン機能を追加した後に、RBACを用いてバックエンドAPIへのアクセスを制限する実装を行います。

※追記
インターン先の技術ブログも書かせていただきました
https://tech.jxpress.net/entry/2019/12/05/161941

kohge4

November 20, 2019
Tweet

Other Decks in Programming

Transcript

  1. 今回やること 1. フロントエンド: Vue, バックエンド: Python(fastAPI) でできたアプリケーションにログイン機能を追加する 2. ユーザーによってアクセスできるページを制限したい (例)

    指定された人のみが管理ページにアクセスできる Auth0がホストしているログイン画面から (ログ イン画面について https://auth0.com/docs/login)
  2. 目次 1. Vue.js にSPA用のログイン機能を実装する方法 1.1 Auth0 ダッシュボードで必要な設定 1.2 Vueプロジェクトに追加するコード 2.

    ユーザーのAPIへのアクセスを制限 2.1 Auth0 ダッシュボードで必要な設定 2.2 Python(fastAPI)プロジェクトに追加したコード
  3. フロント側のログイン処理の流れ 1. ユーザーがログインボタンをクリックすると SDKがユーザーをAuth0承認サー バーにリダイ レクトし,IDトークンを要求する 2. ユーザーは  最初に設定したサインイン方法 (username/password

    またはsocial account(Google,twitter等)) を 使用して auth0 で認証される 3. 認証が成功したらユーザーの IDトークンを返す IDトークンとは? Auth0の認証で使用されているトークンの呼び名 ,形 式はJWTトークン https://auth0.com/docs/tokens/id-tokens
  4. 1.1 Auth0 ダッシュボードで必要な設定 設定項目について ・Allowed Web Origin ・CORS ・Allowed Call

    Back URLs ・Allowed Login, Logout URLs 1 Vue.jsにSPA用のログイン機能を実装
  5. 1.2 Vueプロジェクトに追加するコード 1 Vue.jsにSPA用のログイン機能を実装 コンテンツ表示前に自動的にログインフォームのポップアップが 出るようにしている。 (無くてもいい) ダッシュボードの設定に基づいて記述。この値を index.jsに渡して使用 auth0-spa-jsSDK

    から ログインに必要な機能を用意し、 auth0のダッシュボード で設定した内容に基づいて処理を行う。 (ログインポップアップ表示機能、リダイ レクト先の指定、jwtトークンのGET 等) (今回は公式ドキュメントのチュートリアルのコードのみで済んだ ) 参考: 公式チュートリアル https://auth0.com/docs/quickstart/spa/vuejs/01-login Vue.use() でauth/index.jsの内容を追加
  6. 1.2 Vueプロジェクトに追加するコード 1 Vue.jsにSPA用のログイン機能を実装 例1 APIへリクエストを送る場面 JWTトークンを入手して、 HeaderにJWTを入れ てGETリクエスト 例2

    ログイン、ログアウト時 ダッシュボードで設定した項目に基づいてリダ イレクト。 参考 getTokenSilently 304~388行 https://github.com/auth0/auth0-spa-js/blob/ma ster/src/Auth0Client.ts Index.jsを $auth プロパティに登録して Vueコンポーネント内で任意のログイン機能をいつでも使える Vueコンポーネント内で どう使うか
  7. はじめに ~API認証の流れ~ 2 ユーザーのAPIへのアクセスを制限 まず、Auth0ではAPI に関する認証を行う際、 APIs を設定する必要がある Q. ログイン機能を追加する際、設定した

    Applications との違いは? A. APIs はApplicationの外部リソースという位置付け API側に、Application から受け取ったJWTトークンを検証 するコードを加えることで、 APIへの制御を行うことができ る JWTの検証!!
  8. はじめに ~そもそもJWTの検証とは~ 2 ユーザーのAPIへのアクセスを制限 そもそもJWTの検証とは?? 1. JWTが整形式である事の確認 2.JWTの電子署名の確認 3.標準クレームの確認 4.権限の確認 参考:

    JWTとは: https://auth0.com/docs/tokens/reference/jwt/jwt-structure IDトークンについて :https://auth0.com/docs/tokens/id-tokens JWTの検証について詳細 :https://auth0.com/docs/tokens/guides/jwt/validate-jwt JWTの電子署名について :https://dev.classmethod.jp/server-side/json-signing-jws-jwt-usecase/ Auth0 JWTに秘密鍵で署名 (ログインに必要な JWTは秘密鍵を持って いるauth0しか作れない ) クライアント 署名が適切か公開鍵 (jwk)で検証 (発行者がauth0かとか書き換えられていないかとか ) (公開鍵なので検証は誰でも行うことができる ) JWTの形式のルールがある JWTの書き換えがされてないか トークンの有効期限 (exp), トークン発行者の確認 (iss) 電子署名 署名アルゴリズム: RS256 APIs定義時に設定可能 RS256: 非対称アルゴリズム 署名の生成と検証に異なる鍵 HS256: 対称アルゴリズム 署名の生成も検証も同じ鍵 JWTとは ヘッダ-,ペイロード,署名の三つからな る Base64urlエンコード文字列がドット で三つに区切られている 署名済みJWT
  9. 2.2 Python(fastAPI)プロジェクトに追加したコード 2 ユーザーのAPIへのアクセスを制限 受け取ったJWT ,jwk , permissions から適切かど うか検証する。

    permissionsの検証 公開鍵(jwk)の取得 クライアントから送られた JWTトークンを取得 JWTを検証するクラスの概要