如何使用 Socialite 通过 Google 登录您的 Laravel 11 应用程序

使用社交帐户创建身份验证现在非常流行。

我们已经在 Laravel 中看到了使用 LinkedIn 登录和使用 Twitter 登录。

在本文中，我们将使用 OAuth 2.0 身份验证系统通过 Google 帐户登录我们的 Laravel 应用程序。

这是分步指南：

第 1 步：安装 Laravel 11

您可以使用以下命令来安装新的 Laravel项目：

composer create-project --prefer-dist laravel/laravel googlelogin

进入项目文件夹：

cd googlelogin

第2步：配置数据库

在本教程中，我使用 MySQL 数据库。

要将我们的 Laravel 应用程序连接到 MySQL 数据库，您需要修改 .env 文件。

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=8889
DB_DATABASE=googlelogin
DB_USERNAME=root
DB_PASSWORD=root

第 3 步：安装 Jetstream

Jetstream 实现应用程序的登录、注册、电子邮件验证、双因素身份验证、会话管理、通过 Laravel Sanctum 的 API 以及可选的团队管理功能。

要在 Laravel 中安装 Jetstream，请使用以下命令：

composer require laravel/jetstream

安装后，您需要发布Jetstream的资产。

php artisan jetstream:install livewire

它将安装一些库并创建表和一些配置。

第四步：安装社交名流包

Socialite 是一个特殊的包，用于在 Laravel 中创建社交 OAuth 2.0 身份验证。

使用以下命令安装软件包：

composer require laravel/socialite

第 5 步：在 Google Console 上设置开发者应用程序

要创建新的 Google 开发人员应用程序，请访问以下 URL：https://console.cloud.google.com/projectcreate

创建项目后，您将被重定向到此页面：

在这里，在“OAuth同意屏幕”上，选择“外部”单选按钮，然后单击“创建”，如上图所示。

单击“CREATE”按钮后，您将必须创建一个如下图所示的应用程序：

您必须在此处填写应用程序名称和用户支持电子邮件字段。

现在，如果您向下滚动页面，您将看到开发者联系信息并在那里提供您的电子邮件 ID，如下所示：

下一步是“范围”，您可以根据您的要求添加范围。

现在，您将看到“测试用户”部分，这是可选的。

现在，请返回仪表板，因为我们的应用程序已设置。

单击以下链接转到凭据页面：https://console.cloud.google.com/apis/credentials

单击“CREATE CREDENTIALS”，然后在弹出窗口中单击“OAuth clientID”，如下图所示：

让我们创建一个 OAuth 客户端 ID，如下所示：

在下一步中，创建应用程序类型：

在这里，您必须选择“Web 应用程序”作为应用程序类型，并为您选择的应用程序命名。

如果向下滚动此页面，您将看到“授权重定向 URI”部分。像这样填写应用程序的重定向 URI：http://localhost:8000/auth/callback

现在，您将看到实际的客户端 ID 和客户端密码，如下所示：

现在复制“Client ID”和“Client Secret”并将其粘贴到 .env 文件中，如下所示：

GOOGLE_CLIENT_ID=[your_id]
GOOGLE_CLIENT_SECRET=[your_key]
REDIRECT_URI=http://localhost:8000/auth/callback

现在，打开 config/services.php 文件并添加以下配置：

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

第6步：修改users表

我们必须通过添加“google_id”列来修改数据库中的现有用户表。

php artisan make:migration add_google_id_to_users

添加这样的列：

string('google_id')->after('remember_token')->nullable()->unique();
        });
    }

    /**
     * Reverse the migrations.
     */
    public function down(): void
    {
        Schema::table('users', function (Blueprint $table) {
            $table->dropColumn('google_id');
        });
    }
};

运行此迁移以向用户表添加一列：

php artisan migrate

第 7 步：将 google_id 添加到 User.model 文件中

在 User.php 模型文件中，您必须将 google_id 添加到 $fillable 属性。

<?php

namespace App\Models;

// use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
use Laravel\Fortify\TwoFactorAuthenticatable;
use Laravel\Jetstream\HasProfilePhoto;
use Laravel\Sanctum\HasApiTokens;

class User extends Authenticatable
{
    use HasApiTokens;
    use HasFactory;
    use HasProfilePhoto;
    use Notifiable;
    use TwoFactorAuthenticatable;

    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    protected $fillable = [
        'name',
        'email',
        'password',
        'google_id'
    ];

    /**
     * The attributes that should be hidden for serialization.
     *
     * @var array
     */
    protected $hidden = [
        'password',
        'remember_token',
        'two_factor_recovery_codes',
        'two_factor_secret',
    ];

    /**
     * The accessors to append to the model's array form.
     *
     * @var array
     */
    protected $appends = [
        'profile_photo_url',
    ];

    /**
     * Get the attributes that should be cast.
     *
     * @return array
     */
    protected function casts(): array
    {
        return [
            'email_verified_at' => 'datetime',
            'password' => 'hashed',
        ];
    }
}

第8步：创建一个GoogleController

要创建控制器，请使用以下命令：

php artisan make:controller GoogleController

这个 GoogleController.php 将有两个基本功能：

redirectToGoogle()：这将重定向到 Google 应用程序进行身份验证。
handleGoogleCallback()：这将在身份验证成功后回调到我们的应用程序。

以下是 GoogleController.php 文件的完整代码：

redirect();
    }

    /**
     * Handle Google authentication callback.
     *
     * @return RedirectResponse
     */
    public function handleGoogleCallback(): RedirectResponse
    {
        try {
            $googleUser = Socialite::driver('google')->user();
        } catch (Throwable $e) {
            return redirect()->route('login')->with('error', 'Google authentication failed.');
        }
        // Retrieve user from the database by google_id or create a new user
        $user = User::firstOrCreate(
            ['google_id' => $googleUser->id],
            [
                'name' => $googleUser->name,
                'email' => $googleUser->email,
                'password' => Hash::make(Str::random(16))
            ]
        );

        // Login the user
        Auth::login($user, true); // Remember the user

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

基本上，在这段代码中，我们首先将用户重定向到 Google 应用程序，他们在其中输入电子邮件和密码。

验证后，它返回一个回调，这就是我们的回调 URI。从那时起，我们将保存用户名、电子邮件和密码，并将用户登录到我们的应用程序中。

第9步：注册路由

在routes/web.php文件中添加以下代码：

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

Route::controller(GoogleController::class)->group(function () {
    Route::get('auth/redirect', 'redirectToGoogle')->name('auth.google');
    Route::get('auth/callback', 'handleGoogleCallback');
});

第10步：将登录链接添加到login.blade.php文件中

在 resources/views/auth/login.blade.php 文件中添加以下代码。

    
        
            
        

        

        @session('status')
            
                {{ $value }}
            
        @endsession

        
            @csrf

            
                
                
            

            
                
                
            

            
                
                    
                    {{ __('Remember me') }}
                
            
            
                
                    Login with Google
                
            

            
                @if (Route::has('password.request'))
                    
                        {{ __('Forgot your password?') }}
                    
                @endif

                
                    {{ __('Log in') }}

保存此文件，然后转到此 URL：http://localhost:8000/login