概要

この記事では、Firebase Authenticationによるメール認証を、Nuxt.jsとLaravel 8で開発しているサービスに、どのように導入するかをまとめています。今回は認証機能に重点をおいているので、入力フォームのバリデーションを気にしていません。

仕様

フレームワーク等

フロントエンド：Nuxt 2, Vuetify
バックエンド：Laravel 8, Laravel Sanctum, Firebase Authentication v9
その他：dockerとWSL2を使用して開発をします。

認証の流れ

認証は以下の図のようになる。初めに、Firebase Authenticationから一意のユーザーUIDを取得する。これがユーザーを識別するキーとなる。次に、Laravel SanctumにユーザーUIDを送信してユーザーを識別しログインする。新規登録の場合はデータベースにユーザーを登録した後にログインする。この記事では、主にNuxtとFirebase間の実装を行う。

作業手順

Nuxt, Laravelのプロジェクトを作成
Laravel Sanctumの導入
データベースの作成
Firebaseの登録・プロジェクト作成
NuxtにFirebaseモジュールを導入

1. Nuxt.js, Laravelのプロジェクトを作成

今回はフロントエンドとバックエンドのディレクトリを分離して開発をすすめる。任意の名前のディレクトリを作成して、その中にNuxt.jsとLaravelのプロジェクトをそれぞれ作成する。

// Nuxtのプロジェクト作成
yarn create nuxt-app <nuxt-project-name>
// npm init nuxt-app <nuxt-project-name> (npmの場合)
// 本記事では <nuxt-project-name> の部分を client とします。

// Laravelのプロジェクト作成
curl -s https://laravel.build/<laravel-project-name> | bash
// 本記事では <laravel-project-name> の部分を server とします。

プロジェクト作成後、それぞれのプロジェクトを起動します。

// Nuxtプロジェクトの起動
cd client
yarn dev
// npm run dev (npmの場合)

// Laravelプロジェクトの起動
cd server
vendor/bin/sail up -d

// vendor/bin/sailはよく使うので以下のコードを使うと便利です。
alias sail='[ -f sail ] && bash sail || bash vendor/bin/sail'
sail up -d
// これによって vendor/bin/sail を sail として使用できます。
// 本記事では以降、 sail を使用します。

（参考）
Nuxt公式サイト：https://nuxtjs.org/
Laravel公式サイト：https://laravel.com/

2. Laravel Sanctumの導入

Laravel Sanctumの導入方法は以下のサイトが参考になります。本記事では説明を省略します。
（参考）
Laravel公式: https://laravel.com/docs/8.x/sanctum
Laravel Sanctum 8.x 日本語記事：https://readouble.com/laravel/8.x/ja/sanctum.html

3. データベースの作成

Laravelでユーザー情報を登録するデータベースを作成します。今回はユーザー名・ユーザーUID(Firebase Authenticationから取得する)・ユーザーの作成日時を記録します。テーブル名はusersとします。

server/database/migrations/yyyy_MM_dd_HHmmss_create_users_table.php

// 省略
public function up()
{
    Schema::create('users', function (Blueprint $table) {
        $table->string('name'); // ユーザー名
        $table->string('uid');  // ユーザーUID
        $table->timestamps();   // ユーザーの作成日時

        $table->primary('uid'); // uidをキーとする
    });
}
// 省略

上記のコードを入力後、以下のコマンドでデータベースを作成します。

sail artisan migrate

4. Firebaseの登録とプロジェクト・ウェブアプリ作成

Googleアカウントを準備してFirebaseに登録します。Firebase Consoleからプロジェクトを作成します。
次に、Firebaseにウェブアプリを作成します。以下の画像の赤枠の部分をクリックして必要事項を記入してウェブアプリを登録します。

次に、Authenticationを選択して、以下の画面から実装したい認証方法を選択します。それぞれの認証方法に、APIキーなど必要項目があるので入力します。

5. NuxtにFirebaseモジュールを導入

最後にFirebaseとの紐付けをするためにNuxtにその情報を入力します。まず、以下のコードを実行して、NuxtでFirebaseを使えるようにします。

yarn add firebase
yarn add @nuxtjs/firebase

// npmの場合
npm install firebase
Npm install @nuxtjs/firebase

次に、nuxt.config.jsにFirebaseモジュールの情報を記載します。今回は環境変数を用いることにするので、.envファイルを作成して以下のように設定します。

client/nuxt.config.js

// 省略
modules: [
    // 省略
    '@nuxtjs/firebase',
],

// Firebaseの各種設定
firebase: {
    config: {
      // Firebaseとの連携に必要な情報です
      apiKey: process.env.API_KEY,
      authDomain: process.env.AUTH_DOMAIN,
      projectId: process.env.PROJECT_ID,
      storageBucket: process.env.STORAGE_BUCKET,
      messagingSenderId: process.env.MESSAGING_SENDER_ID,
      appId: process.env.APP_ID,
      measurementId: process.env.MEASUREMENT_ID,
    },
    services: {
      // Firebase Authenticationを利用することを意味します
      auth: true,
    },
},
// 省略

client/.env

// ***********の部分は各自のFirebaseプロジェクトで異なる
API_KEY=**********
AUTH_DOMAIN=**********
PROJECT_ID=**********
STORAGE_BUCKET=**********
MESSAGING_SENDER_ID=**********
APP_ID=**********
MEASUREMENT_ID=**********

.envファイルのそれぞれの値はFirebase Consoleの設定バタンを押し、「全般」の「マイアプリ」の項目から確認できます。（以下の画像の赤枠部分）

導入完了

ここまでの作業によって、NuxtにFirebaseを導入し、メール・ソーシャルログイン認証機能の下準備ができました。
後編では、入力用のフォームの作成、データベースにユーザー情報の登録、ログインの処理を記述します。こちらの記事も参考にしてください。