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

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

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

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用のログイン機能を実装 例１ APIへリクエストを送る場面 JWTトークンを入手して、 HeaderにJWTを入れ てGETリクエスト 例２ ログイン、ログアウト時 ダッシュボードで設定した項目に基づいてリダ イレクト。 参考 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)が便利だったが中 身のコードの内容がよくわからなかった