Laravel × Nuxt.jsのGoogleログイン実装方法

composer require laravel/socialite

'google' => [
    'client_id'     => env('GOOGLE_CLIENT_ID'),
    'client_secret' => env('GOOGLE_CLIENT_SECRET'),
    'redirect'      => env('GOOGLE_CALLBACK'),
],

GOOGLE_CLIENT_ID=******
GOOGLE_CLIENT_SECRET=******
GOOGLE_CALLBACK=http://localhost:3000/login/googleCallback

// ソーシャルログイン
Route::get('/login/{provider}', 'App\Http\Controllers\SocialController@redirect')->name('social_login');
Route::get('/login/{provider}/callback', 'App\Http\Controllers\SocialController@callback')->name('social_login_callback');

public function up()
{
    Schema::create('users', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->string('email')->unique()->nullable();
        $table->timestamp('email_verified_at')->nullable();
        $table->string('password')->nullable();
        $table->string('provider_id')->nullable();
        $table->string('provider_name')->nullable();
        $table->rememberToken();
        $table->timestamps();
        $table->softDeletes();
    });
}

protected $fillable = [
    'name',
    'email',
    'password',
    'provider_id',
    'provider_name',
];

php artisan make:controller SocialController

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

// Facades
use Laravel\Socialite\Facades\Socialite;
use Illuminate\Support\Facades\Auth;

// Models
use App\Models\User;

class SocialController extends Controller
{
    public function redirect($provider)
    {
        $redirect_url = Socialite::driver($provider)->redirect()->getTargetUrl();
        return response()->json($redirect_url);
    }

    public function callback($provider)
    {
        $user_from_social = Socialite::driver($provider)->user();
        $user = User::where('email', $user_from_social->getEmail())->first();

        if ($user) {
            Auth::login($user);
        } else {
            $user = User::create([
                'name' => $user_from_social->getName(),
                'email' => $user_from_social->getEmail(),
                'password' => bcrypt('password'),
                'provider_id' => $user_from_social->getId(),
                'provider_name' => $provider,
            ]);
            Auth::login($user);
        }

        return response()->json([
            'user' => $user,
            'access_token' => $user->createToken('user')->plainTextToken,
        ]);
    }
}

return Socialite::driver($provider)->redirect();

$redirect_url = Socialite::driver($provider)->redirect()->getTargetUrl();
return response()->json($redirect_url);

<button @click="googleLogin" type="button" class="flex justify-center gap-2 items-center shadow-xl border border-slate-700 rounded-full px-8 py-4">
    <i class="fa-brands fa-google"></i>Googleアカウントでログイン
</button>

async function googleLogin()
{
    const url = `${runtimeConfig.public.baseUrl}/api/login/google`;
    const headers = {
        'Content-Type': 'application/json',
        'X-XSRF-TOKEN': csrfToken.value
    }
    await fetch(url, {
        method: "GET",
        headers: headers,
        credentials: "include",
    }).then((res) => {
        return res.json();
    }).then((data) => {
        console.log(data);
        window.location.href = data;　// リダイレクト
    });
}

<template>
    <div class="card">
        <h1>認証中</h1>
        <img class="loading-img" src="@/assets/images/loading2.svg" alt="ローディング">
    </div>
</template>

<script setup>
const runtimeConfig = useRuntimeConfig();
const router = useRouter();
const route = useRoute();
const store = useGoogleStore();
const csrfToken = useCookie('XSRF-TOKEN');
const { $toast } = useNuxtApp();

onMounted(async() => {
    const params = route.query;
    const query_params = new URLSearchParams(params);
    const url = `${runtimeConfig.public.baseUrl}/api/login/google/callback?${query_params.toString()}`;
    await fetch(url, {
        method: "GET",
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': csrfToken.value
        },
        credentials: "include",
    }).then((res) => {
        return res.json();
    }).then((data) => {
        console.log(data);
        store.token = data.token;
        store.user = data.user;
        router.push('/event');
        $toast.success('ログインしました');
    });
})
</script>

<style scoped>
.card {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 99;
    position: fixed;
    top: 0;
    left: 0;
    background-color: white;
}
h1 {
    font-size: 30px;
}
.loading-img {
    width: 70px;
    height: 70px;
}
</style>

<?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' => ['*'], // http://localhost:3000でもOK

    'allowed_origins_patterns' => [],

    'allowed_headers' => ['*'],

    'exposed_headers' => [],

    'max_age' => 0,

    'supports_credentials' => true,

];