前提

フロントをnuxt.js、API側をlaravel8、DBにmysqlを使って認証機能付きSPAの環境構築をしていきます。

私の環境は下記の通りです。

OS: windows10
node.js: 14.17.6
php: 8.0.13
laravel: 8.83.8
nuxt: ^2.15.7
mysql: 8.0.13

下準備

作業ディレクトリの作成

$ mkdir sample-app
$ cd sample-app

以降は任意の場所に作成した新たなsample-appディレクトリ内で作業をしていきます。

laravel8の構築

先ずはlaravel8のインストールから

$ composer create-project "laravel/laravel=8.*" sample-api
$ cd sample-api
$ php artisan serve

ブラウザでlocalhost:8000と入力して下記画面が返ってこればOK

次にlaravelをインストールしてから最初に行う初期設定を済ましておく

config/app.php

'timezone' => 'Asia/Tokyo', // UTCから変更

    /*
    |--------------------------------------------------------------------------
    | Application Locale Configuration
    |--------------------------------------------------------------------------
    |
    | The application locale determines the default locale that will be used
    | by the translation service provider. You are free to set this value
    | to any of the locales which will be supported by the application.
    |
    */

    'locale' => 'ja', // enから変更

.env

APP_NAME=Laravel
APP_ENV=local
APP_KEY=hogehoge 
APP_DEBUG=true
APP_URL=http://localhost

LOG_CHANNEL=stack
LOG_DEPRECATIONS_CHANNEL=null
LOG_LEVEL=debug

DB_CONNECTION=mysql 
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=APIで使用するDB名を記入する
DB_USERNAME=APIで使用するmysqlのユーザー名を記入する
DB_PASSWORD=APIで使用するmysqlのパスワードを記入する

BROADCAST_DRIVER=log
CACHE_DRIVER=file
FILESYSTEM_DRIVER=local
QUEUE_CONNECTION=sync
SESSION_DRIVER=file
SESSION_LIFETIME=120

MEMCACHED_HOST=127.0.0.1

REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379

MAIL_MAILER=smtp
MAIL_HOST=mailhog
MAIL_PORT=1025
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_ENCRYPTION=null
MAIL_FROM_ADDRESS=null
MAIL_FROM_NAME="${APP_NAME}"

AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
AWS_DEFAULT_REGION=us-east-1
AWS_BUCKET=
AWS_USE_PATH_STYLE_ENDPOINT=false

PUSHER_APP_ID=
PUSHER_APP_KEY=
PUSHER_APP_SECRET=
PUSHER_APP_CLUSTER=mt1

MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

これで初期設定が完了しました。

続いて認証機能の作成をしていきます。
laravelで認証機能を作成する方法はいくつか存在しますが、今回はsanctumを使っていきます。

$ composer require laravel/sanctum
$ php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider" 
$ php artisan migrate

これで認証機能に必要な機能の追加と必要なテーブルの生成が完了しました。

次にシーダーを利用してデモアカウントを作成しましょう。

$ php artisan make:seeder  UserTableSeeder

database/seeders/UsertableSeeder.php

<?php

namespace Database\Seeders;

use Illuminate\Database\Seeder;
use Illuminate\Support\Facades\DB; //追加する

class UserTableSeeder extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
        // デモアカウントを作成
        DB::table('users')->insert([
            'name' => 'test',
            'email' => 'test@test',
            'password' => bcrypt('test'),
        ]);
    }
}

$ php artisan db:seed --class=UserTableSeeder

これでログイン用のデモアカウントができました。

次はログイン機能の作成です。

routes/api.php

<?php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\Auth\RegisterController; // 追加する
use App\Http\Controllers\Auth\LoginController; // 追加する

/*
|--------------------------------------------------------------------------
| API Routes
|--------------------------------------------------------------------------
|
| Here is where you can register API routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| is assigned the "api" middleware group. Enjoy building your API!
|
*/

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

Route::post('/register', [RegisterController::class, 'register']);// ユーザー登録
Route::post('/login', [LoginController::class, 'login']);// ログイン
Route::post('/logout', [LoginController::class, 'logout']);// ログアウト

続いてcontrollerを作成していきます。

$ php artisan make:controller Auth/RegisterController
$ php artisan make:controller Auth/LoginController

app/Http/Controllers/Auth/RegisterController.php

<?php

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use App\Providers\RouteServiceProvider; // 追加する
use App\Models\User; // 追加する
use Illuminate\Http\RedirectResponse; // 追加する
use Illuminate\Support\Facades\Hash; // 追加する
use Illuminate\Support\Facades\Validator; // 追加する
use \Symfony\Component\HttpFoundation\Response; // 追加する

class RegisterController extends Controller
{
    public function register(Request $request)
    {
        //入力バリデーション
        $validator = Validator::make($request->all(),[
            'name' => 'required',
            'email' => 'required|email|unique:users',
            'password' => 'required'
        ]);

        //バリデーションで問題があった際にはエラーを返す
        if ($validator->fails()) {
            return response()->json($validator->messages(), Response::HTTP_UNPROCESSABLE_ENTITY);
        }

        //バリエーションで問題がなかった場合にはユーザを作成する
        $user = User::create([
            'name' => $request->name,
            'email' => $request->email,
            'password' => Hash::make($request->password),
        ]);

        //ユーザの作成が完了するとjsonを返す
        $json = [
            'data' => $user,
            'message' => 'User registration success!',
            'error' => ''
        ];
        return response()->json( $json, Response::HTTP_OK);
    }
}

登録処理はこれで完了です。
POSTMAN等を利用してアカウント登録のテストをして成功するか確認してみましょう。

下記のようなjsonが返ってきたら成功です。

{
    "data": {
        "name": "hoge",
        "email": "hoge@hoge",
        "updated_at": "2022-04-19T02:12:36.000000Z",
        "created_at": "2022-04-19T02:12:36.000000Z",
        "id": 2
    },
    "message": "User registration success!",
    "error": ""
}

※もしくは自身のDBを確認して新たなアカウントが追加されているかを確認してみましょう。

アカウント登録の処理が完成したら次はログイン処理を作成していきましょう。

app/Http/Controllers/Auth/LoginController.php

<?php

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth; // 追加する
use Illuminate\Validation\ValidationException; // 追加する
use App\Models\User; // 追加する
use \Symfony\Component\HttpFoundation\Response; // 追加する

class LoginController extends Controller
{
    public function login(Request $request){
        // バリデーション
        $credentials = $request->validate([
            'email' => 'required|email',
            'password' => 'required'
        ]);

        // ログイン処理
        if(Auth::attempt($credentials)){
            $user = User::whereEmail($request->email)->first(); //トークン作成と取得

            $user->tokens()->delete();
            $token = $user->createToken("login:user{$user->id}")->plainTextToken;
            
            //ログインが成功するとtokenを返す。
            return response()->json(['token' => $token], Response::HTTP_OK);
        }
        // ログイン失敗時の処理
        return response()->json('Can Not Login.', Response::HTTP_INTERNAL_SERVER_ERROR);
    }

    public function logout(Request $request){
        auth('sanctum')->user()->tokens()->delete();
        return response(['message' => 'You have been successfully logged out.'], 200);
    }

    public function user(Request $request){
        $user = $request->user();
        return response()->json(compact('user'), 200);
    }
}

これでログインの処理は完成です。
ちゃんとログインできるか、POSTMAN等を利用してAPIの動作確認をしていきましょう。
emailとpasswordをbodyに書いて渡します。

今回は先程作成したメールアドレスtest@testとパスワードtestを利用してログインしていきます。

尚、ログインのURLはhttp://localhost:8000/api/loginです。

下記のようなjsonが返ってきたら成功です。

{
    "token": "1|VVmQ0GlY9pjwQyIev9ou7Octpx9ZMQa9xhhFuhOe"
}

これで完成です。

最後にtokenが発行されていないと処理できないrouteを作成しておきます。

routes/api.php

<?php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\Auth\RegisterController; // 追加する
use App\Http\Controllers\Auth\LoginController; // 追加する

/*
|--------------------------------------------------------------------------
| API Routes
|--------------------------------------------------------------------------
|
| Here is where you can register API routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| is assigned the "api" middleware group. Enjoy building your API!
|
*/

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

Route::post('/register', [RegisterController::class, 'register']); // ユーザー登録
Route::post('/login', [LoginController::class, 'login']); // ログイン
Route::post('/logout', [LoginController::class, 'logout']); // ログアウト

//ログインしたユーザーのみが/hogeにアクセスできる
Route::middleware('auth:sanctum')->group(function(){
    Route::get('/hoge', function(){
        return 'auth is working';
    });
});

最後にAPIとして利用する為に細かな設定をいくつかしないといけません。
あとちょっと。

config/cors.php

<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Cross-Origin Resource Sharing (CORS) Configuration
    |--------------------------------------------------------------------------
    |
    | Here you may configure your settings for cross-origin resource sharing
    | or "CORS". This determines what cross-origin operations may execute
    | in web browsers. You are free to adjust these settings as needed.
    |
    | To learn more: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
    |
    */

    'paths' => ['api/*', 'sanctum/csrf-cookie'],

    'allowed_methods' => ['*'],

    'allowed_origins' => ['*'],

    'allowed_origins_patterns' => [],

    'allowed_headers' => ['*'],

    'exposed_headers' => [],

    'max_age' => 0,

    'supports_credentials' => true, // 変更する

];

app/Http/Kernel.php


        'api' => [
            \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class, // コメントアウトを外す
            'throttle:api',
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
        ],

↑大体43行目あたり

app/Http/Middleware/VerifyCsrfToken.php

<?php

namespace App\Http\Middleware;

use Illuminate\Foundation\Http\Middleware\VerifyCsrfToken as Middleware;

class VerifyCsrfToken extends Middleware
{
    /**
     * The URIs that should be excluded from CSRF verification.
     *
     * @var array<int, string>
     */
    protected $except = [
        'api/register', // 追記する
        'api/login' // 追記する
    ];
}

以上になります。
本APIで発行したtokenを受け取るnuxt.js側の環境構築は別記事に書いていきます。

お疲れ様でした！

次のステップ