Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

6c5a0545dbc0441305808b4f8bf277d2?s=47 kohge4
November 20, 2019

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

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

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

6c5a0545dbc0441305808b4f8bf277d2?s=128

kohge4

November 20, 2019
Tweet

Transcript

  1. Auth0/ Vue.js/Python SPA に認証機能をつけて、APIへのアクセス制限まで行う

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

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

    ユーザーのAPIへのアクセスを制限 2.1 Auth0 ダッシュボードで必要な設定 2.2 Python(fastAPI)プロジェクトに追加したコード
  4. はじめに ・Auth0 ダッシュボードに登録した内容に応じて、簡単にapplicationにログイン機能 を実装することができる ・Auth0 は専用ライブラリやSDKが多数存在し、目的に応じてそれを利用することで 簡単にログイン機能を実装することができる。 https://auth0.com/docs/libraries ・今回はauth0-spa-js というライブラリを使用した

    https://auth0.com/docs/libraries/auth0-spa-js
  5. フロント側のログイン処理の流れ 1. ユーザーがログインボタンをクリックすると SDKがユーザーをAuth0承認サー バーにリダイ レクトし,IDトークンを要求する 2. ユーザーは  最初に設定したサインイン方法 (username/password

    またはsocial account(Google,twitter等)) を 使用して auth0 で認証される 3. 認証が成功したらユーザーの IDトークンを返す IDトークンとは? Auth0の認証で使用されているトークンの呼び名 ,形 式はJWTトークン https://auth0.com/docs/tokens/id-tokens
  6. 1.1 Auth0 ダッシュボードで必要な設定 1 Vue.jsにSPA用のログイン機能を実装

  7. 1.1 Auth0 ダッシュボードで必要な設定 1 Vue.jsにSPA用のログイン機能を実装 ログイン後のリダイレクト先や CORSの設定を行う

  8. 1.1 Auth0 ダッシュボードで必要な設定 設定項目について ・Allowed Web Origin ・CORS ・Allowed Call

    Back URLs ・Allowed Login, Logout URLs 1 Vue.jsにSPA用のログイン機能を実装
  9. 1.2 Vueプロジェクトに追加するコード 1 Vue.jsにSPA用のログイン機能を実装 インストールするもの 参考: https://github.com/auth0/auth0-spa-js

  10. 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の内容を追加
  11. 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コンポーネント内で どう使うか
  12. ここまででできること 1 Vue.jsにSPA用のログイン機能を実装 authGuard のおかげでクリッ クしたら即ポップアップ表示 ログインした人に 応じた情報を表示

  13. はじめに ~API認証の流れ~ 2 ユーザーのAPIへのアクセスを制限 まず、Auth0ではAPI に関する認証を行う際、 APIs を設定する必要がある Q. ログイン機能を追加する際、設定した

    Applications との違いは? A. APIs はApplicationの外部リソースという位置付け API側に、Application から受け取ったJWTトークンを検証 するコードを加えることで、 APIへの制御を行うことができ る JWTの検証!!
  14. はじめに ~そもそも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
  15. はじめに ~APIへのアクセスを制限~ 2 ユーザーのAPIへのアクセスを制限 ユーザーのアクセスを “permissions”, “role” のいずれかを用いて制限できる (今回は”permissionsで制御”) ユーザー側の設定

    APIs側の設定 read:api
  16. 2.1 Auth0 ダッシュボードで必要な設定 2 ユーザーのAPIへのアクセスを制限 APIの定義 署名アルゴリズム: 電子署名の形式を選択可能 識別子(なんでもいい) Vue側のauth_config.jsonに追加する

    {.... “audience”: IDENTIFERNAME}
  17. 2.1 Auth0 ダッシュボードで必要な設定 2 ユーザーのAPIへのアクセスを制限 APIでRBACを利用するためにONにする APIにpermissionsを定義し,Userに permissionsを持たせる RBAC: Role

    Based Access Controll 権限に応じてアクセスを制限できる https://auth0.com/docs/authorization/concepts/rbac
  18. 2.1 Auth0 ダッシュボードで必要な設定(Vue側の変更) 2 ユーザーのAPIへのアクセスを制限 その他, auth_config.json を使用している箇所に追加した (二箇所くらい index.js,

    main,js) auth_config.json ….”audience”の項目に定義したAPIsの識別子を追加
  19. 2.2 Python(fastAPI)プロジェクトに追加したコード 2 ユーザーのAPIへのアクセスを制限 fastAPI ではdependencies=[Depends(関数)] とす ることでAPIを呼ぶ前に処理を追加できる フロントからのRequestを クラス 

    JWTBearer に通してJWTの検証をする fastAPIでJWTの検証をどう行ったか
  20. 2.2 Python(fastAPI)プロジェクトに追加したコード 2 ユーザーのAPIへのアクセスを制限 受け取ったJWT ,jwk , permissions から適切かど うか検証する。

    permissionsの検証 公開鍵(jwk)の取得 クライアントから送られた JWTトークンを取得 JWTを検証するクラスの概要
  21. 2.2 Python(fastAPI)プロジェクトに追加したコード 2 ユーザーのAPIへのアクセスを制限 Auth0 のAPIを叩きjwk を 取得している (jwkについて https://auth0.com/docs/tokens/guides/jwt/use-jwks)

    jwkの中身 JWKについて
  22. 2.2 Python(fastAPI)プロジェクトに追加したコード 2 ユーザーのAPIへのアクセスを制限 フロントから送られてきた JWTトークンを変数 へ JWTはこんな感じ 参考:このサイトでJWTの中身を読むことができる https://jwt.io/

    JWTについて
  23. 2.2 Python(fastAPI)プロジェクトに追加したコード 2 ユーザーのAPIへのアクセスを制限 適切なpermissionsがなければ 403 FOBIDDENを返している ⇒ ユーザーの制御が可能に permissionsについて

  24. 2.2 Python(fastAPI)プロジェクトに追加したコード 2 ユーザーのAPIへのアクセスを制限 Jwtのdecode に joseというライブラリ を用いた JWTとjwk(公開鍵)を比較しJWT が適切なものか検証している

    検証用ライブラリ
  25. 2.2 Python(fastAPI)プロジェクトに追加したコード 2 ユーザーのAPIへのアクセスを制限 結果 有 無

  26. わからなかったこと,できていないこと Applications の設定だけで、RBACも可能な気がするが ,できていない auth0-spa-js (SPAの認証機能専用のSDK)が便利だったが中 身のコードの内容がよくわからなかった