## 認証のためのバックエンド構築をやる

### 環境構築

[前回の続きから](https://saboten.dev/posts/auth0-nuxtjs-front)

Railsでバックエンドを作成したいが、自分のlocalで構築するのはなんとなく抵抗があるので、Dockerで構築しようと思います。
ベースのディレクトリ構成は

```
app
 - docker-compose.yml
 api
   - Gemfile
   - Gemfile.lock
   - Dockerfile
```

とした。

Dockerfile

```docker
FROM ruby:2.7.1

RUN apt-get update -qq && apt-get install -y build-essential libpq-dev nodejs 

RUN mkdir /myapp
WORKDIR /myapp
COPY Gemfile /myapp/Gemfile
COPY Gemfile.lock /myapp/Gemfile.lock
RUN bundle install
ADD . /myapp

```

docker-compose.yml

```yml
version: '3'
services:
  api:
    build: ./api
    ports:
      - '3000:3000'
    command: /bin/sh -c "rm -f /myapp/tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    volumes:
      - ./api:/myapp
    depends_on:
      - db
  db:
    image: postgres
    volumes:
      - dbdata:/var/lib/postgresql/data
    environment:
      - POSTGRES_USER=postgres
      - POSTGRES_PASSWORD=password
    ports:
      - '5432:5432'

volumes:
  dbdata:

```

として中身をおいておく。GemfileとGemfile.lockは空でおいておきます。

ここまで終わったら、docker-compose run してrails newコマンドを打っていく。
今回はapiモードで構築したいという点と、databaseにpostgresqlを使用したいというオプションをrails new時点で入れておく。


```
docker-compose run api rails new . --api --force --skip-bundle --database=postgresql
```

成功したら、database.ymlのdefaultに下記を追加。

```yml
default: &default
  adapter: postgresql
  encoding: unicode
  host: db
  port: 5432
  username: postgres
  password: password
```

最後に、

```sh
docker-compose build
docker-compose run api rails db:create
docker-compose up
```
すれば、起動するはず。

apiモードにすると何が違うかというと、view関連に必要なものがデフォルトで作成されなくなったり、assetsディレクトリがなくなったりします。後はコントローラーがAPIを継承した形になったりします。

起動が成功したら、普通にRails newしたときのように

![スクリーンショット 2021-03-09 154935.png](https://media.graphcms.com/60pM9vINToGIRVEHQwp6)

がでる。

## APIを作成してみる。

とりあえずはjsonでなにかレスポンスを返して見たいので、APIを一個作ってみます。

controllers/api/v1/hello_controller.rb

```rb
module Api
  module V1
    class HelloController < ApplicationController
      def index
        render json: {
          greet: "hello",
        }
      end
    end
  end
end

```

ルーティングも対応させます。

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

```

indexしかないですが一旦resourcesで行きます。

```
http://localhost:3000/api/v1/hello
```

にアクセスしてみます。

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

のようにJSONのレスポンスが帰ってこれば成功です。
ここで一旦Rails側は一旦ストップ。Nuxtの設定に行きます。


## Proxy設定をする

Nuxt側は5000番ポートで立ち上げるようにしているので、5000 -> 3000 apiにリクエストを送る必要があります。
nuxtにはproxyモジュールというものがあり、これを使うことで違うポートでもいい感じに通信ができるようになります。

### axios入れる

RailsとのAPI通信にはaxiosを使おうと思うので、nuxt/axiosを入れます。

```sh
yarn add @nuxtjs/axios @nuxtjs/proxy

```

インストールしたら、nuxt.config.tsにaxiosの設定と、proxyのエンドポイントの指定を行います。

```ts
.
.
.
 modules: ['@nuxtjs/dotenv', '@nuxtjs/axios', '@nuxtjs/proxy'], //追加
 .
 .
 .
 axios: {  // 追加
    proxy: true
  }
 
 config.proxy = { //追加
  '/api': 'http://localhost:3000'
}
 
```

エンドポイントは本来であれば環境変数に分けたりするのがいいですが、今回は確認が優先ということもあり一旦ハードに書いてしまいます。

エンドポイントの指定が終わったら、実際に機能するか確認するために、Indexにボタンを置いてみます。

index.vue

```ts
<template>
.
.
.

  <div>
    <button @click="greet()">
      挨拶する
    </button>
  </div>
    .
    .
    .
    
</template>
.
.
.


methods: {
.
.
.

 async greet () {  //追加
      const data = await this.$axios.$get('/api/v1/hello')
      console.log(data)
    }
}

```

ボタンをクリックしてみると、Rails側で設定したJSONが受け取れることを確認できます。

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


ここまででAPIの基本的な動作は完成です。
実際にホスティングする場合にはRails側でrack-corsを使うなどして、許可元を指定するなどの対処が必要になります。
気が向いたらそっちも書くかも。






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

##
前回で基本的な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を使った検証、検証データをフロントでっ取得するという流れができました。
本番で運用する際は、ログイン後の画面に関しては共通のヘッダーを設定したり、検証したデータでリソースの表示を行ったりなど、色々やることはありますが、仕組みがいい感じにわかったので今回はここまでにします。
