nuxt.js

#　Nuxtで認証認可をやる

[前回の続きから](https://saboten.dev/posts/auth0-for-spa-app-1)

jwtと認証認可の基礎知識を学んだので、実際に動かしてみる。
このブログはNext.jsで作っているが、今回はNuxtを使ってやってみる。

nuxt-community　には、認証系のモジュールのテンプレートや、大体のアプリケーションに必須な機能がデフォルトで組み込まれているテンプレートが存在し、それらを使用することで基本機能の実装はスキップできる。

https://github.com/nuxt-community/auth-module
https://github.com/nuxt-community/typescript-template

今回はnuxt/authモジュールは使わず、一方でtypescriptを使いたいので、スターターキットから下記のテンプレートを拝借します。

https://github.com/nuxt-community/typescript-template

いつもどおりyarnして起動準備。

とりあえず名前は `nuxt-auth-spa-sample` としておきました。~~長い~~

```sh
yarn dev
```
すると起動します。

## 事前準備

Auth0を組み込む前に準備をします。


### ポート番号を変更する
まずはポート番号を変えておきましょう。バックエンドにRailsを使う予定なので、そのままだとポート番号の3000が被ってしまいます。
番号は他とかぶらなければ何でも良いので、今回は5000とかにしました。

デフォルトのポート番号を変更するために、pacage.jsonのdevの部分にオプションを付け足します。

```ts
"dev": "HOST=0.0.0.0 PORT=5000 nuxt"

```

変更したら、指定したポートで開いて確認します。

### SPA設定する

nuxtでspa設定するのは簡単で、nuxt.config.tsファイルにssrオプションを設定するだけで完了する。

```ts
ssr: false
```
modeというオプションもあるが、こちらは現時点で非推奨になっている。


デフォルトでもnuxtはnextと違ってnuxt.configファイルを変更しても再起動を自動でしてくれるみたい。

これで一旦フロントの最低限の設定はできたので、Auth0を組み込んでいく。


## Auth0を使う準備をする

nuxtには専用のauthモジュールがあるので、実際にアプリケーションを作成する事となった場合、それらを採用するのが良さそう。

今回はフレームワーク専用のモジュールを使わずに実装してみたいので、Auth0を適用できる通常のライブラリを使用する。
サラッと調べたところ、auth0をjsで使用するには大きく2つ選択肢があるっぽい。

- auth0-js
- auth0-lock

auth0-jsはカスタマイズ性の高いライブラリっぽい。auth0-lockは最初からフォームを組み込んでくれているラッパーといった感じ。

フォームをカスタマイズしていくのは必要になってくる事が多いが、今回は本題とそれるのでlockを使って組み込みのフォームを利用させてもらおう。


```sh
yarn add  auth0-lock  @types/auth0-lock
```

その後、plugins以下にauth0.tsというファイルを作成し、下記のように記載。

```ts
import Auth0Lock from 'auth0-lock'
import nuxtConfig from '~/nuxt.config'

const config = nuxtConfig.auth0

class Auth0Util {
  showLock(container: any) {
    const lock = new Auth0Lock(config.client_id, config.domain, {
      container,
      closable: false,
      auth: {
        responseType: 'token id_token',
        redirectUrl: this.getBaseUrl() + '/callback',
        params: {
          scope: 'openid profile email',
        },
      },
    })

    lock.show()
  }

  getBaseUrl() {
    return `${window.location.protocol}//${window.location.host}`
  }
}

export default (context: any, inject: (arg0: string, arg1: Auth0Util) => void) => {
  inject('auth0', new Auth0Util())
}

```
client_idはキャメルケースにすると怒られたのでスネークケースにしてる。


### 環境変数で渡す

Auth0のClientIDなどをconfigに書いていきたいが、そのまま直打ちすると流出してしまう恐れがあるので環境変数経由で見るようにしたい。

https://ja.nuxtjs.org/docs/2.x/configuration-glossary/configuration-env/

`NUXT_ENV`で始まる環境変数を定義すれば、ビルドフェーズで値が自動的に注入されるとのこと。

その他に、dotenvモジュールを入れる方法もあり、今回はこっちを使っていく。

```sh
 yarn add -D @nuxtjs/dotenv    
```

インストールしたら、nuxt.config.tsのモジュールに追加して使えるようにします。


```ts
modules: [
    '@nuxtjs/dotenv'
  ],
```

そして、auth0の情報もnuxt.config.tsに追加します。

```ts
auth0: {
    domain: process.env.AUTH0_DOMAIN,
    client_id: process.env.AUHT0_CLIENTID
  }
```

全体像はこんな感じになった

```ts
import type { NuxtConfig } from '@nuxt/types'

const config: NuxtConfig = {
  build: {},
  buildModules: [
    '@nuxtjs/composition-api',
    '@nuxt/typescript-build'
  ],
  ssr: false,
  css: [],
  env: {},
  head: {
    title: 'nuxt-community/typescript-template',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'A boilerplate to start a Nuxt+TS project quickly' }
    ],
    link: []
  },
  loading: { color: '#0c64c1' },
  modules: [ '@nuxtjs/dotenv'],
  plugins: [
    '~/plugins/auth0',
    '~/plugins/truncate'
  ],
  auth0: {
    domain: process.env.AUTH0_DOMAIN,
    client_id: process.env.AUHT0_CLIENTID
  },
  
}

export default config

```

### Loginページを作る

基本機能はできたので、loginページを作る。
`pages/login.vue` というファイルを作成し、ログイン用のAuth0のフォームが出てくるようにする。


```vue
<template>
  <div id="show-auth"></div>
</template>

<script>
  export default {
    setup() {},
    mounted() {
      this.$auth0.showLock('show-auth')
    },
  }
</script>

```

~~composition-api?知りませんねぇ。~~

![スクリーンショット 2021-03-08 184112.png](https://media.graphcms.com/airJHl3bSYKt7QHfPpGS)

上記のようにフォームが出てこればおｋ。

ここでloginしてみてもいいが、エラーになる。

nuxt側でcallbackに対応するページを作成することと、Auth0側で「Allowed Callback URLs」「Allowed Web Options」の2つを許可してあげる必要がある。

開発環境なので、localhostと開けてるポート番号を登録する。今回はnuxt用の5000と、Railsで使用する3000を開けた。

```ts
<template>
  <p>callback</p>
</template>

<script>
  export default {}
</script>

<style></style>

```

これらの設定をすべて整えた上でGoogle ログインを選択してみる。


googleでログインを済ませると、callback.vueファイルにリダイレクトする。

リダイレクトしたら、URL欄を見てみる。localhost:xxxx/callbackの後ろに膨大な文字列がくっついてくる。

これはauth0で取得したトークン群である。
access_tokenやid_token,expire_atなど色々ついてきているが、ここではid_tokenを見ていきたい。


id_tokenはjwtである。ここでは、auth0.tsのスコープに指定した情報が入っている。

jwt.ioでトークンを複合してみる。
urlからid_token以下の文字列を抜き取り、jwt.ioに貼り付け。

![スクリーンショット 2021-03-08 185510.png](https://media.graphcms.com/SJ81b7uRxOozGrbTaLRg)

みたいに自分のログイン情報が表示されていればオッケー。

## トークンの保存

現状だとただURLに返ってきただけなので、それを使って色々できていない状態。とりあえずSPAで必要な情報をLocalStrageに保存したい。

```sh
yarn add jwt-decode query-string @types/jwt-decode @types/query-string    
```

jwtのデコードを行えるライブラリと、クエリパラメータをいい感じに取得できるライブラリを追加。

追加できたらauthutilに保存処理用のメソッドを書いていく。

```ts
import Auth0Lock from 'auth0-lock'
import nuxtConfig from '~/nuxt.config'
import jwtDecode from 'jwt-decode'
import queryString from 'query-string'

const config = nuxtConfig.auth0

class Auth0Util {
  getQueryParams() {
    return queryString.parse(location.hash)
  }

  setTokenToLocalStorage({ access_token, id_token, expires_in }: any) {
    const localStorage = window.localStorage
    localStorage.setItem('accessToken', access_token)
    localStorage.setItem('idToken', id_token)
    localStorage.setItem(
      'expiresAt',
      (expires_in * 1000 + new Date().getTime()).toString()
    )
    localStorage.setItem('user', JSON.stringify(jwtDecode(id_token)))
  }

  setTokenByQuery() {
    this.setTokenToLocalStorage(this.getQueryParams())
  }

  showLock(container: any) {
    const lock = new Auth0Lock(config.client_id, config.domain, {
      container,
      closable: false,
      auth: {
        responseType: 'token id_token',
        redirectUrl: this.getBaseUrl() + '/callback',
        params: {
          scope: 'openid profile email',
        },
      },
    })

    lock.show()
  }

  getBaseUrl() {
    return `${window.location.protocol}//${window.location.host}`
  }
}

export default (
  context: any,
  inject: (arg0: string, arg1: Auth0Util) => void
) => {
  inject('auth0', new Auth0Util())
}

```

localStrageにurlをparseして各情報を入れていく。

定義し終わったら、urlに情報が入ってくるcallback.vueに呼び出す処理を追加する。

```ts
<template>
  <p>callback</p>
</template>

<script>
  export default {
    mounted() {
      this.$auth0.setTokenByQuery()
    },
  }
</script>

<style></style>

```
このようにすることによって、callbackがマウントされたときにlocalStrageに値を入れることができる。

![スクリーンショット 2021-03-08 223341.png](https://media.graphcms.com/rCoE3WMRAC4QaWBYSmUI)


確認できたら、ログイン後にはトップページにリダイレクトするようにしておこう。

```ts
 this.$router.replace('/')
```

nuxtの場合は、上記の一行でルートを変更できる。

## ログイン状態を判定する

トップページに遷移した後、今ログインしているのかどうかを知りたい。
Auth0のデフォルトだと、アクセストークンの有効期限は２時間、jwtの有効期限は10時間となる。

今回はアクセストークンが有効期限なのかどうかを判定するようにしてみる。

```ts
isAuthenticated() {
    const expiresAt = window.localStorage.getItem('expiresAt')
    if (!expiresAt) {
      return false
    }
    return new Date().getTime() < Number(expiresAt)
  }
```

expiresAtはログインしていない状態だとnullになるので、その場合はfalseを返すようにしておきます。


```ts
 isAuthenticated(): boolean {
    const expiresAt = window.localStorage.getItem('expiresAt')
    if (!expiresAt) {
      return false
    }
    return new Date().getTime() < Number(expiresAt)
  }

```

boolean型を返すので、v-ifで分岐して使えるようになった。この分岐を使用して、loginしているときだけユーザー情報を表示したいと思う。
表示するのはnicknameをとりあえず表示し、その後必要な情報があれば追加で出すことのできる状態にする。

```ts
getUserData() {
    const userString = window.localStorage.getItem('user')
    return userString ? JSON.parse(userString) : null
  }

```

index.vueに分岐と、定義した２つのメソッドを使用できるようにする。

```ts
<template>
  <main>
    <div v-if="!loggedIn()">
      <div>ログインしてください。</div>
      <nuxt-link class="button is-primary" to="/login">
        <span>login</span>
      </nuxt-link>
    </div>
    <div v-else>
      <div>{{ userInfo().nickname }}</div>
    </div>
  </main>
</template>


<script lang="ts">
export default {
  methods: {
    loggedIn() {
      return this.$auth0.isAuthenticated()
    },
    userInfo() {
      return this.$auth0.getUserData()
    }
  }
}
</script>

```

## ログアウトできるようにする

ログアウトもできるようにしておく。ログアウトはローカルストレージに保存されたデータをクリアすることで、ログアウト扱いになる。（isAuthenticated()メソッドがfalseになる）


```ts
logOut() {
    const localStorage = window.localStorage
    localStorage.removeItem('accessToken')
    localStorage.removeItem('idToken')
    localStorage.removeItem('expiresAt')
    localStorage.removeItem('user')
  }

```
clearすると既存のlocalstrageのデータが全部消えてしまい、他のアプリにも影響が出たりするかもしれないので、一個づつ消した。

ログアウトボタンは、ログイン済みの場合に表示し、ボタンを押したらログアウト処理+topページにリダイレクトするようにする。

index.vueに追加。

```ts
<div v-if="!loggedIn()">
      <div>ログインしてください。</div>
      <nuxt-link class="button is-primary" to="/login">
        <span>login</span>
      </nuxt-link>
    </div>
    <div v-else>
      <div>{{ userInfo().nickname }}</div>
      <button @click="logout()">
        ログアウトする
      </button>
    </div>
    ...
    <script>
    ....
     logout() {
      this.$auth0.logOut()
      this.$router.replace('/')
    }
    ....
    </script>
    
    
```

### アクセストークンを使用して、ユーザー情報を取得する


現状、localStrageのUserキーでユーザー情報を格納しているので、そこから情報を取得することはできたが、本来は取得したaccess_tokenを使用して、リソース元から情報を取得するのが普通である。

APIへのアクセスには、AuthorizationヘッダーのBearerスキームというものを使用する。
保護された情報にアクセスしたい場合、ヘッダーにアクセストークンを付与する。

簡単に確認したい場合はcurlかPostmanのようなアプリを使用するのが良い。

curlの場合は、

```sh
 curl -H "Authorization: Bearer アクセストークン" https://<Auth0のテナント名>.auth0.com/userinfo
```
みたいな感じで試すとよい。　


フロントの認証のベースはできたので、次回はバックエンド側を実装してみる。


Nuxt.jsとAuth0で学ぶ認証認可~front編~

##
前回で基本的なAPI通信の基礎はできたので、今回は認証付きのAPIアクセスをやってみる。
具体的には、Auth0からもらった公開鍵を使用して、nuxtから送られてきたjwtを検証する。

## 認証に何使うか？
通常Railsで認証を行う場合、deviseやらsorceryやらを使用することが多いです。
今回はSPAということもあり、別の選択肢が候補に上がります。firebaseを使うパターンもありますが、今回はKnockを使ってみたいと思います。

https://github.com/nsarno/knock

KnockはRails Apiモードに特化したステートレスなセッションを行いたい場合に選択肢に上がる事が多いです。トークンの管理は今回Auth0に任せたいので、そのあたりも相性が良さそうです。


### RailsアプリにKnock入れる

Rails側にknockを入れていきます。環境変数も入れたいので、ついでにdotenvも導入します。


今回はKnockを採用しましたが、ruby-jwtというgemもあり、そちらのほうが更新頻度も多いのでそっちを使ったほうがいいかも
https://github.com/jwt/ruby-jwt



Gemfile
```rb
gem "knock"
gem "dotenv-rails"
```

Knockを入れると、コマンドで設定ファイルを作成できるようになるので、下記生成する。

```sh
rails g knock:install
```

実行するとconfig/initializers/knock.rb が生成される。この設定ファイルを今回の要件に対応させるように書き換える。

参考
https://rwehresmann.medium.com/ruby-on-rails-auth0-knock-7f114ed87e4b


```rb
require "net/http"
require "knock/version"
require "knock/authenticable"

Knock.setup do |config|

  ## Expiration claim
  ## ----------------
  ##
  ## How long before a token is expired. If nil is provided, token will
  ## last forever.
  ##
  ## Default:
  # config.token_lifetime = 1.day

  ## Audience claim
  ## --------------
  ##
  ## Configure the audience claim to identify the recipients that the token
  ## is intended for.
  ##
  ## Default:
  config.token_audience = -> {ENV['AUTH0_CLIENT_ID']}

  ## If using Auth0, uncomment the line below
  # config.token_audience = -> { Rails.application.secrets.auth0_client_id }

  ## Signature algorithm
  ## -------------------
  ##
  ## Configure the algorithm used to encode the token
  ##
  ## Default:
  config.token_signature_algorithm = "RS256"

  jwks_raw = Net::HTTP.get URI(ENV['AUTH0_JWKS'])
  jwks_keys = Array(JSON.perse(jwks_raw)["keys"])

  ## Signature key
  ## -------------
  ##
  ## Configure the key used to sign tokens.
  ##
  ## Default:
  # config.token_secret_signature_key = -> { Rails.application.secrets.secret_key_base }

  ## If using Auth0, uncomment the line below
  # config.token_secret_signature_key = -> { JWT.base64url_decode Rails.application.secrets.auth0_client_secret }

  ## Public key
  ## ----------
  ##
  ## Configure the public key used to decode tokens, if required.
  ##
  ## Default:
  config.token_public_key = OpenSSL::X509::Certificate.new(Base64.decode64(jwks_keys[0]["x5c"].first)).public_key

  ## Exception Class
  ## ---------------
  ##
  ## Configure the exception to be used when user cannot be found.
  ##
  ## Default:
  # config.not_found_exception_class_name = 'ActiveRecord::RecordNotFound'
end

```

AUTHO0_JWKSにはAuth0の公開鍵情報を取得できるurlを設定します。この公開鍵を用いて、JWTを検証します。

## Userモデルを作る

Rails側にログインしたらユーザー情報を保存したいので、ユーザーモデルの作成を行います。
現状はemailアドレスとどんな媒体でログインしたかを知りたいので、emailとsubのカラムを追加します。それ以外でももし欲しい情報があればカラムを用意して保存できるようにすると良いでしょう。

```
rails g model User email:string sub:string
rails db:migrate
```

マイグレーションができたら、UserモデルにKnockの認証用のメソッドを定義していきます。


```rb
class User < ApplicationRecord
  def self.from_token_payload(payload)
    find_by(sub: payload["sub"]) || create!(sub: payload["sub"], email: payload['email'])
  end
end

```
Knockを適用した範囲のAPIでは、自動でfrom_token_payloadというメソッドが呼ばれる。このメソッドの第一引数に、JWTのペイロードが入ってくる。

また、適用したAPIの範囲と言っているように、APIにKnockを使用することを明示してあげます。
ApplicationControllerに入れておきましょう。

```rb
class ApplicationController < ActionController::API
  include Knock::Authenticable
end

```

ここまでできたら、認証付きのAPIコントローラーを設定します。今回はauth_controller.rbという名前にしました。

```rb
module Api
  module V1
    class AuthController < ApplicationController
      before_action :authenticate_user

      def index
        render json: {
          message: "ID : #{current_user.id}, SUB: #{current_user.sub} ",
        }
      end
    end
  end
end

```

ルーティングも変更。

```rb
Rails.application.routes.draw do
  namespace :api do
    namespace :v1 do
      resources :hello
      resources :auth
    end
  end
end

```

```rb
before_action :authenticate_user
```

を行っているので、authコントローラーにだけauthorizeするようにしています。
この状態でauthにアクセスしても、401が返ってきます。

ポストマンやcurlを用いてBearerにid_tokenを入れて検証してみます。
戻り値として、authコントローラーで指定した形で値が取得できればOKです。

```json
{"message":"ID : 6, SUB: google-oauth2|hogehogefugafuga "}
```

## Nuxtから呼べるようにする

最後に、フロントエンド側から、この情報を取得できるようにしておきます。

id_rokenを検証にわたしてあげたいので、LocalStrageからid_tokenを抜き出すメソッドを定義します。

auth0.ts
```ts
getIdtoken () {
    return this.isAuthenticated() ? localStorage.getItem('idToken') : null
  }
```

ログインしていればローカルストレージからidTokenを取得し、そうでないならnullを返すようにします。

index.vueにも、auth用のボタンを置きましょう。
全体像はこうなりました。

index.vue
```ts
<template>
  <main>
    <ul>
      <li
        v-for="page in ['Options API', 'Class API', 'Composition API']"
        :key="page"
      >
        <nuxt-link
          :to="
            `/${page
              .toLowerCase()
              .split(' ')
              .join('-')}`
          "
        >
          With {{ page }}
        </nuxt-link>
      </li>
    </ul>
    <div v-if="!loggedIn()">
      <div>ログインしてください。</div>
      <nuxt-link class="button is-primary" to="/login">
        <span>login</span>
      </nuxt-link>
    </div>
    <div v-else>
      <div>{{ userInfo().nickname }}</div>
      <button @click="logout()">
        ログアウトする
      </button>
    </div>
    <div>
      <button @click="greet()">
        挨拶する
      </button>
    </div>
    <div>
      <button @click="auth()">
        authする
      </button>
    </div>
  </main>
</template>

<script lang="ts">
export default {
  methods: {
    loggedIn () {
      return this.$auth0.isAuthenticated()
    },
    userInfo () {
      const user = this.$auth0.getUserData()
      console.log(user)
      return user
    },
    logout () {
      this.$auth0.logOut()
      this.$router.replace('/')
    },
    async greet () {
      const ret = await this.$axios.$get('/api/v1/hello')
      console.log(ret)
    },
    async auth () {
      const data = await this.$axios.$get('/api/v1/auth', { headers: { Authorization: 'Bearer ' + this.$auth0.getIdToken() } })
      console.log(data)
    }
  }
}
</script>

```

この状態で、authボタンを押すと、console.logによってapi/v1/authにアクセスした結果のidとsubが返ってきています。

![スクリーンショット 2021-03-10 025017.png](https://media.graphcms.com/PBqkKGWGSXqemuKve6aV)

これで、フロントでAuth0を用いてログイン、バックエンドアプリでid_tokenを使った検証、検証データをフロントでっ取得するという流れができました。
本番で運用する際は、ログイン後の画面に関しては共通のヘッダーを設定したり、検証したデータでリソースの表示を行ったりなど、色々やることはありますが、仕組みがいい感じにわかったので今回はここまでにします。
