Nuxt.jsのAuth ModuleでOauthによるログイン機能実装

2019年8月30日

Nuxt.jsのAuth Moduleを利用して、GitHubとGoogleのOauth認証によるログイン機能を実装してみます。

 

Nuxt.jsによるプロジェクト作成に関しては下記ページをご参照下さい。

 

Nuxt.js入門 [$route.params][layouts]

 

 

 

インストールと設定


 

モジュールをインストールします。

 

package.jsonのdependenciesを確認。

 

Auth ModuleはVuex Storeの機能を利用しています。この機能を有効化するために、storeディレクトリ内に一旦index.jsファイル(内容は空でも良い)を作成しておいて下さい。Nuxt.jsのStoreについては関連ページをご覧下さい。

 

関連ページ

Nuxt.jsのStoreによるデータ保存 [vuex-persistedstate][js-cookie]

 

 

次にnuxt.config.jsを編集します。

redirect

ログイン関連のリダイレクト先を指定しています。本記事では、index.vue・login.vue・callback.vue・home.vueのページコンポーネントを作成します。上記では、ログインするとhome.vueへ、ログアウトするとindex.vueへ、もし未ログイン状態でhome.vueにアクセスするとlogin.vueへリダイレクトされるように設定しています。

 

参照ページ

https://nuxt-api-state.lec.cafe/5.認証/#auth-modulesの設定

 

strategies

Auth Moduleでは、プロバイダーとしてAuth0・Facebook・GitHub・Google・Laravel Passportが選択(設定)できるようです。各プロバイダーで取得したid等を設定していきます。本記事ではGitHubとGoogleを利用しています。※スクラッチで作成した認証APIもAuth Moduleを利用して設定できますが、本記事では説明しません。

 

参照ページ(GitHubの場合)

https://auth.nuxtjs.org/providers/github.html

 

 

 

ページコンポーネントの作成


 

上述したように、index.vue・login.vue・callback.vue・home.vue、4つのページコンポーネントを作成していきます。

 

pages/index.vue

トップ画面であると同時に、ログアウト(ログアウトボタンを押下)後に遷移する画面です。

 

pages/login.vue

$auth.loginWith()の引数には、nuxt.config.jsのauth>strategiesのプロバイダー名を指定します。

 

pages/callback.vue

http://localhost:3000/callback を各プロバイダのOAuth設定画面にて登録しておきます。

 

GitHubの画面

 

Googleの画面

 

pages/home.vue

4・5行目

$store.state.authもしくは$auth.$stateには、返ってきたオブジェクトが格納されています。

 

12行目

認証ルートを設定しています。つまり、このミドルウェアを設定すると、ログインしていない状態でその画面に遷移するとログイン画面へリダイレクトさせます。もしアプリケーション全体でまとめて認証ルートにしたい場合は、nuxt.config.jsに下記追記をし、逆に個別のページコンポーネントにおいて「auth: false」を設定することによって認証ルートから外します。

 

参照ページ

https://nuxt-api-state.lec.cafe/5.認証/#auth-modulesの設定

 

15行目

$auth.logout()でログアウトします。

 

 

 

 

LINEで送る
Pocket

Copyright © 2019 思考の葉 All Rights Reserved.  プライバシーポリシー