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

付録 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 \

第 3 章 Nuxt で作る SPA vue init nuxt—community/starter—template nuxt—auth0 cd nuxt—authO yarn install yarn dev Nuxt には dev サーバーが搭載されています。 dev サーバーを起動した状態で、 http://localhost:3000/ にアクセスすると、図 3.2 のような画面が表示されるはずです。 nuxt-authO Nuxt. js project G はト勾し 図 3.2 Nuxt. js の初期画面 git の初期化は適宜行ってください。 3.3.2 起動ポートの変更 dev サーバーはデフォルトで Port : 3000 を使いますが、後々に登場する RaiIs サーバー と競合します。そのため予めポートを変更しておきましよう。 package. json の dev 部分 を変更します。 マリスト 3.3 package. json " HOST = 0 . 0 . 0 . 0 PORT = 3333 nuxt" 再度 yarn dev が必要です。今後は http://localhost:3333/ でアクセスします。 22 pages/hello. vue を作成します。 Nuxt の強力なルーティング自動生成を体験しつつ、 Hello Nuxt してみます。 3.3.3 He110 Nuxt

第 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 プラウザのコンソールに

マリスト 4.18 pages/logout. vue く template> く p>Signing out ・ く /template> く script> export default { mounted() { this . $authO . unsetT0ken() this . $router. replace(' / つ . く /p> く /script> これで一連の流れができました。 みてください。 4.5 AuthO API へのアクセス ログイン→ Google 認証→ログアウトの流れを試して 4.5 AuthO API へのアクセス 4.5.1 AccessT0ken によるリクエスト Authorization ヘッダの Bearer スキームを使います。 M リスト 4.19 Authorization ヘッダ Authorization: Bearer く access_token or id token> 今回は id token ではなく、 access token を使用して、 Auth0 自体からユーザー情報 を取得してみます。 access token は locaIStorage からコピーします。 curl を使ってエン ドボイントを叩いてみます。 JSON でユーザー情報が取得できれば成功です。 39 'name" : "Takahiro Tsuchiya" : "takahiro. tsuchiya. corocn' "family—name" : "Tsuchiya" given_name" : "sub" : "goog1e-oauth21113324381784049738745 " M リスト 4.21 userinfo の取得結果 https : // く YOUR_TENANT_NAME> . auth0. com/userinfo curl —H "Authorization : Bearer く YOUR ACCESS_TOKEN>' ▽リスト 4.20 curl で userinfo を取得する

第 6 章 Knock による認証 6.5 認証付 ControIIer 認証したユーザーのみアクセスできるコントローラーを作成していきます。 となる AppIicationControlIer で、 Knock の使用を宣言します。 V リスト 6.7 app/controllers/application controller. rb class App1icationContr011er く ActionContr011er: :API include Knock : : Authenticab1e end 証ューザーのみアクセス可能な、 SecuredPingControIIer を作成します。今回はユー ロ′い口 まずは基底 class SecuredPingControIIer く App1icationContr011er module VI module Api # frozen_string—literal: true マリスト 6.8 app/controllers/api/vl /secured_ping_controller. rb アクセス可能なコントローラーとなります。 routes も修正しましよう。 ザー情報を返すようにしてみます。 before_action 部分を追加すると、認証済の場合のみ before action def index render j SO ・ message : end end end end : authenticate_user " ID : #{current—user. id} , SUB : #{current—user. sub} " リスト 6.9 config/routes. rb Rai1s . application. routes . draw dO namespace : api dO namespace : VI dO resources :pxng resources : secured_ping end end end この状態で次の 2 つの API ヘアクセスして、 SecuredPingController が保護されてい るかどうかを確認してみましよう。後者は 401 工ラー (Unauthorized) が返るはずです。 52

第 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

1 .4 JWT の構造 14 JWT の構造 JWT はドット (. ) で区切られた 3 つの部分で構成されます。 eyJhbGciOiJIUz11NiIsInR5cC161kpXVCJ9. マリスト 1 . 1 JWT のサンプル これらは Header 、 PayIoad 、 Signature の順で連結され、次のような形式になります。 Signature / 署名 ・ Payload/ ペイロード Header / ヘッダー eyJzdWIiOiIxMjMONTY30DkwIiwibmFtZS161kpvaG4gRG911iwiYWRtaW4iOnRydWV9. ますが、実際の JWT は改行が含まれません。 リスト 1.1 の各行が前述した 3 つの部分に該当します。横幅の関係上、改行を入れてい TJVA950rM7E2cBab30RMHrHDcEfxj oYZgeFONFh7HgQ リスト 1 .2 ヘッダー シュアルゴリズムが定義されています。中身を見てみましよう。 1 .4.1 Header/ ヘッダー トークンの第 1 部分はヘッダーです。ヘッダーではトークンの種類と、使用されるハッ "alg" "typ' " HS256 " " JWT " 署名アルゴリズムとして HMAC ー 256 を使用した JWT ということが分かります。 alg の種類はのちほど紹介します。 工ンコード済み Base64Url なので、 1 行目のドットの手前までをデコーディングしてみ ると、上記 JSON が得られるはずです。 Base64Decode*3 などのサイトを活用して、自身 で確認してみてください。 、 3 https://www.base64decode.org/ 9

第 1 章 JSON Web Token 1 .4.2 PayIoad / ペイロード トークンの第 2 部分はペイロードです。 用いてユーザー情報などが埋め込まれます。ヘッダー同様にデコードした場合、次のよう な JSON が得られます。 V リスト 1 .3 ペイロード こに、 CIaim/ クレーム ( キーと値のペア ) を "sub" " 1234567890 " " Jo Ⅱ Doe" クレームの種類は上記だけではありません。予約済みのクレームを紹介します。 名前 ISS aud sub iat exp nbf 正式名 lssuer AIIdience Subject lssued At Expiration Time Not Before JWT ID 表 1 . 1 予約済みクレーム 内容 ユニーク性を担保するための ID 。 有効になる日時。 有効期限。 発行日時。 ューザーを識別できる ID が入る。 何を認証したか。同じ lssuer または世界でユニーク。 利用者。認証情報を使ったサービスの情報が入る。 発行者。アプリケーションやドメイン名が入る。 iss ( 誰が ) ,aud ( 誰のために ) ,sub ( 何を ) 発行したかで覚えるといいです。これら 以外にも、ユーザーのプロフィールデータ (name や email や picture など) を含めるこ secret) base64Ur1Encode(header) + " " + base64Ur1Encode(pay10ad) , HMACSHA256 ( マリスト 1 .4 HMAC-256 の場合の署名方法 シークレットを使用します。 トークンの第 3 部分は署名です。署名を作成するためには、ヘッダーとペイロード、 れ生 3 Signature / 署名 とができます。

4.2 AuthOLock を組み込む ALGORITHM Encoded eyJeeXAi0iJKVIQiLCJhbGciOiJSU z11NiIsImtpZC161k1qSXpPRGxET0 RoR05VWkJPVGc1T1 VSRk5qQTNOVFJ ETVRkR01 rSTBSRUkwTUVSRFFUUTJN ZyJ9. eyJnaXZ1b19uYW111joiVGFr YWhpcm8iLCJmYW1 pbH1fbmFtZS161 1RzdWNoaX1hIiwibm1ja25hbWUi0i JOYWthaG1yby5ec3VjaG15YS5jb3J vY24iLCJuYW111joiVGFrYWhpcm8g VHNIY2hpeWEiLCJwaWNBdXJlIjOia HR0cHM6Ly9saDMuZ29vZ2x1dXN1cm 、・い 01 いーー V つ十一、 .1 十 0 C 〒、′フつ、れいし 0 △図 4.6 次のような JSON が得られるはずです。 マリスト 4.8 id token のデコード結果 glven_name ー "Takahiro" t'family—name' RS& Decod ed HEADER: - a19 ' ” JWT “ 、。 RS256 "MjIzODIDODhGNUZBOTg50URFNjA3NTRDMTdGMkIB •takahiro . tsuchiya . CO 「 0C0 " nickname "Tsuchiya• -familycname" 91 en ー name " . Ta 、 3h1r0 PAYLOAD: RE18MER[X2TQ2Mg• jwt. i0 での例 'nickname " "takahiro . tsuchiya. corocn" name" : "Takahiro Tsuchiya" "https : //1h3 ・ googleusercontent . com/ . picture'l " locale " ・ Ja" "updated_at " " 2018 ー 03 ー 05T14 : 55 : 58.978Z " 'email" : "takahiro. tsuchiya. corocn@gmail. com' 'email_verified" : true, 1 S S "aud" "iat" "https : //nuxt—authO. authO. com/t' 'goog1e—oauth2 ー 113324381784049738745 " "bWSCL499LksS6Zf9wWyFUFjvwAOvkQ0j " , 1520261759 , 1520297759 , "at—hash" : "1uOFTsB139cZIgqZbeCGzQ' " : "RCDt2uOrjdodn10Lg—kRcRNtKpiTkprj " nonce 33 name, email に加え、 icon 画像の URL が含まれていることが分かります。 sub が Auth0 管理下のユーザー ID になります。