如何在 Laravel 應用程序中設置 Google 認證

在這個數位世界中，您的應用程式要擁有順暢且安全的身分驗證流程非常重要。這有助於提升使用者體驗和應用程式的整體安全性。

Google 身分驗證是使用者透過其 Google 帳戶登入網站時最值得信賴且方便的方式之一。這意味著他們不需要記住另一組使用者名稱和密碼。

將 Google OAuth 整合到您的 Laravel 應用程式中可以簡化登入流程，鼓勵使用者參與，並提升您平台的可信度。在本教學中，我將引導您完成在 Laravel 應用程式中實施 Google 身分驗證的步驟。從設定 Google API 憑證到配置 Laravel 的 Socialite 套件。

訪問Google Cloud控制台並使用您的Google帳戶登錄。
在頂部導航欄中點擊“選擇項目”下拉菜單。在彈出窗口中，點擊“新建項目”以創建一個新項目並提供請求的詳細信息。然後點擊建立項目。
創建專案後，打開控制台的左側菜單，選擇 API 與服務 > 憑證。
在憑證頁面上，點擊 創建憑證 > OAuth 客戶端 ID。
如果這是您第一次創建客戶端ID，系統將要求您配置同意畫面。您可以點擊配置同意畫面來配置您的同意畫面。如果您已經配置了同意畫面，則可以跳過此步驟。
- 如果您的應用程序供公眾使用，請選擇外部，如果僅限於您的 Google Workspace 組織內的用戶，請選擇內部。
- 填寫必填詳細信息，如應用程序名稱、用戶支持電子郵件和任何品牌信息。點擊保存並繼續。

完成設定同意畫面後，返回至憑證頁面，再次選擇OAuth 用戶端 ID。

將應用程式類型選擇為Web 應用程式，並為客戶端憑證提供一個名稱（例如，Laravel Social Login）。
在 授權重定向 URI 下，添加您應用程序的回調 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

為了將Google身份驗證集成到Laravel項目中，我們將使用Laravel Socialite。Socialite是一個官方的Laravel套件，可以簡化與Google、Facebook、Twitter等流行服務的OAuth身份驗證。

要安裝Socialite，在您的Laravel項目的根目錄中打開終端機並運行以下命令：

composer require laravel/socialite

步驟3: 配置環境變量

在此步驟中，我們將配置我們的Laravel應用程序以使用我們在第1步中收集的Google OAuth憑證。

找到您項目根目錄中的.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。這應與您在第一步驟中指定的重新導向 URI 相符。

步驟 4：更新配置文件

要讓 Laravel Socialite 使用 Google OAuth 憑證，我們需要在 config/services.php 文件中配置提供者詳細資訊。

在 services.php 文件中，添加以下配置以設定 Google 提供者：

'google' => [
    'client_id' => env('GOOGLE_CLIENT_ID'),        // 您的 Google Client ID
    'client_secret' => env('GOOGLE_CLIENT_SECRET'), // 您的 Google Client Secret
    'redirect' => env('GOOGLE_REDIRECT_URL'),      // 您的 Google Redirect 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');
    }
}

此控制器包含兩個函數：

Redirect: 重定向用戶到Google的OAuth頁面。
Callback: 處理來自Google的回調並將用戶重定向到儀表板或其他安全頁面。

讓我們在routes/web.php文件中定義redirect和callback的路由：

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>

為了測試的目的，我已經定義了一個受保護的路由和一個 dashboard。此路由僅對經過身份驗證的用戶可訪問。登錄後，我們將用戶重定向到此頁面。讓我們在 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>

在這裡，我們使用 auth()->user() 助手來顯示登錄用戶的姓名，該姓名是從他們用來登錄的 Google 帳戶中提取的。

現在，讓我們嘗試登錄。

這是登錄頁面：

點擊按鈕將重定向您到 Google 的同意屏幕：

點擊繼續，您應該已經成功登錄到應用程式。您將被重定向到如下所示的屏幕。您可以看到帶有用戶姓名的歡迎消息。

就是這樣！您已成功在 Laravel 專案中實現並測試了 Google 認證。現在您的用戶可以使用他們的 Google 帳戶登錄，增強了安全性和便利性。

要查看完整的實作，您可以在 GitHub 上找到此專案的完整原始碼：Laravel 的 Google 登入整合 – GitHub 存儲庫

結論

您現在已經在 Laravel 應用程式中設定了 Google 認證，並使用 Socialite！您可以通過將額外的配置添加到 config/services.php 檔案中，擴展此方法以包含其他 OAuth 提供者，如 Facebook、Twitter 或 GitHub。

Google OAuth 整合是現代 Web 應用程式的常見功能，而 Laravel Socialite 讓實現變得輕鬆。

如果您需要更多像 GitHub、Twitter 和 Facebook 之類的社交登入選項，則可以考慮使用現成的 Laravel SaaS 樣板。

大多數預建的 Laravel SaaS 樣板都提供與 Google、GitHub、Facebook 和 Twitter 等流行平台的無縫整合。例如，有一些高級和開源資源，如：

Laravel Starter Kit（高級）
- 基於 Tailwind CSS
- 提供一鍵式的魔法連結設定
- 支援包括傳統的電子郵件/密碼登入在內的各種驗證方法
- 雙因素認證
雲端軟體即服務基礎模板（開源）
- 單一資料庫多租戶
- 開發者面板
- 管理個人存取權杖
Laranuxt（開源）
- Nuxt UI，由 NuxtJS 團隊開發的一系列元件，搭載 Tailwind CSS
- 身份驗證函式庫，協助管理使用者會話和登入/登出
- 範例身份驗證中介軟體
Laravel Vue樣板（開源）
- 使用Laravel Echo和Pusher實現WebSockets。
- 使用Workbox進行更好的PWA開發。
- Laravel GraphQL

使用這些Laravel SaaS樣板之一可以加快工作流程，因為您無需從頭開始設置所有內容。

特別感謝 Deep Kumbhare，一位經驗豐富的 Laravel 開發者和愛好者，他幫助我準備這篇文章。

希望這篇文章能幫助你設置 Google 登錄與 Laravel。

如何在 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 認證。

結論