4.3 トークン管理 ソリスト 4.11 pages/callback. vue く template> く p>Signing in ・ .. く /p> く /template> く script> export default { mounted() { this . $authO. setT0kenByQuery ( ) く /script> ゴ ] Elements Consoie sources Network petformance Application です ( 図 4.7 ) 。 タブ→ Storage → LocaIStorage を確認すると、トークンなどの保存が確認できるはず して /callback まで遷移してください。その後、 Chrome DevTooIs を開いて、 AppIication 動作確認してみましよう。もう一度 http://locaIhost:3333/Iogin からログイン処理を これで、 callback. vue のマウント時に、トークンが保存されるようになります。 AppIication ー Manifest service Workers ・ Clear 引 0 「 age Storage マま三 LocaI Storage 三 h p : 川 oca ぬ 0S1 : 3333 C ① )< Fiiter Key accessToken idToken exp:resAt user Value V5GOvnB30Qa6PuG5ucRDF1 -Z( eyJOeXAiOiJ KVI QiLCJ hbGciOiJ S 15202715 3 {"givemname':"Takahir00. 、ねm日Yー 図 4.7 Chrome DevTools での表示例 4.3.2 トークン取得後のリダイレクト 現在「 Signingin... 」で止まってしまっているので、トークンを保存した後にリダイレ クトするようにします。リダイレクト先はトップページでよいでしよう。 VueRouter の機能を利用して、トップページへリダイレクトさせます。 setToken の直 後に 1 行加えます。 。ーリスト 4.12 pages/callback. vue 35
第 4 章 Nuxt に AuthO を組み込む く /script> く style scoped> #show—auth { margin—top : 20px ; く /style> 4.2.3 CaIIback ページ ソーシャルログイン後のリダイレクトをハンドリングするために、 pages/callback. vue を作成します。後ほど処理を組み込んでいくので、とりあえすサインイン中であることが 分かる表示を出しておきましよう。 V リスト 4.6 pages/callback. vue く template> く p>Signing in ・・ . く / p > く /template> まだログインボタンは配置していませんので、 http://IocaIhost:3333/Iogin に直接アク セスしてみましよう。ログインフォームが表示されるはすです ( 図 4.2 ) 28
第 3 章 Nuxt で作る SPA この章から実際にコードを書いていきます。 3.1 全体像 まずは Nuxt. js で SPA を作ってみます。 実装の前に、これから作るアプリの全体像を説明しておきます。ますは Nuxt を使って AuthO を使ったログイン処理と JWT の取得を組み込みます。その後 RaiIs 側で Auth0 の公開鍵を使用して、リクエストに乗ってきた JWT を検証します。 Nuxt ロクイン リダイレクト J WT 0 公開鍵′ 秘密鍵第 AuthO 検証 0 リクエスト with JWT 0 Rails Goog 巵。品 図 3.1 システム全体像 19
第 4 章 Nuxt に AuthO を組み込む ログインしてください 初 Login 咽 4.8 非ログイン時の表示 ログイン中です ・ Logout △図 4.9 ログイン中の表示 ログアウトはボタンだけ用意してロジックは実装していませんが、 localStorage をクリ ログアウトは、 localStorage に保存されているトークンなどをクリアすることで実現し 4.4.4 ログアウトボタンの実装 アすると、 expiresAt が null になるため、実質ログアウトとなります。 IocaIStorage ・ removeltem('user つ 10caIStorage. removeltem(' expiresAt つ 10caIStorage. removeltem(' idT0ken') 10caIStorage. removeltem(' accessT0kent) const Ioca1Storage = window. 10calStorage unsetT0ken ( ) { class AuthOUti1 { リスト 4.17 plugins/auth0. js に unsetToken を追加 ます。 Auth0UtiI クラスに、 unsetToken メソッドを追加します。 38 するだけなので、 callback. vue と同じような内容になりますね。 ログアウトページを作成します。トークンをクリアして、トップページへリダイレクト
Allowed Callback URLs AIIowed Web Origins 4.2 AuthOLock を組み込む http://IocaIhost:3000/caIIbackt http://locaIhost:3333/callback Afterthe user authenticates we Will on ツ cali backto any ofthese URLs. You can spec\fy mumpie valld IJRLS by comma-separating them (typicallyto handledifferent environmentshke QA ortesting). Make S し「 e て 0 specifythe p 「 0t0C0 れ http : / / 0 「 https : / / , otherwise the cailback mayfail insome case ま http://IocaIhost:3000, http://locaIhost:3333 Comma-separated list Of alEowed ongins fO 「 u w C 「 os 午 n Authentication and web message response 010de 」 n the fO 「 m Of 図 4.4 CaIIback Setting の例 設定を保存したら、もう一度 / log ⅲにアクセスして、ログインを試してください。 このとき、 AuthO から profile と ema ⅱへのアクセス許可を求められる場合があります が、許可をしてログインを進めてください。 ( 図 4.5 ) 。 Authorize App NUXT Hi Takahiro Tsuchiya, Nuxt is requesting access tO you 「 nuxt-authO tenant 。 profile: access tO yo し「 profile and email △図 4.5 AuthO のアクセス許可 ログインが完了すると、 /callback へパラメータ付きでリダイレクトされます。 「 Signing
第 4 章 Nuxt に AuthO を組み込む ⅲ…」が表示されていますが、今はこれ以上の処理は組み込んでいません。 この画面からプラウザバックで戻ろうとすると、「 wentwrong 」の画面が表示されるか もしれません。その場合は、再度 http://IocaIhost:3333/ヘアクセスして、再ログインし てみてください。 4.26 CaIIback パラメータ /callback ヘリダイレクトされた時に、やたらと URL が長いことに気づくはずです。実 は、取得したトークンがクエリバラメータとして付与されています。 JWT は URL Safe うな内容が含まれています。 なトークンですので、クエリバラメータとして受け渡しができます。パラメータは次のよ id access token (Auth0 ヘアクセスするためのアクセストークン ) ・ expires—in ( 有効期限 ) token_type ( トークンの種類、 Bearer) ・ state (CSRF 対策用 ) id token (JWT 、このキーで自前の API ヘアクセスする ) token が重要です。今回は、 profile や email の内容も含めているので、 かなり長い トークンになっています。 リスト 4.7 plugins/auth. js の scope 指定部分 params : { scope : openid profile email' 取得した id_token は、 jwt. io でデコードしてみましよう。 32 てみます ( 図 4.6 ) 。 ズムを RS256 にして、 id_token ()y から始まる文字列 ) を Encoded 工リアに貼り付け AuthO が発行するトークンは、デフォルトだと RS256 になります。使用するアルゴリ