第 6 章 Knock による認証 3 鍵設定 コマンドで設定ファイルを生成します。 マリスト 6.2 knock の設定ファイルを生成 $ bundle exec rails generate knock: install 設定ファイルとして config/initializers/knock. rb が生成されます。今回はアルゴリズ ムは RS256 、公開鍵は Auth0 が公開しているものを、サーバー構築時に取得するように M リスト 6.4 . env 名で置き換えてください。 プロジェクトルートに . er Ⅳを作成して、設定内容を記述します。パスは自身のテナント Base64. decode64(jwks—keys [ 0 ] [ 'x5c 冂 . first) ) . public-key config. token—public—key = OpenSSL: : X509 : :Certificate . new( jwks—keys Array(JSON. parse(jwks-raw) ['keys 冂 ) jwks-raw = Net : :HTTP. get URI (ENV['AUTHO_JWKS 勹 ) config. token—signature—algorithm = ー RS256 ー Knock. setup dO ー configl require 'net/http ー リスト 6.3 config/initializers/knock. rb 設定を書き換えます。 50 jwks. json にアクセスすると、公開鍵の情報が確認できます。 AUTH0_JWKS=https : // く YOUR_TENANT_NAME>. authO. com/.well—known/jwks. j son

第 3 章 Nuxt で作る SPA 3-4.2 SPA モード 今回は SPA として静的ファイルに生成して運用する予定ですので、 追加します。 nuxt. config. js に mode を追加します。 V リスト 3.7 nuxt. config. js mode : そのための設定を SPA モードにすると、 yarnbuild した時に generate まで生成されるようになります。 24 次章から実際に AuthO を組み込んでいきます。 ・ホスティングについて解説しました SPA モードを設定しました 実際に Hello Nuxt ページを作成しました ・ Nuxt. js について解説しました 3.5 まとめ ます。めっちゃ楽なのでオススメです。 く見かけるようになりました。筆者のプロフィールサイトも、 Nuxt を利用して作ってい Hosting でホスティング可能です。最近では、 Nuxt を利用したプロフィールサイトをよ 静的ビルドする場合は、ただの HTML とアセット群になるので、 NetIify や Firebase SSR を有効にする場合は、 Heroku などの Node が動くサーバーが必要になります。 3. 生 3 ホスティング ファイルを弄ることになります。 Nuxt の設定は nuxt. config. .js に集約されているので、今後の設定変更は基本的にこの けでホスティングできます。 成されたでしようか。この dist 以下を静的ホスティングサービスにアップロードするだ 一度 . nuxt および dist を消してから、もう 1 度 yarnbuild してみてください。 dist が生

第 5 章 Nuxt on RaiIs const config = { //module. exports modules : [ '@nuxtjs/axios ー '@nuxtj s/proxy = から修正 if (process . env. NODE—ENV 'development つ { config. proxy = { '/api' lhttp: / / 10Ca1 五 ost : 3000 ー module . exports config 5.8 Proxy の動作確認 設定した proxy の動作確認を行います。、 uxt 、 Rails それぞれのサーバーを起動して おきましよう。 トップページ (pages/index. vue) に、 p ⅲ g ボタンを配置してクリックしたらコンソー く button class="button is—primary" @c1ick="ping">Ping く /button> マリスト 5.12 frontend/pages/index. vue <template> co Ⅱ sole. log(ret) C011St ret await this . $axios . $get (' /api/vl/ping') async ping() { return this . $authO . isAuthenticated() ; loggedln ( ) { methods : { export default { リスト 5.1 1 frontend/pages/index. vue く script> ルに API を叩いた結果を吐き出すようにしてみます。 く /div> く /section> く /template> 実装できたら、「 Ping 」ボタンをクリックしてみましよう。 「 Pong 」と返ってくれば成功です。 46 プラウザのコンソールに

第 5 章 Nuxt on RaiIs ControIIer と Routes を書いてみます。作るのは、 ping という名前で、 を返す Ping API です。 ▽リスト 5.5 app/controllers/api/vl/ping_controller. rb module Api module VI class PingContr011er く AppIicationContr011er def index render J son : { message : ー Pong end end end end リスト 5.6 config/routes. rb Rai1s . application. routes . draw dO namespace : api dO namespace : VI dO :plng end end end pong という内容 http://IocaIhost:3000/api/v1/ping ヘアクセスして、 JSON 返ってくるか確認しま しよう。 なお、この時点で Nuxt と RaiIs は同時に立ち上がるはずです。今後はポート 3000 で Rails を立ち上げ、ポート 3333 で Nuxt を立ち上げて開発していきます。 5-6 Nuxt の出力先を変更する Nuxt で静的ファイルを出力する場合、現状の設定であれば frontend/dist に出力され ます。こちらを RaiIs の public に出力するよう変更します。なお、 public の生成は Nuxt に任せることになるので、 . gitignore に /public/* を追記しておくとよいです。 nuxt. config. js の generate に出力先を定義します ( リスト 5.7 ) 。 リスト 5.7 frontend/nuxt. config. js module. exports = { generate : { . /public' dir: 44

第 4 章 Nuxt に AuthO を組み込む クライアントの sett ⅲ g タブから確認できます ( 図 4. I) 。解説のため con ⅱ g を別ファイル CIientID と Domain は AuthO の管理画面から取得することができます。 Client →各 Nuxt のプラグインとして実装します。 Lock を利用するために、 plugins/auth(). js に AuthOUtil クラスを実装していきます。 yarn add authO—10ck にしていません。 ( ⑦ ) Dashboard ー APls ( こ ) SSO lntegrations connections 、 n.. Users HOOks 目 MultifactorAuth 引 Hosted Pages 〔ヨ Emails Nuxt QuickStart Settjngs Addons connections 2.authO.com Nuxt Domain Client ID Client Secret 図 4.1 、「リスト 4.2 plugins/authO. js cIientID と domain の確認 import AuthOLock from ー authO¯lock ー const config = { c1ientID : 'YOUR CLIENT_ID ー domain : ー YOUR DOMAIN ー class AuthOUti1 { showLock(container) { const lock = new AuthOLock( config. c1ientlD, conf ig. domain , container, closable: false, auth : { responseType : ー tOken id token' redirectUr1 : this. getBaseUr1() + params : { openid profile email' scope: 26 ー /callback ー

5.7 開発時の Proxy この状態で、 frontend ディレクトリの下で、 yarn generate を実行してください。 public に静的ファイルが生成されているはずです。 この状態で、 http://locaIhost:3000/ を見ると、 Rails の初期画面ではなく、 Nuxt の画 面が表示されるはずです。その上で、 /api/vl/ping にもアクセス可能なことを確認して ください。これで、 1 レポジトリで Rails の上で Nuxt で生成した SPA を動かすことがで きました。 5.7 開発時の Proxy 本番では : 3000 / でホスティングされた SPA から、 : 3000 / api ヘリクエストが送られま す。ドメインが同じなので特に考慮は不要です。 開発時は、 Nuxt がポート 3333 で立ち上がるため、 : 3333 / から : 3000 / api ヘリクエスト を送る必要があります。これを解決するため、 Nuxt の proxy モジュールを使用します。 さっそく設定を編集してますが、今後 js での API のコールに axios 、 1 を使用するので この段階で追加しておきます。また、 cross ー env * 2 も追加しておきます。 マリスト 5.8 axios, proxy, cross-env $ cd frontend $ yarn add @nuxtj s/axios @nuxtj s/proxy $ yarn add ——dev corss—env frontend/package. json に NODE_ENV の指定を加えます。 ▽リスト 5.9 "dev" frontend/package. json " cross—env NODE_ENV=deve10pment HOST=O . 0.0.0 PORT = 3333 nuxt " frontend/nuxt. config. js で proxy の有無を切り替えます。 マリスト 5.10 frontend/nuxt. config. js 、 1 https://github.com/axios/axios 、 2 https://github.com/kentcdodds/cross-env 45

4.2 AuthOLock を組み込む lock . show() getBaseUr1 ( ) { return 、 ${window. location ・ protocol}//${window. location. host} 、 export default (context , inject) = > { inject (' authO 髫 new AuthOUtiI) ; 9 リスト 4.3 nuxt. config. js mode : plugins : い -/P1ugins/auth0 ・ js 冂 / / この行を追加 inject を利用することで、 Vue Component の内部では this. $auth0 経由で呼び出しが 27 this . $authO. showLock("show-auth") ; mounted() { export default { く script> く /template> く div id="show—auth"/> く template> V リスト 4.5 pages/login. vue ログインフォームを呼び出します。 ログインページとして、 pages/login. vue を作成します。ページがマウントされた時に 4.2.2 Login ページ this. $auth0. showLockC hoge ' ) ; リスト 4.4 inject したオブジェクトの呼び出し 可能になります。

5.5A 円を作成してみる です ( 図 5. I) 。 石に 5 Yay! You're on RaiIs! Rails verson: 5.1.5 リスト 5.4 ディレクトリ構成 この時点でのディレクトリ構成は次のような状態です。 図 5.1 RaiIs の初期画面 Rubyversion: 2.5.0 ( X86 ー 64- da 「 winl 6 ) ここ一こ Nuxt Gemfi1e Gemfi1e . lock ト 11b yarn. lock components/ assets/ ト . nuxt/ ト frontend/ ト db/ ト config/ ト bin/ app / authO/ べースは Rai1s ト ト 43 こまで多くのファイルは生成されません。手で書いても十分紙が足りるので、手作業で API モードの Rails は、通常の RaiIs と異なり、ビューが無いので Sca 簡 ld してもそ 5.5 API を作成してみる

付録 A Tips 本編に書ききれなかったことを、 Tips 集をまとめておきます。 $ heroku config: set \ $ git push heroku master $ heroku create く APP—NAME> ▽リスト A. 1 Heroku の設定 RaiIs 側は AUTHO JWKS の設定を忘れなければ OK です。 ておきます。 RaiIs をお手軽にホスティングするといえば Heroku ですね。初期設定の手順を説明し A. 1 Heroku にデブロイしたい 56 " 8 . 9 . 4 " 'engines " package ・ j son マリスト A. 2 Heroku で Nuxt を Build する ます。 すが、今回は単純な API サーバなので、このへんは自分でコントロールする必要があり の追加が必要になります。 Webpacker Gem を使用している場合は自動で Yarn が入りま 実行します。また、 Node と Yarn がデフォルトで導入されていないので、 buildpacks へ Nuxt 側はプロジェクトルートに package. json を作って、 postinstall で yarn build を SECRET_KEY_BASE= 、 ruby —rsecurerandom -e "puts SecureRandom. hex ( 64 ) " AUTHO_JWKS=https : // く YOUR_TENANT—NAME>. auth0.com/.well—known/jwks.j son \

第 4 章 Nuxt に AuthO を組み込む mounted() { this . $authO. setT0kenByQuery ( ) this . $router ・ replace('/') / / この 1 行を加える 4.4 ログイン状態の判定 4.4.1 判定メソッド ログイン状態を判定できるようにしましよう。次のようなボタン条件でボタンを配置し 4.4.2 スタイルの追加 return new Date() . getTime() く expiresAt const expiresAt = window. 10ca1Storage . getltem('expiresAt つ isAuthenticated() { class Auth0Uti1 { ▽リスト 4.13 plugins/authO. js にログイン判定メソッドを追加 判定メソッド isAuthenticated を追加します。 ログイン状態は、有効期限内のトークンを保有しているかで判定します。 Auth0Util に ・ログインしていれば「 Logout 」ボタンを表示 ・ログインしていなければ「 Log ⅲ」ボタンを表示 ます。 36 、 2 https://fontawesome.com 、 1 https://bulma.io/ ▽リスト 4.14 nuxt. config. js バージョン 4 ) の外部 CSS を追加します。 きましよう。 CSS Framework の Bulma*l と、 lcon Font の Font Awesome*2 ( 本書では isAuthenticated を組み込む前に、見た目をいい感じにして、テンションを上げてい