#おさらい
前回の記事でNuxtの準備ができました。続きを作っていきます。

Nuxtにauth0を組み込む

今回はauth0-Lockというライブラリを使用します。

実行コマンド

yarn add auth0-lock

実行結果

(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が必要になります。

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

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

で確認できます。

plugins/auth0.jsを実装する前に

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

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

.bashrcに登録する場合

vi ~/.bashrc
# 以下二行を.bashrcに追加
export auth0ClientID=******************** 
export auth0Domain=**********************

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

環境変数を取得

nuxt.config.jsに以下を追加

  env: {
    auth0ClientID: process.env.auth0ClientID,
    auth0Domain: process.env.auth0Domain
  }

plugins/auth0.jsの実装

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を追加

nuxt.config.js

mode: 'spa',
plugins: ['~/plugins/auth0.js'] //追加

injectを利用することでVueコンポーネント内でthis.$auth0経由で呼び出しができるようになります。

Loginページを作成

<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ページを作成

callback.vue

<template>
  <p>Signing in...</p>
</template>

#callback URLを許可する

AllowedCallbackURLsに追加

http://localhost:3333/callback

AllowedWebOriginsに追加

http://localhost:3333

まとめ

ここまでauth0を利用してgoogleでユーザ認証ができるようになりました。
次回はSpringとauth0を使用してサーバサイドを構築します。