Nuxt.jsのAuth Moduleを利用して、GitHubとGoogleのOauth認証によるログイン機能を実装してみます。
Nuxt.jsによるプロジェクト作成に関しては下記ページをご参照下さい。
Nuxt.js入門 [$route.params][layouts]
インストールと設定
モジュールをインストールします。
|
1 |
$ npm i @nuxtjs/auth @nuxtjs/axios |
package.jsonのdependenciesを確認。
|
1 2 3 4 5 |
"dependencies": { "@nuxtjs/auth": "^4.8.1", "@nuxtjs/axios": "^5.6.0", "nuxt": "^2.0.0" }, |
Auth ModuleはVuex Storeの機能を利用しています。この機能を有効化するために、storeディレクトリ内に一旦index.jsファイル（内容は空でも良い）を作成しておいて下さい。Nuxt.jsのStoreについては関連ページをご覧下さい。
関連ページ
Nuxt.jsのStoreによるデータ保存 [vuex-persistedstate][js-cookie]
次にnuxt.config.jsを編集します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
modules: [ '@nuxtjs/axios', '@nuxtjs/auth' ], auth: { redirect: { login: '/login', //未ログイン状態でアクセスした場合のリダイレクト先 logout: '/', //ログアウト後の遷移先 callback: '/callback', //コールバックルート home: '/home' //ログイン後の遷移先 }, strategies: { github: { client_id: '◯◯◯', client_secret: '◯◯◯' }, google: { client_id: '◯◯◯', }, } }, |
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
|
1 2 3 4 5 6 |
<template> <div> <h1>トップ画面</h1> <nuxt-link to="/login">ログイン画面へ</nuxt-link> </div> </template> |
トップ画面であると同時に、ログアウト（ログアウトボタンを押下）後に遷移する画面です。
pages/login.vue
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<template> <div> <h1>ログイン画面</h1> <button @click="githubAuthenticate">GitHub</button> <button @click="googleAuthenticate">Google</button> </div> </template> <script> export default { methods: { githubAuthenticate() { this.$auth.loginWith("github"); }, googleAuthenticate() { this.$auth.loginWith("google"); } } }; </script> |
$auth.loginWith()の引数には、nuxt.config.jsのauth>strategiesのプロバイダー名を指定します。
pages/callback.vue
|
1 2 3 4 5 6 |
<template> <div> <h1>callback</h1> <p>少々お待ち下さい</p> </div> </template> |
http://localhost:3000/callback を各プロバイダのOAuth設定画面にて登録しておきます。
GitHubの画面
Googleの画面
pages/home.vue
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<template> <div> <h1>ログインしました</h1> <P>こんにちわ{{ $store.state.auth.user.name }}さん</P> <!-- <P>こんにちわ{{ $auth.$state.user.name }}さん</P> --> <button @click="logout">ログアウト</button> </div> </template> <script> export default { middleware: "auth", methods: { logout() { this.$auth.logout(); } } }; </script> |
4・5行目
$store.state.authもしくは$auth.$stateには、返ってきたオブジェクトが格納されています。
12行目
認証ルートを設定しています。つまり、このミドルウェアを設定すると、ログインしていない状態でその画面に遷移するとログイン画面へリダイレクトさせます。もしアプリケーション全体でまとめて認証ルートにしたい場合は、nuxt.config.jsに下記追記をし、逆に個別のページコンポーネントにおいて「auth: false」を設定することによって認証ルートから外します。
|
1 2 3 |
router: { middleware: ['auth'] } |
参照ページ
https://nuxt-api-state.lec.cafe/5.認証/#auth-modulesの設定
15行目
$auth.logout()でログアウトします。
