LaravelアプリケーションでGoogle認証を設定する方法

このデジタルの世界では、アプリケーションにスムーズで安全な認証プロセスを持たせることが重要です。これにより、ユーザー体験が向上し、アプリ全体のセキュリティも強化されます。

Google認証は、ユーザーがGoogleアカウントを使ってサイトにログインするための最も信頼され、便利な方法の一つです。これにより、もう一つのユーザー名とパスワードを覚える必要がなくなります。

Google OAuthをLaravelアプリケーションに統合することで、ログインプロセスが簡素化され、ユーザーのエンゲージメントが促進され、プラットフォームの信頼性が向上します。このチュートリアルでは、LaravelアプリケーションにGoogle認証を実装する手順を案内します。Google APIの認証情報の設定からLaravelのSocialiteパッケージの設定まで進めていきます。

Google Cloudコンソールにアクセスし、Googleアカウントでログインします。
トップナビゲーションバーの「プロジェクトを選択」ドロップダウンをクリックします。ポップアップウィンドウで、「新しいプロジェクト」をクリックして新しいプロジェクトを作成し、要求された詳細を入力します。その後、プロジェクトを作成をクリックします。
プロジェクトを作成したら、コンソールの左側メニューを開いて、API とサービス > 資格情報を選択してください。
資格情報ページで、資格情報の作成 > OAuth クライアント IDをクリックしてください。
これがクライアントIDを作成するのが初めての場合、同意画面の設定を求められます。設定 同意画面をクリックすることで、同意画面を設定できます。すでに同意画面を設定している場合は、このステップをスキップできます。
- アプリが一般公開用であれば外部を選択し、Google Workspace組織内のユーザーに限定される場合は内部を選択してください。
- アプリ名、ユーザーサポートのメールアドレス、ブランディング情報など、必要な詳細を記入してください。保存して続行をクリックします。

同意画面の設定を完了した後、認証情報ページに戻り、再度OAuth クライアント IDを選択してください。

アプリケーションタイプをウェブアプリケーションとして選択し、クライアント認証情報の名前を提供します（例えば、Laravelソーシャルログイン）。
Authorized Redirect URIs

の下に、アプリケーションのコールバックURLを追加してください:
- 例: http://your-app-url.com/callback/google
- ローカルでテストする場合は、http://127.0.0.1:8000/api/auth/google/callbackを使用してください。
作成をクリックすると、Googleがプロジェクト用のクライアントIDとクライアントシークレットを生成します。これらの資格情報を保存しておくと、次の手順で必要になります。

ステップ2: 新しいLaravelプロジェクトを作成し、Laravel Socialiteパッケージをインストール

準備ができていない場合は、以下のコマンドを使用して新しいLaravelプロジェクトを作成できます:

composer create-project --prefer-dist laravel/laravel social-auth-example

LaravelプロジェクトにGoogle認証を統合するために、Laravel Socialiteを使用します。Socialiteは、Google、Facebook、Twitterなどの人気のあるサービスとのOAuth認証を簡素化する、Laravelの第一級パッケージです。

Socialiteをインストールするには、Laravelプロジェクトのルートディレクトリでターミナルを開き、以下のコマンドを実行します:

composer require laravel/socialite

ステップ3: 環境変数を設定

このステップでは、Step 1で収集したGoogle OAuth資格情報を使用するように、Laravelアプリケーションを設定します。

プロジェクトのルートディレクトリにある.envファイルを見つけ、以下の環境変数を追加します:

GOOGLE_CLIENT_ID=your-client-id
GOOGLE_CLIENT_SECRET=your-client-secret
GOOGLE_REDIRECT_URL=http://your-domain.com/auth/google/callback

すべてのプレースホルダをシークレットで置き換えてください。

それぞれの環境変数を理解しましょう:

GOOGLE_CLIENT_ID: Googleから提供されるアプリのユニークな識別子。
GOOGLE_CLIENT_SECRET: あなたのアプリがGoogleのAPIと安全に認証するために使用するプライベートキーです。
GOOGLE_REDIRECT_URL: Googleがユーザーをログイン後にリダイレクトするURLです。これは、ステップ1で資格情報を作成する際に指定したリダイレクトURIと一致する必要があります。

ステップ4: 設定ファイルを更新する

Laravel SocialiteがGoogle OAuth資格情報を使用できるようにするために、config/services.phpファイルにプロバイダーの詳細を設定する必要があります。

services.phpファイルに、Googleプロバイダーのための以下の設定を追加してください：

'google' => [
    'client_id' => env('GOOGLE_CLIENT_ID'),        // あなたのGoogleクライアントID
    'client_secret' => env('GOOGLE_CLIENT_SECRET'), // あなたのGoogleクライアントシークレット
    'redirect' => env('GOOGLE_REDIRECT_URL'),      // あなたのGoogleリダイレクトURL
]

ステップ5: 認証のためのコントローラーとルートを作成する。

このステップでは、Google OAuthのリダイレクトとコールバックを処理するコントローラーを作成し、これらのメソッドをトリガーするために必要なルートを設定します。

次のArtisanコマンドを実行して、GoogleAuthControllerコントローラーを生成します：

php artisan make:controller GoogleAuthController

これにより、app/Http/Controllers/GoogleAuthController.phpにコントローラーが作成されます。

新しく作成されたGoogleAuthController.phpの内容を以下のコードで置き換えてください：

<?php

namespace App\\Http\\Controllers;

use App\\Http\\Controllers\\Controller;
use App\\Models\\User;
use Laravel\\Socialite\\Facades\\Socialite;
use Illuminate\\Support\\Facades\\Auth;
use Illuminate\\Support\\Str;
use Throwable;

class GoogleAuthController extends Controller
{
    /**
     * ユーザーをGoogleのOAuthページにリダイレクトします。
     */
    public function redirect()
    {
        return Socialite::driver('google')->redirect();
    }

    /**
     * Googleからのコールバックを処理します。
     */
    public function callback()
    {
        try {
            // Googleからユーザー情報を取得する
            $user = Socialite::driver('google')->user();
        } catch (Throwable $e) {
            return redirect('/')->with('error', 'Google authentication failed.');
        }

        // データベースにユーザーがすでに存在するか確認する
        $existingUser = User::where('email', $user->email)->first();

        if ($existingUser) {
            // すでに存在する場合はユーザーをログインさせる
            Auth::login($existingUser);
        } else {
            // それ以外の場合は新しいユーザーを作成してログインさせる
            $newUser = User::updateOrCreate([
                'email' => $user->email
            ], [
                'name' => $user->name,
                'password' => bcrypt(Str::random(16)), // ランダムなパスワードを設定する
                'email_verified_at' => now()
            ]);
            Auth::login($newUser);
        }

        // ユーザーをダッシュボードや他のセキュアなページにリダイレクトする
        return redirect('/dashboard');
    }
}

このコントローラーには2つの関数が含まれています：

Redirect: ユーザーをGoogleのOAuthページにリダイレクトします。
Callback: Googleからのコールバックを処理し、ユーザーをダッシュボードや他のセキュアなページにリダイレクトします。

redirectおよびcallbackのルートをroutes/web.phpファイルで定義しましょう：

use App\\Http\\Controllers\\GoogleAuthController;

// GoogleのOAuthページにリダイレクトするためのルート
Route::get('/auth/google/redirect', [GoogleAuthController::class, 'redirect'])->name('auth.google.redirect');

// Googleからのコールバックを処理するためのルート
Route::get('/auth/google/callback', [GoogleAuthController::class, 'callback'])->name('auth.google.callback');

ステップ6：プロジェクトでLaravelのGoogle認証をテストします。

Google認証を設定したので、これからスムーズに動作することを確認するためにテストを行います。このステップでは、ユーザーをGoogleの認証ページにリダイレクトし、ログインが成功した場合に保護されたルートに戻すログインボタンを使用します。

まず、ユーザーがGoogleでログインするオプションを提供する次のボタンを追加します：

<a href="{{ route('auth.google.redirect') }}" class="btn bg-blue-100 p-3 shadow-sm border rounded-md text-blue-900">
    Login with Google 
</a>

テストの目的で、保護されたルートとダッシュボードを定義しました。このルートは認証されたユーザーのみがアクセスできます。ログイン後、ユーザーをこのページにリダイレクトします。 web.phpでこのルートを定義しましょう：

Route::get('/dashboard', function () {
    return view('dashboard');
})->middleware('auth')->name('dashboard');

次に、ダッシュボード用のbladeビューファイルをresources/views/dashboard.blade.phpに作成します。ダッシュボードの内容は次のとおりです：

<html>
    <head>
        <title>Dashboard</title>
    </head>

    <body>
        <h1>Dashboard</h1>
        <p>Welcome to the dashboard, {{ auth()->user()->name }}!</p>
    </body>

</html>

ここでは、Googleアカウントでサインインしたユーザーの名前を表示するためにauth()->user()ヘルパーを使用しています。

さて、ログインしてみましょう。

これがログインページです：

ボタンをクリックすると、Googleの同意画面にリダイレクトされます：

続行をクリックすると、アプリにログインされるはずです。以下のような画面にリダイレクトされます。ユーザーの名前とともに歓迎メッセージが表示されます。

以上です！あなたはLaravelプロジェクトでGoogle認証を実装してテストしました。ユーザーはGoogleアカウントを使用してサインインできるようになり、セキュリティと利便性の両方が向上しました。

フルの実装については、このプロジェクトの完全なソースコードはGitHubで見つけることができます： Laravel用Googleログイン統合 – GitHubリポジトリ

結論

これで、Socialiteを使用してLaravelアプリケーションでGoogle認証を設定しました！この方法を使用して、config/services.phpファイルに追加の設定を行うことで、Facebook、Twitter、GitHubなどの他のOAuthプロバイダを含めることができます。

Google OAuthの統合は、現代のWebアプリケーションにおける一般的な機能であり、Laravel Socialiteを使用すれば簡単に実装できます。

GitHub、Twitter、Facebookなどの他のソーシャルログインオプションが必要な場合は、準備が整ったLaravel SaaSボイラープレートを検討することができます。

ほとんどの事前構築されたLaravel SaaSボイラープレートは、Google、GitHub、Facebook、Twitterなどの人気プラットフォームとシームレスに統合されています。たとえば、次のようなプレミアムやオープンソースのリソースがあります：

Laravelスターターキット（プレミアム）
- Tailwind CSSに基づく
- ワンクリックマジックリンクのセットアップが付属
- 従来のメール/パスワードログインを含むさまざまな認証方法をサポート
- 2要素認証
SaaSボイラープレート（オープンソース）
- 単一データベースのマルチテナンシー
- 開発者パネル
- パーソナルアクセストークンの管理
Laranuxt（オープンソース）
- Nuxt UIは、Tailwind CSSを使用してNuxtJSチームによって構築されたコンポーネントのコレクション
- ユーザーセッションとログイン/ログアウトを支援する認証ライブラリ
- 例の認証ミドルウェア
Laravel Vueボイラープレート（オープンソース）
- Laravel EchoとPusherによるWebSockets。
- PWA開発向けのWorkbox。
- Laravel GraphQL

これらのLaravel SaaSボイラープレートのいずれかを使用すると、すべてをゼロから設定する必要がなく、ワークフローを迅速化できます。

この記事の準備に協力してくれた、経験豊富なLaravel開発者で熱心なDeep Kumbhareさんに特別な感謝を申し上げます。

この記事があなたのお手伝いとなり、LaravelでGoogleログインを設定する際に役立つことを願っています。

LaravelアプリケーションでGoogle認証を設定する方法

目次

前提条件

LaravelアプリでGoogle認証を使用する利点

ステップ1：Google Cloudプロジェクトを設定する

ステップ2: 新しいLaravelプロジェクトを作成し、Laravel Socialiteパッケージをインストール

ステップ3: 環境変数を設定

ステップ4: 設定ファイルを更新する

ステップ5: 認証のためのコントローラーとルートを作成する。

ステップ6：プロジェクトでLaravelのGoogle認証をテストします。

結論

目次

前提条件

LaravelアプリでGoogle認証を使用する利点

Laravel Googleログインの設定方法

ステップ1：Google Cloudプロジェクトを設定する

ステップ2: 新しいLaravelプロジェクトを作成し、Laravel Socialiteパッケージをインストール

ステップ3: 環境変数を設定

ステップ4: 設定ファイルを更新する

ステップ5: 認証のためのコントローラーとルートを作成する。

ステップ6：プロジェクトでLaravelのGoogle認証をテストします。

結論