Nuxt.js + Auth0 + Spring Boot で作る認証付きSPA 【 vol.3 Nuxtとauth0組み込み編 】

#おさらい
[前回の記事](https://qiita.com/mijinco0612/items/588cb412b6a95d567e7e)でNuxtの準備ができました。続きを作っていきます。

# Nuxtにauth0を組み込む
今回は[auth0-Lock](https://github.com/auth0/lock)というライブラリを使用します。

```bash:実行コマンド
yarn add auth0-lock
```
```bash:実行結果
(node:4746) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 📃  Building fresh packages...
success Saved lockfile.
success Saved 28 new dependencies.
info Direct dependencies
└─ auth0-lock@11.7.2
info All dependencies
├─ asap@2.0.6
├─ ~~中略~~
└─ winchan@0.2.0
✨  Done in 32.76s.

```

## auth0-Lockを利用する
auth0-Lockを利用するために
Nuxtプラグインとしてplugins/auth0.jsにAuth0Utilクラスを実装する必要があります。
その際にauth0で設定したDomainとClientIDが必要になります。

![スクリーンショット 2018-06-26 15.48.22.png](https://qiita-image-store.s3.amazonaws.com/0/82787/1e0bd8df-cc4a-86ec-2613-beb0ec974c0a.png)

Domain及びClientIDは上記の画像のように

> auth0のダッシュボード > Applications > Nuxt(作成したアプリケーション) > Settings

で確認できます。
 



## plugins/auth0.jsを実装する前に
auth0.jsにclientID等をハードコードするのは避けたいので、環境変数から取得することします。


### auth0Domainとauth0ClientIDという環境変数を登録する。

```bash:.bashrcに登録する場合
vi ~/.bashrc
# 以下二行を.bashrcに追加
export auth0ClientID=******************** 
export auth0Domain=**********************

# :wqで保存後、以下を実行するかターミナルを再起動させる。
source ~/.bashrc
```

### [環境変数を取得](https://github.com/mijinco0612-self-improvement/Nuxt-auth0/commit/973b1fac82b0383a772c207ec0312beb0717b83e)


```javascript:nuxt.config.jsに以下を追加
  env: {
    auth0ClientID: process.env.auth0ClientID,
    auth0Domain: process.env.auth0Domain
  }
```

# [plugins/auth0.jsの実装](https://github.com/mijinco0612-self-improvement/Nuxt-auth0/commit/2913953befb6a910960ef1af7c4f794f696628e2)
```javascript:auth0.js
import Auth0Lock from 'auth0-lock'

//環境変数に登録したDomainとClinentIDをenvから取得
const config = {
  clientID: process.env.auth0ClientID,
  domain: process.env.auth0Domain
}

class Auth0Util {
  showLock(container) {
    const lock = new Auth0Lock(
      config.clientID,
      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, inject) => {
  inject('auth0', new Auth0Util);
}
```
##[nuxt.config.jsにpluginsを追加](https://github.com/mijinco0612-self-improvement/Nuxt-auth0/commit/61145d66ffed60d410797224ea2c16b0fe7fcd23#diff-7d1641065fb3365f32d1446a034d5609)
```javascript:nuxt.config.js
mode: 'spa',
plugins: ['~/plugins/auth0.js'] //追加
```
injectを利用することでVueコンポーネント内でthis.$auth0経由で呼び出しができるようになります。

## [Loginページを作成](https://github.com/mijinco0612-self-improvement/Nuxt-auth0/commit/3c595be16e1dbefe4da0bdc8f190a0ad67900b86)
```vuejs:login.vue
<template>
  <div id="show-auth"/>
</template>
<script>
  export default {
    mounted() {
      this.$auth0.showLock("show-auth");
    }
  };
</script>
<style scoped>
  #show-auth {
    margin-top: 20px;
  }
</style>
```

# [callbackページを作成](https://github.com/mijinco0612-self-improvement/Nuxt-auth0/commit/ab8e5d05fc66207787cb1d1d3b5e14dbd375ea39#diff-8d06de021515765630450ca12882c099)
```vuejs:callback.vue
<template>
  <p>Signing in...</p>
</template>
```

#callback URLを許可する
![image.png](https://qiita-image-store.s3.amazonaws.com/0/82787/d0491bb2-85d3-60d2-f77b-5bbf461d0512.png)

```bash:AllowedCallbackURLsに追加
http://localhost:3333/callback
```
```bash:AllowedWebOriginsに追加
http://localhost:3333
```

## まとめ
ここまでauth0を利用してgoogleでユーザ認証ができるようになりました。
[次回はSpringとauth0を使用してサーバサイドを構築します。](https://qiita.com/mijinco0612/items/c564b80a491e4065213e)



# 参考資料
- [環境変数の取得方法](https://ja.nuxtjs.org/api/configuration-env/)
- [ClientIDの取扱い](https://community.auth0.com/t/client-id-vs-secret/9558)
- [PATHを通すために環境変数の設定を理解する ](https://qiita.com/soarflat/items/d5015bec37f8a82543809)