📌

FilamentでGoogle Loginする

2024/01/13に公開

Laravel

PHP

filament

tech

googleCloudで認証情報を作る

https://cloud.google.com/にアクセスして、コンソールに移動

ヘッダーの「プロジェクト名」を表示している部分をクリックしてプロジェクト一覧モーダルを表示

表示されたプロジェクト一覧モーダルの「新しいプロジェクト」をクリック

「新しいプロジェクト」画面が表示されるので良い感じに入力し、作成をクリック

プロジェクトができたので、「プロジェクト選択」から作成したプロジェクトを選ぶ
画像は無し！

プロジェクトのダッシュボード的な画面で「APIとサービス」をクリック

サイドバーの「OAuth同意画面」をクリック

OAuth同意画面で「外部」を選んで「作成」をクリック

なんか画面が表示されるけど、一旦無視して、サイドバーの「認証情報」をクリック

「認証情報を作成」から「OAuthクライアントID」をクリック

「OAuth クライアント ID の作成」が表示されるので、
アプリケーションの種類を「ウェブアプリケーション」
名前を「shie-worksシステム」
承認済みの JavaScript 生成元に「http://localhost」
承認済みのリダイレクト URIに「http://localhost/auth/google/callback」
を入力して
「作成」をクリック

すると、
「クライアントID」と「クライアントシークレット」が表示されるので、コピーして持っておく

Filament側でOauthを実装

やっとFilamentを触っていけます。

socialiteをインストール

./vendor/bin/sail composer require laravel/socialite

.envに「クライアントID」と「クライアントシークレット」を配置

.env

GOOGLE_CLIENT_ID="〇〇〇〇〇〇〇〇〇〇〇〇〇"
GOOGLE_CLIENT_SECRET="〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇"
GOOGLE_REDIRECT_URI="/auth/google/callback"

config/services.phpに以下を追加

config/services.php

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

app/Http/Controllers/SocialiteController.phpを作成して中身は下記でOK

app/Http/Controllers/SocialiteController.php

<?php
namespace App\Http\Controllers;

use App\Models\User;
use Laravel\Socialite\Facades\Socialite;

class SocialiteController extends Controller
{
    public function redirect(string $provider)
    {
        $this->validateProvider($provider);

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

    public function callback(string $provider)
    {
        $this->validateProvider($provider);

        $response = Socialite::driver($provider)->user();
        $user = User::firstWhere(['email' => $response->getEmail()]);
        if (!$user) {
            abort(403, 'Googleアカウントは登録されていません');
        }
        auth()->login($user);
        return redirect()->intended(route('filament.admin.pages.dashboard'));
    }

    protected function validateProvider(string $provider): array
    {
        return $this->getValidationFactory()->make(
            ['provider' => $provider],
            ['provider' => 'in:google']
        )->validate();
    }
}

routes/web.phpに以下を追加

routes/web.php

use App\Http\Controllers\SocialiteController;

Route::get('/auth/{provider}/redirect', [SocialiteController::class, 'redirect'])
    ->name('socialite.redirect');
Route::get('/auth/{provider}/callback', [SocialiteController::class, 'callback'])
    ->name('socialite.callback');

app/Filament/Pages/Auth/Login.phpを作って中身は以下にする

app/Filament/Pages/Auth/Login.php

<?php
namespace App\Filament\Pages\Auth;

use Filament\Pages\Auth\Login as BaseLogin;

class Login extends BaseLogin
{
    protected static string $view = 'filament.pages.auth.login';

}

resources/views/filament/pages/auth/login.blade.phpを作って中身は以下にする

resources/views/filament/pages/auth/login.blade.php

<x-filament-panels::page.simple>
<x-filament::button
    :href="route('socialite.redirect', 'google')"
    tag="a"
    color="info"
>
    Sign in with Google
</x-filament::button>
</x-filament-panels::page.simple>

app/Providers/Filament/AdminPanelProvider.phpを編集

app/Providers/Filament/AdminPanelProvider.php

+ use App\Filament\Pages\Auth\Login;

class AdminPanelProvider extends PanelProvider
{
    public function panel(Panel $panel): Panel
    {
        return $panel
            ->default()
            ->id('admin')
            ->path('admin')
-            ->login()
+            ->login(Login::class)