ブログ

LaravelでGoogleログインを実装する方法【Socialite完全ガイド】

はじめに：ソーシャルログインを導入するメリット

ユーザー登録・ログイン機能を一から作るのは手間がかかる。しかもパスワード管理・メール認証・リセット機能など、やることが多い。そこで便利なのがGoogleアカウントを使ったソーシャルログインだ。

ソーシャルログインを使うと次のメリットがある。

  • ユーザーがパスワードを覚えなくてよい
  • メール認証が不要になる
  • 新規登録のハードルが下がりコンバージョン率が上がりやすい
  • 開発側もパスワードハッシュ・リセットフローを実装しなくて済む

Laravelなら laravel/socialite パッケージがあるので、比較的少ないコード量で実装できる。この記事では実際の手順を順を追って解説する。

1. 事前準備：Google Cloud Console でOAuthクライアントIDを発行する

まず Google 側の設定が必要だ。

  1. Google Cloud Console にアクセスし、プロジェクトを作成（または既存のものを選択）
  2. 左メニューの「APIとサービス」→「認証情報」に移動
  3. 「認証情報を作成」→「OAuthクライアントID」を選択
  4. アプリケーションの種類は「ウェブアプリケーション」を選択
  5. 「承認済みのリダイレクトURI」に以下を追加する
http://localhost:8000/auth/google/callback   ← ローカル開発用
https://yourdomain.com/auth/google/callback  ← 本番用

作成すると クライアントID と クライアントシークレット が発行される。これを後で .env に設定する。

2. Socialite パッケージをインストール

composer require laravel/socialite

インストール後、念のため以下も実行しておくとトラブルを防げる。

composer dump-autoload

3. 設定ファイルと .env の編集

config/services.php に Google の設定を追加

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

.env に認証情報を追加

GOOGLE_CLIENT_ID=your-client-id.apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=your-client-secret
GOOGLE_REDIRECT_URI=http://localhost:8000/auth/google/callback

本番環境では GOOGLE_REDIRECT_URI を本番ドメインのURLに変更することを忘れずに。

4. マイグレーション：usersテーブルに google_id を追加

php artisan make:migration add_google_id_to_users_table --table=users

生成されたマイグレーションファイルを以下のように編集する。

public function up(): void
{
    Schema::table('users', function (Blueprint $table) {
        $table->string('google_id')->nullable()->after('email');
        $table->string('password')->nullable()->change(); // パスワードなしで登録できるように
    });
}

public function down(): void
{
    Schema::table('users', function (Blueprint $table) {
        $table->dropColumn('google_id');
        $table->string('password')->nullable(false)->change();
    });
}

password を nullable にするのはソーシャルログイン専用ユーザーがパスワードを持たない場合への対応だ。既存ユーザーへの影響を考慮した上で変更すること。

php artisan migrate

5. コントローラーを作成

php artisan make:controller SocialAuthController

app/Http/Controllers/SocialAuthController.php を以下のように実装する。

<?php

namespace App\Http\Controllers;

use App\Models\User;
use Illuminate\Support\Facades\Auth;
use Laravel\Socialite\Facades\Socialite;

class SocialAuthController extends Controller
{
    // Googleの認証ページにリダイレクト
    public function redirectToGoogle()
    {
        return Socialite::driver('google')->redirect();
    }

    // Googleからのコールバック処理
    public function handleGoogleCallback()
    {
        $googleUser = Socialite::driver('google')->stateless()->user();

        // google_id が一致するユーザーを検索、なければ新規作成
        $user = User::updateOrCreate(
            ['google_id' => $googleUser->getId()],
            [
                'name'   => $googleUser->getName(),
                'email'  => $googleUser->getEmail(),
                'google_id' => $googleUser->getId(),
            ]
        );

        Auth::login($user, true);

        return redirect()->intended('/dashboard');
    }
}

stateless() を使うことでセッションベースのCSRF検証をスキップできる。APIと組み合わせる場合や、セッションの問題が起きたときに有効だ。

6. ルートを追加（routes/web.php）

use App\Http\Controllers\SocialAuthController;

Route::get('/auth/google', [SocialAuthController::class, 'redirectToGoogle'])->name('auth.google');
Route::get('/auth/google/callback', [SocialAuthController::class, 'handleGoogleCallback']);

ルートを追加したら忘れずにキャッシュをクリアする。

php artisan route:clear

7. ログイン画面に Google ボタンを追加

resources/views/auth/login.blade.php に以下を追加する。

<div class="mt-4">
    <a href="{{ route('auth.google') }}"
       class="flex items-center justify-center w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
        <img src="https://www.svgrepo.com/show/475656/google-color.svg" alt="Google" class="w-5 h-5 mr-2">
        Googleでログイン
    </a>
</div>

Tailwind CSS を使っている場合はそのまま使えるスタイルだ。使っていない場合は適宜 CSS を当ててほしい。

User モデルの $fillable に google_id を追加

app/Models/User.php の $fillable に google_id を追加するのを忘れないこと。

protected $fillable = [
    'name',
    'email',
    'password',
    'google_id', // 追加
];

8. ハマりポイントまとめ

実装中によく遭遇するエラーと対処法をまとめておく。

Route [auth.google] not defined

php artisan route:clear

ルートを追加しても古いキャッシュが残っていると route('auth.google') が解決できずエラーになる。ルートを変更したら必ずキャッシュをクリアしよう。

Class “Laravel\Socialite\Facades\Socialite” not found

composer dump-autoload

パッケージインストール直後にオートローダーが更新されていないケースで発生する。composer dump-autoload を実行すれば解決する。それでも直らない場合は config/app.php の providers や aliases に Socialite が登録されているか確認しよう（Laravel 11以降は自動検出されるが念のため）。

error 400: redirect_uri_mismatch

Google Cloud Console の「承認済みのリダイレクトURI」に登録されているURIと、.env の GOOGLE_REDIRECT_URI が一致していないと発生する。

確認ポイント：

  • Google Cloud Console に /auth/google/callback を含む完全なURLが登録されているか
  • http / https のスキームが一致しているか
  • 末尾のスラッシュの有無が一致しているか
  • ローカルと本番でそれぞれ登録しているか

まとめ

Laravel の laravel/socialite を使えば、Google ソーシャルログインを比較的シンプルに実装できる。手順をおさらいすると以下の通りだ。

  1. Google Cloud Console で OAuthクライアントIDを発行し、リダイレクトURIを登録
  2. composer require laravel/socialite でパッケージをインストール
  3. config/services.php と .env に認証情報を設定
  4. マイグレーションで users テーブルに google_id を追加
  5. SocialAuthController を作成してリダイレクトとコールバック処理を実装
  6. web.php にルートを追加し、route:clear でキャッシュをクリア
  7. ログイン画面に Google ボタンを追加
  8. User モデルの $fillable に google_id を追加

ハマりポイントは主に「キャッシュ」と「リダイレクトURIの不一致」の2つだ。エラーが出たらまずこの2点を疑うとよい。

Socialite は Google 以外にも GitHub、Twitter（X）、Facebook など複数のプロバイダに対応している。同じ仕組みで他のソーシャルログインも追加できるので、ぜひ試してみてほしい。

RELATED POSTS