このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

Archives Details

Nuxt.js と auth-module (@nuxtjs/auth)で、JWT(JSON Web Tokens)& OAuth 認証 ログイン

JavaScript

2019.02.21

どもです。

いやぁ。Nuxt js扱っていますか?

私はもっぱら AdobeのExtend Script漬けの日々です。

まぁ、それは良いとして、今回はNuxt.jsで、「JWT(JSON Web Tokens)& OAuth 認証 ログイン」をラクラクに実装できる「auth-module (@nuxtjs/auth)」についてです。

auth-module (@nuxtjs/auth)とは?

auth-moduleとはなんぞや?

ってところですが、auth-moduleはNuxt-Community が提供していまして、JWT(JSON Web Tokens)の認証や OAuth 認証 ログインなどが、煩雑な設定やコードを記述せずに簡単に組み込むことができるライブラリとなっております。

SPAでの認証認可(主に認可トークン)は、JWTで実装を検討されている方も多いのではと。

一からJWTやOAuth 認証などを実装するとなると、ちょっと面倒ですが、こちらのモジュールを利用すればラクラクに実装が可能となっております。

GitHub

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

 

 

ソーシャルログインは、現時点で Facebook, GitHub, Google, Auth0などが用意されていて、エンドポイントや最低限のスコープがライブラリ内で設定されています。

それらは、クライアントID/Secretなどを設定するだけで簡単に実装することができます。

超絶便利。

それでは、早速使用していきましょう。

auth-moduleを使ってみる。

auth-moduleは、予め exampleが用意されていますので、GitHubからクローンしてexampleを動かして見てみようかと思います。

GitHub examples

https://github.com/nuxt-community/auth-module/tree/dev/examples/demo

まずは、Gitクローン

$ git clone git@github.com:nuxt-community/auth-module.git

作成されたディレクトリに移動。

$ cd auth-module/

yarnコマンドで、パッケージ類をインストール。

$ yarn install
$ yarn dev

はい。簡単。

これで「http://localhost:3000」をブラウザでアクセスすると以下のような画面が表示するかと思います。

auth-moduleは、デフォルトでCookieにセットされる設定となっておりますので、徐ろにCookieを確認。

ふむふむ。

それらしきものが追加されているのが確認できました。

それでは、ログインしてみましょう。

パスワードはデフォルトで「123」で設定されています。

また、Usernameは、任意の文字列が入力されていればオッケーです。

「Login」ボタンを押下すると、先程入力したユーザー名が表示し、ボタンが「Secure」と「Logout」に変更され、

ログインされた状態となります。

Secure」ボタンを押下し、Secureページに遷移すると、Stateが表示され、ユーザーの情報などを確認することができます。

デフォルトでは、JWT(JSON Web Tokens)は、クッキーに保存されるようです。

確認すると、「auth._token.local」と「auth._refresh_token.local」が存在するのが確認できます。

こちらの、JWT(JSON Web Tokens)の値をJWT.IOで確認してみます。

JWT.IO

https://jwt.io/

JWT(JSON Web Tokens)のデコードをサイトで行うことができますので、確認。

(Bearer%20は削除)

確認すると、先程ページで確認したstateのユーザー情報が確認することができます。

これで、JWTは、ユーザー情報とその他、HS256のアルゴリズムを用いられているのが確認できました。

ちなみに、component(JS)側で、auth-moduleのデータは「this.$auth」で参照することができ、先程ページで確認した、stateの情報は以下で参照することができます。

this.$auth.$state

その他にも、公式のドキュメントに記載しております。

https://auth.nuxtjs.org/

ユーザーデータ参照

// Access using $auth
this.$auth.user

vuexのStoreによる参照 

// Access using vuex
this.$store.state.auth.user

と、確認したところで、クッキーだと何かと宜しくないのもありますので、localStorageに変更してみます。

一旦「Logout」ボタン押下でログアウト。

yarn dev の起動を停止します。

コメントアウトされている「cokkie: false」をコメント解除し有効にします。

auth: { 
  // cookie: false, 
  // localStorage: false,
auth: { 
  cookie: false, 
  redirect: { callback: '/callback' },

再度、yarn devで起動。

$ yarn dev

クッキーを確認するところ、存在しないのが確認できました。

Chromeのインスペクタ > Application で、LocalStorageが確認できるので、見てみると。

諸々、追加されているのが確認できました。

ところが、何かエラーが出ている。。

なんだろう。。

というところ、エラーを確認すると、どうやらSPAで起動していなくSSRでの起動を行っていたようなので、「mode: ‘spa’」を、nuxt.config.jsに追記。

nuxt.config.js

mode: 'spa',

GitHub nuxt.config.js

https://github.com/nuxt-community/auth-module/blob/dev/examples/demo/nuxt.config.js

nuxt.config.jsを確認すると、serverMiddlewareの指定で、../api/auth.js を指定しているが確認できます。

serverMiddleware: ['../api/auth'],

また、「/api」のパスに対してプロキシが設定されているのも確認できます。

serverMiddleware: ['../api/auth'], 
modules: ['bootstrap-vue/nuxt', '@nuxtjs/axios', '@@'], 
axios: { proxy: true }, 
proxy: { 
  '/api': 'http://localhost:3000' 
},

こちらのライブラリのソースを確認すると、

https://github.com/nuxt-community/auth-module/blob/dev/lib/module/defaults.js#L62

どうやら、デフォルトのendpointsは、ログインに対して「/api/auth/login」のURL、ログアウトに対して「/api/auth/logout」、ユーザー情報に対しては「/api/auth/user」のURLが設定されているのが確認できます。

endpoints: {
  login: {
    url: '/api/auth/login',
    method: 'post',
    propertyName: 'token'
  },
  logout: {
    url: '/api/auth/logout',
    method: 'post'
  },
  user: {
    url: '/api/auth/user',
    method: 'get',
    propertyName: 'user'
  }
}

それでは、サーバーの処理である、auth.jsを確認していきましょう。

サーバーには「express」が用いられていて、’/api/auth’のルーティング(ネームスペース)が設定されている模様。

api/auth.js

// -- export app --
module.exports = {
  path: '/api/auth',
  handler: app
};

ログインに対しての処理を確認すると、パスワードが123で、ユーザーネームに文字列が含まれていたら処理が通過するように記述されています。

// [POST] /login
app.post('/login', (req, res, next) => {
  const { username, password } = req.body 
  const valid = username.length && password === '123'

ここで、accessTokenを生成して、レスポンス {token: { accessToken } } を返却しているが確認できます。

res.json({
  token: {
    accessToken
  }
})

「express」以外のRailsとか、サーバーを用いたときも同様に tokenを返却すれば良さそうですね。

続いて、「/user」の処理を確認すると、res.json({ user: req.user }) で、ユーザー情報を返却しているが確認できます。

こちらの「/user」の処理は、どうやらブラウザリロード時に走っているようです。

つまり、ブラウザリロード時にリクエストが飛んでくる形となっているようです。

app.get('/user', (req, res, next) => {
  // [GET] /user
  app.get('/user', (req, res, next) => {
    console.log(req.header('Authorization'));
    res.json({ user: req.user }) })

徐ろに、console.log(req.header(‘Authorization’)); で、ヘッダーのAuthorizationを確認できるようにして、ブラウザをリロードしてみると、Bearer JWTを確認できました。

Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6IjEyMzQ1IiwicGljdHVyZSI6Imh0dHBzOi8vZ2l0aHViLmNvbS9udXh0LnBuZyIsIm5hbWUiOiJVc2VyIDEyMzQ1Iiwic2NvcGUiOlsidGVzdCIsInVzZXIiXSwiaWF0IjoxNTUwNTkzMDc2fQ.qQLxVIMCYn1Cah5s4B4SkvENe_USb95mtnksSqNTT-0

初期設定では、リクエストボディのユーザー情報をただ返却している状態ですが、実際にサーバーに実装する際は、リクエストヘッダーのAuthorizationに、JWT形式のトークンがリクエストされてくるので、こちらを検証して認可する処理を書けば良さそうですね。

最後に/logout の処理を確認

app.post('/logout', (req, res, next) => {
  res.json({ status: 'OK' })

ソーシャルログイン

その他にも、ソーシャルログインとして、現時点で Facebook, GitHub, Google, Auth0などが用意されていて、それ以外にも実装することが可能のようです。

各ソーシャルログインの設定は、client_idなどの設定のみで実装できるようで、非常に手軽にOAuth 認証を実装することができます。

ソーシャルログインの設定箇所

https://github.com/nuxt-community/auth-module/blob/dev/examples/demo/nuxt.config.js#L28

ログイン後、LocalStorageを確認すると、各サービスのデータが生成されているのが確認できました。

といった具合に手軽にJWT(JSON Web Tokens)& OAuth 認証 ログインが実装できるモジュール「auth-module(@nuxtjs/auth)」を扱って見ました。

もっともっと、楽に認証認可周りを実装したいという方は、認証認可をまるっとおまかせできるAuth0を使ってみてはいかがでしょうか?

Auth0

https://auth0.com/jp/

有料のサービスではありますが、開発テストとして無料でも利用できます。

といった具合で、またぁまたぁ。

ではでは。

Comment

Related Article

Nuxt.js と auth-module (@nuxtjs/auth)で、JWT(JSON Web Tokens)& OAuth 認証 ログイン

2019.02.21

ブラウザフィンガープリントは、Cookieの代用となるのか? JSライブラリ Fingerprintjs2など。

2019.02.03

Vue.jsでSPA、Vuex使用するなら Nuxt.jsが超絶便利な件。

2018.12.23

nodeのない環境にnodeを導入(HTML5ゲームも提供)し続け、1年数ヶ月経過後、かなり開発環境が整ってきたお話。

2018.09.26

Vue.js + SSR (Universal JavaScript)環境を、「NUXT.js」でサクッと構築する方法。

2017.10.09

フロントエンド開発が捗る JSON Serverについて

2017.07.10

技術書、参考書のしおりには【BOOK DARTS】がオススメ!

2017.07.01

会社で npm Private導入して、1ヶ月で8個ほどパッケージ作成したお話。

2017.06.02

Vue.js が予想以上に良かったので、既存WordPressに導入。Vue.js (vue-class-component) + TypeScript + WordPress で作る、記事読み込み component 「実装編」

2017.03.26

Vue.js が予想以上に良かったので、既存WordPressに導入。Vue.js (vue-class-component) + TypeScript + WordPress で作る、記事読み込み component 「環境構築編」

2017.02.21

CATEGORY LIST

LATEST NEWS

CentOS MySQL(MariaDB) を バージョン10.3に yumでアップデート

MySQL

2019.03.22

Ubuntu 開発環境構築まとめ

ubuntu

2019.02.25

Nuxt.js と auth-module (@nuxtjs/auth)で、JWT(JSON Web Tokens)& OAuth 認証 ログイン

JavaScript

2019.02.21

HerokuでRailsをビルド buildpack、Rubyバージョンでエラー

エラー

2019.02.13

ブラウザフィンガープリントは、Cookieの代用となるのか? JSライブラリ Fingerprintjs2など。

JavaScript

2019.02.03

CPUの創りかた TD4 購入(必要)パーツ一覧

電子工作

2019.01.21

あけましておめでとうございます(かなり遅め)

イベント

2019.01.12

Vue.jsでSPA、Vuex使用するなら Nuxt.jsが超絶便利な件。

JavaScript

2018.12.23

2018年 Docker 使い方 まとめ その3

Docker

2018.12.17

2018年 Docker 使い方 まとめ その2

Docker

2018.12.16

2018年 Docker 使い方 まとめ その1

Docker

2018.12.15

macOS Mojaveにアップデート vagrantで、failed MSpanList_Insert 0x1e3000 0x170f8379be41 0x0 エラー発生 vagrantが起動しない件

エラー

2018.12.15

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、主に、ゲーム制作中心に港区六本木界隈で活動中。

FOLLOW US