GitHub - takabus/laravel-sanctum-nuxt-auth-sample: SPA authorization sample with Laravel Sanctum and NuxtJS official auth module.

SPA authorization sample with Laravel Sanctum and NuxtJS official auth module. - takabus/laravel-sanctum-nuxt-auth-sampl...

github.com

Laravel SanctumとNuxtJSによるSPA認証については、以前チュートリアル記事をアップしていますので、ご活用ください。

Laravelとnuxt/authでSPA認証！ログイン機能を実装しよう！（第1回 バックエンド編）

Laravel とフロントエンドフレームワーク「Nuxt.js」を使い、SPA認証（ログイン機能）をできるだけ簡単に実装する方法を紹介していきます。第1回はLaravel Sanctumを使ったSPA認証対応のバックエンド構築の手順について紹介していきます。

takabus.com

2022.04.18

Laravelとnuxt/authでSPA認証！ログイン機能を実装しよう！（第2回 フロントエンド編）

Laravel とフロントエンドフレームワーク「Nuxt.js」を使い、SPA認証（ログイン機能）をできるだけかんたんに実装する方法を紹介していきます。

takabus.com

2022.07.29

クローンする

まずはGitHubからクローンしてください。

git clone https://github.com/takabus/laravel-sanctum-nuxt-auth-sample.git

インストール（フロントエンド）

必要なライブラリをインストールします。

frontディレクトリでコンソールを起動し、npm installを実行します。

cd front
# フロントエンド（NuxtJS）の依存ライブラリをインストール
npm install

インストール（バックエンド）

backディレクトリに移動し、composer installを実行します。

cd back
# バックエンド（Laravel）の依存ライブラリをインストール
composer install

.env.exampleファイルをコピーして、.envファイルを作成します。

cp .env.example .env

.env.exampleにはLaravel Sanctumの動作に必要な変数やテストユーザーを含むSQLiteデータベースへの接続設定が含まれています。詳しくはコメントをご確認ください。

APP_KEYを生成します。

php artisan key:generate

以上でセットアップは完了です。

さわってみよう

Windowsの場合はstart.batを実行すると、バック・フロントエンドの開発サーバーが起動します。

ブラウザでフロントエンドの開発サーバー（http://localhost:3000/）にアクセスすると、SPA認証をお試しいただけます。

あらかじめテストユーザー（ID：t@localhost パスワード：password）を登録してありますので、ログインしてみてください。

• 開発サーバーの起動
• Chromeで開発サーバーにアクセスする
• VS Codeの起動

まで全部やってくれるようにする。

ソースコード

;NPMを実行
start npm run dev 
;Chromeを開く
start chrome http://localhost:3000/
;VS Codeを開く
start code

NuxtJSのディレクトリに配置する

NuxtJSプロジェクトのディレクトリに上記コードをbatファイルとして配置する。

自分はstart.batなどにしている。

あとは作成したバッチファイルをダブルクリックするだけで、開発環境が立ち上がってくれる。

Bootstrap Iconsを使えるようにしよう

まずはBootstrap Iconsを使えるようにしていきます。

はじめにBootstrap Iconsをインストールします。

npm i bootstrap-icons

つづいて、すべてのページでアイコンを利用できるようにするためのプラグインを作成します。

NuxtJSプロジェクトのトップにpluginsディレクトリを作成し、bootstrap-vue-icon.jsというファイルを作成します。

作成したbootstrap-vue-icon.jsに以下のコードを追加します。

import Vue from 'vue'
import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue'
Vue.use(BootstrapVue)
Vue.use(BootstrapVueIcons)

nuxt.config.jsを開き、作成したプラグインを読み込むようにします。

  plugins: [
    '@plugins/bootstrap-vue-icon.js'
  ],

これですべてのページでBootstrapVueのアイコンが利用できるようになります。

アイコンを利用する

BootstrapVueを利用している場合は、b-icon-につづけてアイコンの名前を指定したタグを配置すると、アイコンを表示することができます。

例えばemoji-smileというアイコンを利用したい場合は、<b-icon-emoji-smile />とすればOKです。

<b-icon-emoji-smile></b-icon-emoji-smile>

もしくはb-iconで指定することもできます。

<b-icon icon="emoji-smile"></b-icon>

Emoji smile

Official open source SVG icon library for Bootstrap

icons.getbootstrap.com

利用できるアイコンはBootstrap Iconsのホームページから調べることができます。

Bootstrap Icons

Official open source SVG icon library for Bootstrap

icons.getbootstrap.com

アイコンのサイズを変えるには？

アイコンのサイズはstyleでフォントサイズを変更すると変えることができます。

<b-icon-emoji-smile style="font-size:1.5rem"></b-icon-emoji-smile>

同様に色を変えるにはcolorを変更すればOK。文字列の装飾と同じ要領でスタイリングできます。

Can't resolve 'sass-loader' in ...

これはSCSSに対応したプリプロセッサがインストールされていないためです。

解決法

次のコマンドを実行し、sass-loaderをインストールすると解決できます。（NuxtJS Ver.2の場合）

npm install --save-dev pug pug-plain-loader
npm install --save-dev sass sass-loader@10

詳細はNuxtJSの公式サイトに記載されていますので、確認してみるとよいでしょう。

Configuration

By default, Nuxt is configured to cover most use cases. This default configuration can be overwritten with the nuxt.conf...

nuxtjs.org

sass-loader@10と必ずバージョンを指定する必要があります。これにて無事エラーが解決しました。

ある日のトラブル

ある日、Nuxt.jsで制作したサイトで下位のページからトップページに遷移しようとすると、ページが表示されなくなるというトラブルに悩まされました。

このときコンソールには次のようなエラーが。

Cannot read properties of null (reading 'destroy')

Cannot read properties of undefined (reading '_isDestroyed')

どうやってデバッグしていくのでしょうか。

まずは指摘されたリンクをクリック！

まずエラーが起こっている関数名に注目しましょう。

ここではdestroyという単語が目に入ります。エラーを見るにdestoryイベントに問題があるようです。

しかし、destroyイベントは自分が書いたソースコード内では使用しておらず、なぜ発生しているのかがわりませんでした。

こういうときは、とにかくコンソールに表示されているリンクをクリックするようにします。

リンクをクリックすると、DevToolがSourceタブに切り替わり、エラーが発生している箇所がハイライトされます。

ソースがminimumizeされていて見づらい場合は、ソースコードの左下にある｛｝をクリックしましょう。コードがフォーマットされ、見やすくなります。

コンソールに表示されているリンクをクリックしていき、原因を探します。これを繰り返していくと、いずれ根本的な原因となっている部分にたどり着きます。

怪しいワードが出てきました。

splideというのはこのサイトで使用していたモジュール「Splide.js」のことでしょう。使用しているプラグインやモジュールの名前を頭に浮かべながら、コードを読み解いていくのがコツです。

Splide.jsで何らかのエラーが起こっていることが推察されます。

あとはSplide.jsとエラー内容をあわせてGoogle検索してみます。

原因と思われるSplide.jsのAPIドキュメントを見てみると、destoryという設定が用意されています。試しにfalseに設定してみました。

すると、エラーが解消！無事バグを修正することができました。

わかりにくいエラーこそ着実につぶそう

Nuxt.jsはSSRなどの複雑なしくみのため、エラーが発生しても原因がわかりにくいことが多いです。

DevToolのコンソールに表示されているエラーリンクをひとつひとつたどっていくのが、結局は一番早いことが多いため、紹介してみました。経験的にはプラグインやモジュールによるエラーが多いので、Nuxt自体のバグを疑う前に自分で追加したモジュールまわりを疑ってみるといいでしょう。

Laravelとnuxt/authでSPA認証！ログイン機能を実装しよう！（第1回 バックエンド編）

Laravel とフロントエンドフレームワーク「Nuxt.js」を使い、SPA認証（ログイン機能）をできるだけ簡単に実装する方法を紹介していきます。第1回はLaravel Sanctumを使ったSPA認証対応のバックエンド構築の手順について紹介していきます。

takabus.com

2022.04.18

GitHubにサンプルを公開していますので、ぜひご活用ください。

【nuxt/authｘLaravel SanctumでSPA認証】サンプルを公開しました

GitHubにNuxtJS（nuxt/auth）とLaravel Sanctumのサンプルプロジェクトを公開しました。Laravel Sanctumとnuxt/authによるSPA認証をすぐに体験できます。Laravel SanctumとNuxtJSによるSPA認証については、以前チュートリアル記事をアップしていますので、ご活用ください。

takabus.com

2022.09.10

Laravel SanctumとNuxt/AuthによるSPA認証を体験いただくことができます。

(2022/9/11追記)

nuxt/authのインストール

まずは、nuxt.jsプロジェクトにnuxt/authをインストールしましょう。

npm install --save-exact @nuxtjs/auth-next

nuxt/authは、Nuxt.jsのプロジェクトに認証に関する処理をかんたんに実装することができるモジュールです。第1回で構築したLaravel Sanctumだけではなく、OAuthやLaravel JWT、Laravel Passportなどのさまざまな認証バックエンドと連携させることができます。

npm init nuxt-app <project-name>

APIとの通信に使用するため、nuxt/axiosもインストールしておきましょう。

npm install @nuxtjs/axios

nuxt.config.jsを編集し、nuxt/authとnuxt/axiosをモジュールに追加します。

{
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/auth-next'
  ],
  auth: {

  }
}

ついでにauthセクションも追加しておきました。あとで使います。

nuxt/authのセットアップ

次に、nuxt/authのセットアップを行っていきます。Laravel Sanctumで構築したバックエンドにログインし、保護されたルートにアクセスできるようにしていきます。

ストラテジー（strategy）を作成する

nuxt/authでは、認証に関わる設定をストラテジー(strategy)として設定していきます。

ストラテジーは同時に複数定義することができます。例えば、APIサーバーのほか、OAuthを用いた連携ログインも可能にするなど、複数のログイン方法を用意することも可能となっています。

ここではシンプルに第1回で構築したバックエンド（Laravel Sanctum）にログインするためのストラテジーだけを作成していきます。

nuxt.config.jsのauthセクションにstrategiesというセクションを追加し、任意の名前のストラテジーを作成します。

    auth: {
        strategies: {
            laravelApi: {
                provider: 'laravel/sanctum',
            },
        }
    },

ここでは、“laravelApi”という名前のストラテジーを作成し、プロバイダーにLaravel Sanctumを指定しました。

エンドポイントを設定しよう

バックエンドのベースURLと認証に関わるルートを設定していきます。

    auth: {
        redirect: {
            login: '/auth/login',
        },
        strategies: {
            laravelApi: {
                provider: 'laravel/sanctum',
                url: 'http://localhost:8000',
                // endpoints: {
                //   login: { url: '/api/login', method: 'post' },
                //   logout: { url: '/api/logout', method: 'post' },
                //   user: { url: '/api/user', method: 'get' }
                // }
            },
        }
    },

urlにバックエンドのURLを指定します。ここではLaravelのローカルサーバー(http://localhost:8000)を指定しています。

また、endpointsにログイン・ログアウト・ユーザー情報を取得するためのAPIへのパスを指定しておきます。デフォルトでは以下のように設定されています。

今回は、第1回でroutes/web.phpに上記と同じルートを指定しておいたため、endpointsに関する設定は不要です。デフォルトと異なるルートを設定している場合は、endpointsにパスを指定することにより、任意のエンドポイントを使用できます。

リダイレクトの設定

次に、リダイレクトに関わる設定を行います。

nuxt/authを導入すると、認証が必要なページへのアクセスを制限することができます。ログインされていない状態で認証が必要なページへアクセスされた場合、自動的にログインページへリダイレクトさせることができます。

リダイレクト先には任意のページを指定することができます。nuxt.config.jsから設定していきます。

auth: {
    redirect: {
        login: '/auth/login',
    },
    strategies: {
        laravelApi: {
            provider: 'laravel/sanctum',
            url: 'http://localhost:8000',

    }
}, 

authセクションにログインページのパスを指定します。上のサンプルでは、ログインページがpages/auth/login.vueにあるものとして設定してみました。

そして、routerにauthミドルウェアを適用します。

router: {
     mode: "hash",
     base: process.env.BASE_URL,
     middleware: ['auth']
},

routerのミドルウェアへの登録を忘れると、リダイレクトが動作しませんので要注意です。なお、開発環境で一時的にリダイレクトさせないようにしたいときは、ミドルウェアから外してやればOKです。

axiosからAPIへアクセスできるようにする

以上で認証に関するセットアップのほとんどが完了です。ログインやログアウトはすでに可能な状態になっています。

しかし、まだこの状態ではバックエンドのAPIにアクセスすることはできません。ログインが済んでいたとしても、axiosからsanctumでガードされたAPIにアクセスしようとすると、401 Unauthorizedエラーが発生してしまいます。

これはnuxt/authでログインし取得できたCSRFトークンやクッキーなどの資格情報が、axiosからのリクエストに含まれていないことが原因です。

axiosにはcredentialsというオプションがあり、これを有効にすることで資格情報をリクエストと一緒にサーバーへ送ることができます。nuxt.config.jsからオプションを適切に設定することで、正常にAPIへアクセスできるようになります。

axios: {
    baseURL: 'http://localhost:8000',
    credentials: true
},

credentialsを有効にすると、CSRFトークンの取得・更新処理も自動的に行なってくれるようになります。明示的にトークンの更新を行う必要もなくなるので、大変便利なオプションです。

オプションを設定したら、npmの開発サーバーを再起動しておきましょう。

Ctrl+C
$ npm run dev

ログインページをつくって、いざログイン！

さあ、これで準備は万端です。いよいよ実際にログインしてみましょう。

pagesディレクトリにログインページ(pages/auth/login.vue)を作成します。

<template>
    <input type="text" v-model="id" placeholder="id">
    <input type="password" v-model="password" placeholder="パスワード">
    <button @click="login">ログイン</button>
</template>

<script>
    export default {
        auth: false,
        data() {
            return {
                id: null,
                password: null
            }
        },
        methods: {
            login() {
                try {
                    // ログインする
                    const response = await this.$auth
                        .loginWith("laravelApi", {
                            data: {
                                id: this.id,
                                password: this.password
                            }
                        })
                        .then(() => {
                            // ログインに成功したら、/にページ遷移
                            window.alert("ログインしました");
                            this.$router.push("/");
                        });
                    console.log(response);
                } catch (error) {
                    // ログインに失敗したら、コンソールに出力する
                    window.alert("ログイン失敗");
                    console.log(error);
                }
            }
        }
    }
</script>

作成したページはこんな感じです。IDとパスワードを入力し、[ログイン]ボタンをクリックすると、nuxt/authによりログインが施行されるようにしました。

ここではわかりやすくするため、最低限の処理を実装しています。実際の案件では、バリデーションなども適切に実装するようにしましょう。

ログインを施行するには、$auth.loginWithメソッドを使います。

// ログインする
const response = await this.$auth
    .loginWith("laravelApi", {
        data: {
            id: this.id,
            password: this.password
        }
    })
    .then(() => {
        // ログインに成功したら、/にページ遷移
        window.alert("ログインしました");
        this.$router.push("/");
    });

第1引数にストラテジー名(ここではlaravelApi)、第2引数にログインに使用するIDとパスワードを指定します。ログインボタンがクリックされたら実行されるよう、[ログイン]ボタンにclickイベントを設定しておきます。ログインに失敗した場合はcatchで受けて、”ログイン失敗”というアラートを表示させています。

ちなみにauth:falseという部分は、ログインしていなくてもページを表示できるようにするためのものです。デフォルトでは各ページにauth:trueが設定されており、ログインしないとページの表示がされないようになっています。当然ながら、ログインページはログインしていない状態で表示される必要があるため、auth:falseを指定しています。

<script>
    export default {
        auth: false,

ログイン後は/に遷移するようにしていますので、ログイン後に表示されるページ（pages/index.vue）も作成しておきましょう。

<template>
    <h1>ログインしました♪</h1>
</template>

ページを作成したら、さっそくログインしてみてください。うまくいきましたか？

まとめ

いかがでしたでしょうか。

SPA認証を実装しようとすると、本来はCSRFトークンの更新からクッキーに資格情報をセットしたりなど、複雑な処理を実装していく必要がありますが、Laravel Sanctumとnuxt/authを組み合わせると、かんたんにSPA認証を実装することができます。

参考になれば幸いです。

すべてのページで非表示にするには？

すべてのページでローディングバーを非表示にするには、nuxt.config.jsでloadingオプションをfalseにします。

export default {
    loading:false
}

これだけでローディングバーは表示されなくなります。

特定のページだけバーを非表示にするには？

では、特定のページだけローディングバーを表示させたくないときは、どのようにするのでしょうか。

実はまったく方法は変わりません。非表示にしたいページのexport default内にloading:falseを指定するだけです。

<template>
  
</template>

<script>
export default {
     loading:false
}
</script>

loading:falseが指定されているページのみ、ローディングバーが表示されなくなります。

特定のリクエストだけバーを非表示にする

さらに特定のリクエストだけバーを非表示にさせるには、どうすればよいのでしょうか。

例えば、/api/mainへのアクセス時はプログレスバーを表示したいが、/api/subに対するアクセスではバーを表示させなくてよいというケースです。

こういったときは、nuxt/axiosのprogressオプションを活用します。

this.$axios.$get('/api/sub', { progress: false })

バーを表示させたくないaxiosのオプションにprogress:falseを指定します。すると、そのリクエストだけローディングバーが表示されなくなります。

バックグラウンドで定期的にデータを取得させる場合など、いちいちバーを表示させる必要がないときに使える手法です。

ドキュメント

Nuxt/jsのローディングバーに関しては、ほかにもさまざまなオプションが用意されており、バーの色や太さもかんたんに変更することができます。

Loading

Out of the box, Nuxt gives you its own loading progress bar component that's shown between routes. You can customize it,...

nuxtjs.org

公式ドキュメントにまとめられていますので、確認してみることをおすすめします。

GitHubにサンプルを公開しました。

【nuxt/authｘLaravel SanctumでSPA認証】サンプルを公開しました

GitHubにNuxtJS（nuxt/auth）とLaravel Sanctumのサンプルプロジェクトを公開しました。Laravel Sanctumとnuxt/authによるSPA認証をすぐに体験できます。Laravel SanctumとNuxtJSによるSPA認証については、以前チュートリアル記事をアップしていますので、ご活用ください。

takabus.com

2022.09.10

Laravel SanctumとNuxt/AuthによるSPA認証を体験いただくことができます。

(2022/9/11追記)

全2回の連載とし、第1回はSPA認証に対応したバックエンドをLaravelで構築する方法について紹介していきます。Laravelでは認証システムを簡単に実装できるライブラリが豊富に用意されており、専門的な知識が十分ではなくても、SPA認証が実装できるようになっています。そこで当記事では、SPA認証におすすめのライブラリ「Laravel Sanctum」の紹介から、実際に実装する手順について解説していきたいと思います。

第2回では、フロントエンドフレーム「Nuxt.js」にログイン機能を実装していきます。Nuxt.js公式の認証モジュール「nuxt/auth」を活用し、認証に関する難しいコーディングはほぼゼロでログイン機能を実装していく方法を紹介していきます。

LaravelとNuxt.jsのプロジェクトは、完全に分離して開発されたものとして解説していきます。

なお、LaravelとNuxt.jsを組み合わせた際のSPA認証としては、今回紹介する以外にもたくさんの方法があります。当記事では、LaravelとNuxt.jsに用意されているライブラリをフル活用し、できる限りシンプルに実装する方法を取り上げています。

まずはSPA認証の全体像をチェック！

はじめにSPA認証がどのような流れで行われるかについて、確認しておきましょう。

1. 【フロントエンド】CSRFトークンを要求
2. 【バックエンド】CSRFトークンを返し、ブラウザのクッキーにセット
   【フロントエンド】ログインAPIへメールアドレスとパスワードをPOST
3. 【バックエンド】認証（正しいパスワードか確認する）し、フロントエンドへ結果を返す
4. 【フロントエンド】認証に成功したら、ログイン済みページへ遷移する

まず、第一にCSRFトークンの取得が必要となります。

CSRF（Cross-site Request Forgery）トークンというのは、正規のページからアクセスが行われていることを証明するための値のことです。いわば合言葉のようなもので、フロントエンドは必ずCSRFトークンを事前に取得しておき、APIへアクセスするときはCSRFトークンも一緒に渡す必要があります。CSRFトークンが渡されていないときはアクセスを拒否することで、不正なアクセスを防ぐことができます。

おそらくSPA認証を構築するうえで多くの人が躓くのは、CSRFにかかわる部分です。実際にはLaravel Sanctumとnuxt/authを使うことで、よしなに処理してくれるのですが、SPA認証におけるCSRFトークンの仕組みについては、事前にしっかり理解しておいたほうが後々（とくにフロントエンドを実装する第2回で）楽になります。Google検索してあらかじめイメージを掴んでおくことをおすすめします。

CSRFトークンってなんの意味があるの？意外と知らないAPI通信におけるCSRFの仕組み

SPAやAPI通信におけるCSRFトークンの仕組みについて解説！トークンだけでどうして守れるのか？

takabus.com

2022.03.02

CSRFトークンがうまく取得できれば、あとは通常のログインと同様です。定義しておいたログイン用のルートにメールアドレスやパスワードをPOSTすることで認証できます。

SPA認証の面倒な処理はLaravel Sanctumにおまかせ！

SPA認証を実装するには、CSRFトークンの発行や正規のフロントエンドかどうかの判定など、やらなくてはならない処理がたくさん出てきます。それらすべてを自前で実装することも可能ですが、バグの混入のおそれがありますし、セキュリティの観点からも推奨されません。

そこで、今回はLaravel Sanctumというライブラリを導入していきます。

Laravel Sanctum - Laravel 9.x - The PHP Framework For Web Artisans

Laravel is a PHP web application framework with expressive, elegant syntax. We’ve already laid the foundation — freeing ...

laravel.com

Laravel Sanctumは①SPA認証 ②トークン認証 ③モバイルアプリの認証を可能とすることに特化したライブラリです。Laravel Sanctumを導入することで、CSRFトークンに関する処理など、SPA認証に特有の処理を自前でコーディングすることなく実装することができます。第2回でフロントエンドに導入する「nuxt/auth」などのモジュールとの相性もとても良いため、単にSPAフロントエンドと連携させたいのであれば、もっともおすすめされるライブラリとなります。

Laravelの公式ドキュメントにも、SPA認証にはLaravel Sanctumが推奨される旨が記載されています。

 if you are attempting to authenticate a single-page application, mobile application, or issue API tokens, you should use Laravel Sanctum. 

https://laravel.com/docs/8.x/passport#passport-or-sanctum

もちろん、ほかのライブラリにもSPA認証を実装できるものはありますが、各ライブラリの比較をしていると到底説明しきれない量になってしまうため、ここでは詳細に踏み込むことは避けておきましょう。とりあえず、シンプルにSPA認証を実装するならLaravel Sanctumという認識で問題ありません。

今回はSPA認証ができればOKということで、Laravel Sanctumを導入してAPIからのログインを実装してみたいと思います。

Laravel Sanctumをインストール

まずはLaravel Sanctumをインストールしましょう。

ただし、Laravel 8ではプロジェクトを作成した時点で、すでにLaravel Sanctumがインストールされていますので、この手順は不要です。Laravel SanctumはLaravel 6から使用できます。Laravel 6～7を使用している方は以下の手順でインストールしましょう。

ComposerでLaravel Sanctumをインストールします。

composer require laravel/sanctum
Using version ^2.14 for laravel/sanctum
Package manifest generated successfully.
77 packages you are using are looking for funding.
Use the `composer fund` command to find out more!
> @php artisan vendor:publish --tag=laravel-assets --ansi --force
No publishable resources for tag [laravel-assets].
Publishing complete.

Laravel Sanctumのインストールができたら、Sanctumの利用に必要なファイルを生成するコマンドを実行します。

php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider"
Copied Directory [\vendor\laravel\sanctum\database\migrations] To [\database\migrations]
Publishing complete.

Laravel Sanctumをミドルウェアに追加する

次に、ミドルウェアにLaravel Sanctumを登録して、Laravel Sanctumを有効にします。

app\Http\Kernel.phpを開き、$middlewareGroupsのapiにLaravel Sanctumのクラス（\Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class）を追加します。

・・・中略・・・   
 protected $middlewareGroups = [
        'web' => [
            \App\Http\Middleware\EncryptCookies::class,
            \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
            \Illuminate\Session\Middleware\StartSession::class,
            // \Illuminate\Session\Middleware\AuthenticateSession::class,
            \Illuminate\View\Middleware\ShareErrorsFromSession::class,
            \App\Http\Middleware\VerifyCsrfToken::class,
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
        ],

        'api' => [
            \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
            'throttle:api',
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
        ],
    ];

Laravel SanctumがもともとインストールされているLaravel 8では、該当の行がコメントアウトされています。この場合はコメントを外せばOKです。

アクセスを許可するドメインを設定する

次にLaravel Sanctumへのアクセスを許可するドメインを指定します。

Laravel Sanctumの機能を利用するには、フロントエンドのドメインを設定する必要があります。アクセス元となるフロントエンドのドメインを指定することで、外部からSanctumへの不正なアクセスを防ぐようになっています。

設定はconfig/sanctum.phpから行いますが、デフォルトでは.envファイルで環境変数として設定することができるようになっています。

.envファイルにSANCTUM_STATEFUL_DOMAINSキーを追記して、フロントエンドのドメイン（ポート番号含む）を指定します。

SANCTUM_STATEFUL_DOMAINS=localhost:3000

ここではNuxt.jsの開発環境（http://lcoalhost:3000）からアクセスできるように設定しておきました。

localhost:3000はconfig/sanctum.phpであらかじめ許可設定がなされているため、本当は設定する必要はありませんが、本番環境に移行したときに設定を忘れないよう、あえて明示的に設定しています。

CORSを有効にする

クロスオリジンになる場合は、LaravelでCORSを有効にしておきます。

クロスオリジンとは、バックエンドとフロントエンドのオリジン（アドレス）が異なる状態のことをいいます。この場合はCORSを明示的に有効にしておかないと、セキュリティ対策のためアクセスが拒否されてしまいます。

ローカル環境でもFQDNが異なればクロスオリジンとなります。

例えば、http://localhost:3000でNuxt.jsの開発をしつつ、http://localhost:8080で動作させたLaravelの開発サーバーにアクセスした場合、http://localhost:3000からhttp://localhost:8080へのアクセスが生じることになります。この場合も両者のオリジンは異なるため、CORSの有効化が必要です。

CORSを有効にするにはconfig\cors.phpを編集し、supports_credentialsをtrueにします。

<?php

return [
    'paths' => ['*', 'sanctum/csrf-cookie'],
    'allowed_methods' => ['*'],
    'allowed_origins' => ['*'],
    'allowed_origins_patterns' => [],
    'allowed_headers' => ['*'],
    'exposed_headers' => [],
    'max_age' => 0,
    'supports_credentials' => true,

];

このとき、特定のオリジンからのアクセスのみ許可したい場合は、＊の代わりに許可したいオリジンをallowed_originsに設定しておきましょう。

'allowed_origins' => ['http://localhost:3000'],

ただし、テスト環境ではひとまず＊にしておくことをおすすめします。正常にログインできることを確認してから制限を厳しくしていくほうが、無用なトラブルを避けることができます。

セッション・クッキーを許可するドメインを設定する

クロスドメインになっている場合は、セッション・クッキーを許可するドメインも設定する必要があります。

クロスドメインとは、バックエンドとフロントエンドのドメインが異なることをいいます。例えば、Laravelがhoge.com、フロントエンド（Nuxt.jsなど）がfuga.comでホスティングされているような状況です。クロスドメインではバックエンドからブラウザのクッキーを設定することができず、セッションも張ることができなくなります。許可するドメインをしっかり設定しておきましょう。

config/session.phpから設定しますが、.envからも設定できるようになっているので、.envから設定しましょう。

SESSION_DOMAIN=localhost

セッションクッキードメインを設定することで、クロスドメインになっていてもLaravel側からクライアントにクッキーを設定できるようになります。後で出てくるX-CSRF-TOKENを使用する上で必要となるため、ここで設定を行っておきます。

なお、クロスドメインになっていない場合、当手順は省略できます。

ログインコントローラーの実装

これにてLaravel Sanctumのセットアップは完了です。SPAフロントエンドとの認証用の通信はできるようになりました。

次に認証用のコントローラーを作成していきましょう。

Artisanコマンドを実行し、新たに認証用のコントローラー「AuthController」を作成します。

php artisan make:controller AuthController 

ログインとログアウトができるように実装していきます。通常の認証と同様に、Laravel標準の認証ファサードIlluminate\Support\Facades\Authを使って実装することができます。

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;

class AuthController extends Controller
{
    /**
     * ログイン
     *
     * @param  mixed $request
     * @return void
     */
    public function login(Request $request)
    {
        if (Auth::attempt($request->only(["email", "password"]))) {
            // レスポンスを返す
            return response()->json(['message' => 'success'], 200);
        } else {
            // エラーレスポンスを返す
            return response()->json(['message' => 'failed'], 401);
        }
    }

    /**
     * ログアウト
     *
     * @param  mixed $request
     * @return void
     */
    public function logout(Request $request)
    {
        // ログアウトする
        Auth::logout();
        // レスポンスを返す
        return response()->json(['message' => 'Logged out'], 200);
    }

もちろんAuthファサードのほかのメソッドも使えます。Auth::checkでログイン中か判定したり、Auth::id()でログイン中のユーザーのIDを取得したりすることもできます。Laravel Sanctumを導入していても、通常の認証とまったく同じです。

routes/web.apiでルートを設定します。

<?php

use Illuminate\Http\Request;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/


// SPA認証
Route::post('/login', 'AuthController@login');
Route::post('/logout', 'AuthController@logout');

nuxt/authからはここで定義したルートにログイン・ログアウトのアクセスを行うようにします。

api.phpに記載しても構わないとは思いますが、その場合はエンドポイントが/api/login,logoutになることに注意しましょう。

ルートをLaravel Sanctumで保護する

Laravel Sanctumでガードしたいルートにauth:sanctumミドルウェアを適用します。

// routes/api.php
Route::group(['middleware' => ['auth:sanctum']], function () {

    Route::get('/user', function (Request $request) {
        return $request->user();
    });

Route::groupで適用したいルートをまるごと囲ってしまうと安心です。

テストユーザーの作成・マイグレーション

最後にテストユーザーを作成しておきましょう。

シーダーとは、マイグレーション時に自動的にレコードを作成する機能のことです。あらかじめシーダーを作成しておくと、テストデータなどをマイグレーション時に作成することができます。

database\seeders\DatabaseSeeder.phpを編集し、テストユーザーを作成するシーダーを定義します。

<?php

namespace Database\Seeders;

use Illuminate\Database\Seeder;
use Illuminate\Support\Facades\DB;

class DatabaseSeeder extends Seeder
{
    /**
     * Seed the application's database.
     *
     * @return void
     */
    public function run()
    {
        DB::table('users')->insert([
            'name' => 't',
            'email' => 't@localhost',
            'password' => bcrypt('password'),
        ]);
    }
}

マイグレーション時に–seedオプションをつけると上のプログラムが実行され、自動的にユーザーが作成されるようになります。

マイグレーションを実行し、必要なテーブルを作成します。

php artisan migrate:fresh --seed 
Dropped all tables successfully.
Migration table created successfully.
Migrating: 2014_10_12_000000_create_users_table
Migrated:  2014_10_12_000000_create_users_table (26.50ms)
Migrating: 2014_10_12_100000_create_password_resets_table
Migrated:  2014_10_12_100000_create_password_resets_table (21.52ms)
Migrating: 2019_08_19_000000_create_failed_jobs_table
Migrated:  2019_08_19_000000_create_failed_jobs_table (32.99ms)
Migrating: 2019_12_14_000001_create_personal_access_tokens_table
Migrated:  2019_12_14_000001_create_personal_access_tokens_table (42.32ms)
Database seeding completed successfully.

テーブルが作成されたら、バックエンドは完成です！長かった～

なお、データベースへの接続設定については、あらかじめマイグレーション前に行っておいてください。MySQLなどのセットアップがお済みでない方はSQLiteをデータベースとして利用することができます。

LaravelでSQLiteデータベースを使ってみよう | アールエフェクト

SQLiteを利用すると簡単にデータベースを作成することができます。Laravelでアプリケーションを作成するためには、データベースを構築する必要があります。Laravelの初期設定ではmysqlデータベースが前提になっています。テストなど...

reffect.co.jp

ちなみにアクセストークン関係のテーブルもマイグレーションされていますが、SPA認証の場合は不要となります。マイグレーションファイルを削除しても構いませんが、後からトークン認証も実装するかもしれないため、一応残しておきました。

以上でバックエンドの準備は完了です。ローカルサーバーを起動して、フロントエンドからのアクセスを待機させておきましょう。

php artisan serve

Nuxt.jsのセットアップ

次にNuxt.jsによるフロントエンドを作成していきます。第2回「フロントエンド編」につづきます。

Laravelとnuxt/authでSPA認証！ログイン機能を実装しよう！（第2回 フロントエンド編）

Laravel とフロントエンドフレームワーク「Nuxt.js」を使い、SPA認証（ログイン機能）をできるだけかんたんに実装する方法を紹介していきます。

takabus.com

2022.07.29

しかし、SSRの恩恵を受けながらも、一部のデータについてはクライアントサイドでデータを取得したいという場合もあるでしょう。例えば、記事内容はサーバーサイドで生成したいが、関連サイトの新着情報やニュースといったタイムリーなデータはクライアントサイドで取得したいといったケースです。

当記事では、SSRやSSGとクライアントサイドレンダリングを共存させる方法について紹介していきます。

サーバーサイドレンダリングはasyncData、クライアントサイドはmountedとdataを使う！

解決方法はシンプル。mountedとdataを使いましょう！

そもそもNuxt.jsだからといって必ずasyncDataを使うというわけではありません。思い込みに注意しましょう。asyncDataとmounted・dataの棲み分けは以下のとおりです。

asyncDataとmounted・dataは、実行される場所が異なります。asyncDataに書いた処理はサーバーサイドで、mountedで定義した処理はクライアントサイドで実行されますので、サイトの一部だけクライアントサイドで処理したいような場合は、mountedでデータを取得するようにしてやればOKです。

もちろん、asyncDataとmounted・dataは併用することができます。記事の内容はasyncDataで取得するようにしておき、関連サイトのフィードはmountedで取得するようにしておけば、記事の内容はSSRで生成され、フィードについてはクライアントサイドでレンダリングさせることができます。

サンプルコード

asyncDataとdata・mountedを共存させたサンプルを掲載しておきます。

<template>
  <div>
    <ul>
      <!-- こちらはサーバー側でレンダリングされる -->
      <li v-for="post in posts" :key="post.id">{{post.title}}</li>
    </ul>
    <ul>
      <!-- こっちはクライアント側でレンダリングされる -->
      <li v-for="item in news" :key="item.id">{{item.title}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  async asyncData(context) {
    // サーバーサイドでデータを取得する
    let posts = await context.$axios.$get("/api/posts");
    // データを返す
    return { posts };
  },
  data() {
    return {
      news: null
    };
  },
  async mounted() {
    // クライアントサイドでデータを取得する
    await this.$axios.get("/api/news").then(res => {
      this.news = res.data;
    });
  }
};
</script>

asyncDataには/api/postsから、mountedには/api/newsからデータを取得するコードを書いています。

これを実行すると、postsはサーバーサイドでデータの取得からレンダリングまで行われますが、newsについてはクライアントサイドでデータの取得・レンダリングが行われます。SSRやSSGでホスティングした場合、postsはコンテンツがHTMLに書き出されますが、newsはHTMLには書き出されず、ブラウザでデータの取得から動的な描画が行われるようになります。

まとめ

いかがでしたか。

とくにSSGで静的サイトを生成しているとき、関連サイトの新着情報などもサーバーサイドでレンダリングしてしまうと、ジェネレートするまでページに反映されなくなってしまいます。SEO上クライアントサイドレンダリングでも特に問題がなく、リアルタイム性が重要となる部分については、これまで通りmountedでデータを取得し、クライアントサイドでレンダリングするようにしましょう。

Introduction

Supercharge Nuxt with a heavily tested, updated and stable PWA solution

pwa.nuxtjs.org

@nuxt/pwaをインストール

まず、@nuxt/pwaをインストールします。

npm i --save-dev @nuxtjs/pwa

nuxt.config.jsのbuildModulesに@nuxt/pwaを追加し、有効にします。

export default {


...
  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [

    '@nuxtjs/pwa',
  ],
...

あとはホスティングするだけです。https対応のサーバーで公開すると、PWAとしてインストールできるようになります。

マニフェストをカスタマイズするには？

PWAのアプリ名などをカスタマイズしたいときは、nuxt.config.jsにpwaを追加します。

  // PWA module configuration: https://go.nuxtjs.dev/pwa
  pwa: {
    manifest: {

      ...
    },

  },

設定できるマニフェストの項目は@nuxt/pwaのドキュメントで公開されています。

Manifest Module

Manifest adds Web App Manifest with no pain

pwa.nuxtjs.org

アプリの名前や言語については最低限カスタマイズしておくことをおすすめします。

  // PWA module configuration: https://go.nuxtjs.dev/pwa
  pwa: {
    manifest: {
      lang: 'ja',
      name: "バスずかん|仙台を中心としたバスの図鑑",
      short_name: "バスずかん"
    },

  },

スマホやタブレットで表示されるアプリ名はshort_nameで設定します。nameはPCにインストールしたときに表示される名前です。

実際にリリースする場合はもっと細かくカスタマイズすることになります。

まとめ

とてもかんたんですよね♪

当記事ではPWA対応させる最低限の方法を紹介しました。ドキュメントには数多くのオプションが掲載されていますので、一度目を通してみることをおすすめします。

Introduction

Supercharge Nuxt with a heavily tested, updated and stable PWA solution

pwa.nuxtjs.org