SMARTCAMP Engineer Blog

スマートキャンプ株式会社(SMARTCAMP Co., Ltd.)のエンジニアブログです。業務で取り入れた新しい技術や試行錯誤を知見として共有していきます。

Nuxt.jsとAuth0でモダンなソーシャルログインを実装してみる

Vue.js Nuxt.js Auth0 フロントエンド

f:id:smartcamp-inoue:20190531171747j:plain

エンジニアの井上です！

今回は私が最近気になっていたAuth0とNuxt を使って簡単な認証機能を作っていきたいと思います。

認証をどのように実装するかは皆さん結構悩まれているかなと思います。

Auth0は様々な既存プロバイダと自由に連係可能かつマルチデバイス対応、多要素認証に対応しているなどのメリットがあり、かつ導入がとても簡単そうなので個人的に注目しています！

Auth0とは

Auth0 は認証基盤サービス (IDMaaS) です。マルチデバイス対応しOpenID Connect、JWT、OAuthなどのプロトコルも使用可能なのでとても導入しやすいものになっています。

また、Social連携の多さも魅力の1つで基本的に必要なものは全て揃っているかと思います。 そして、多要素認証も対応しており色々試したくなると感じるサービスです。

f:id:smartcamp-inoue:20190531021911p:plain

Nuxtとは

Vueフレームワークとして最近かなり有名になっていますね。

私としては設定を気にせず開発に集中できること、SSRが主な強みとして感じています。

他の公式にも挙げられている機能としては下記のようなものがあります！

  • Vue ファイルで記述できること（*.vue）
  • コードを自動的に分割すること
  • サーバーサイドレンダリング
  • 非同期データをハンドリングするパワフルなルーティング
  • 静的ファイルの配信
  • ES2015+ のトランスパイレーション
  • JS と CSS のバンドル及びミニファイ化
  • <head> 要素（<title>、<meta> など）の管理
  • 開発モードにおけるホットリローディング
  • プリプロセッサ: Sass, Less, Stylus など
  • HTTP/2 push headers ready
  • モジュール構造で拡張できること

Auth moduleとは

Nuxtで認証を簡単に導入するための公式モジュールです。

auth0の認証でも利用することができます！

Nuxt middlewareとは

ページやそのページグループがレンダリングされる前に実行されるカスタム関数を定義することができます。

それぞれSPAとユニバーサルモードで動きが異なります。

SPA モード: 最初のリクエスト時、他のルートへ移動したとき
ユニバーサルモード: 初期のリクエスト時、ページの再読込み時、他のルートへ移動したとき

ミドルウェアは下記の順に実行されます:

  1. nuxt.config.js
  2. レイアウト
  3. ページ

このmiddlewareを利用することで簡単にログインチェックを実装できます。

実際にAuth0で認証作ってみる

Nuxt でプロジェクト作成

まずはNuxtプロジェクトを作っていきます。

下記コマンドを実行し

$ npx create-nuxt-app <project-name>

質問されるので下記のような設定になるよう回答していきます。

? Project name authTestApp
? Project description My astounding Nuxt.js project
? Use a custom server framework none
? Use a custom UI framework Element UI
? Choose rendering mode Universal
? Use axios module yes
? Use eslint yes
? Use prettier yes
? Author name myname
? Choose a package manager yarn

一通り回答したら、下記のコマンドでNuxt環境を立ち上げてみます。

yarn run dev

すると下記のような画面が表示されます。 f:id:smartcamp-inoue:20190531141533p:plain

Auth Moduleを追加する

作ったNuxtアプリケーションに、Auth Moduleを入れていきます。

Auth Moduleの導入作業は２つでyarnでの追加とNuxtのconfigに追加するのみです。

yarn add @nuxtjs/auth

次にnuxt.config.jsにauthを追加します。

//nuxt.config.js

  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/auth', // 追加
  ]

続いて同じnuxt.config.jsに認証周りのルーティング設定をしてきます。

コールバックURLはプロバイダからの認証コールバックに使用します。

//nuxt.config.js

  auth: {
    redirect: {
      login: '/',  // 未ログイン時のリダイレクト先
      logout: '/logout',  // ログアウト処理を実行した直後のリダイレクト先
      callback: '/callback',  // コールバックURL
      home: '/mypage',  // ログイン後に遷移するページ
    },
  }

Auth0を設定する

続いて Auth0の設定を追加してきます。

手順としては、Auth0はアカウントを作成すると認証用のドメインやキーが発行されるので、それをauth moduleへ追加していきます。

Auth0でアカウントを発行すると下記の画面でDomainとClient IDが表示されます。

こちらをnuxt.config.jsに追記していきます。

f:id:smartcamp-inoue:20190531132058p:plain
auth0

そして、同じ画面の下の方にAllowed Callback URLsという項目に下記のように先程設定したコールバックURLを設定します。

f:id:smartcamp-inoue:20190531132649p:plain
callback

設定は先ほどnuxt.config.jsに追加したauth部分に下記のよう追加するのみです。

//nuxt.config.js

  auth: {
    strategies: {
        auth0: {
          domain: 'Domain',  // 追加
          client_id: 'Client ID'  // 追加
        }
    },
    redirect: {
      login: '/login',  // 未ログイン時のリダイレクト先
      logout: '/logout',  // ログアウト処理を実行した直後のリダイレクト先
      callback: '/callback',  // コールバックURL
      home: '/mypage',  // ログイン後に遷移するページ
    },
  },

なんと、これでAuth0の設定全て終わりです！

認証ページを作成する

続いて認証ページを追加していきます。

Nuxtではpageフォルダ配下にvueファイルをおくと、ファイル名に合わせてルーティングを自動的に設定してくれます。

まずは、全体のレイアウトから先に作っていきます。

// layout/deault.vue

<template>
  <div>
    <div class="line"></div>
    <el-menu
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-menu-item><nuxt-link to="/">Home</nuxt-link></el-menu-item>
      <el-menu-item><nuxt-link to="/mypage">Mypage</nuxt-link></el-menu-item>
      <el-menu-item><nuxt-link to="/login">Login</nuxt-link></el-menu-item>
    </el-menu>
    <el-card>
      <el-container fluid fill-height>
        <nuxt/>
      </el-container>
    </el-card>
  </div>
</template>

続いてログインページですloginWithAuthZeroでauth0を使用してログイン処理するようにしています。

// page/loging.vue

<template>
  <el-container>
    <el-form>
      <el-button type="primary" @click="loginWithAuthZero">Auth0でログイン 
      </el-button>
    </el-form>
  </el-container>
</template>

<script>
export default {
  methods: {
    loginWithAuthZero: function () {
      this.$auth.loginWith('auth0')
    }
  }
}
</script>

そして先ほどAuth0で設定したcallbackページです。

// page/callback.vue

<template>
  <el-container>
    <p>Please Wating・・・・</p>
  </el-container>
</template>

最後にログイン後にユーザー名を表示するmypageです。

// page/mypage.vue

<template>
  <el-container>
    <h1>こんにちは、{{this.$auth.$state.user.family_name}}さん!</h1>
  </el-container>
</template>

ログインしてみる

これでログイン処理が出来上がったかと思いますので

yarn run dev

のコマンドを実行しhttp://localhost:3000/loginにアクセスしてみましょう。

すると下記のような画面が表示されるかと思います。

f:id:smartcamp-inoue:20190531134545p:plain

Auth0でログインボタンをクリックすると下記のような画面が出てソーシャルログインが可能になります。

f:id:smartcamp-inoue:20190531134642p:plain

そしてログインすると、callback画面が一瞬見えたのちmypageへ遷移しユーザ名が表示されます。

f:id:smartcamp-inoue:20190531134947p:plain

これでログイン処理は完成しました！

middlewareを使用してログインチェックする

ログイン処理は完成しましたが、このままでは特にページに制限をかけていないため、意味がありません...。

なのでログインしたユーザのアクセス制御を Nuxt middlewareを使ってしていこうと思います。

middlewareではページレンダリングされる前の関数を定義できるということもあり、よくアクセス制御やログ周りなどで使用されています。

修正と追加に関しては下記の2つをやるだけです。

// middleware/auth.js

export default function({store, redirect}) {
  if (!store.state.auth.loggedIn) {
    redirect('/login');
  }
}

nuxt configに下記を追記

// nuxt.config.js

  router: {
    middleware: 'auth'
  }

これでログインしていないい状態でhttp://localhost:3000/mypageにアクセスしてみましょう。

するとmiddlewareのチェックによりlogin画面にリダイレクトされます！

終わりに

今回はNuxt.jsとAuth0認証機能を作ってみました。

試しにAuth0触ってみたい、Nuxtで遊びたいという時の1つの参考になれば嬉しいなと思います！