Google cung cấp nhiều công cụ hữu ích cho những người phát triển web, bao gồm Google Login và Google One Tap, giúp tích hợp xác thực người dùng một cách nhanh chóng và bảo mật. Trong bài viết này, chúng ta sẽ đi qua từng bước để tích hợp Google Login và Google One Tap vào một ứng dụng Laravel. Dưới đây là hình ảnh minh họa, khi bạn vào 1 trang web ngay lập tức popup hiện ra để chúng ta có thể đăng nhập bằng google:

Bước 1: Tạo OAuth 2.0 Client ID trong Google Cloud Console

1. Truy cập Google Cloud Console:

   https://console.cloud.google.com/

2. Tạo Dự Án (Project):

   • Nếu chưa có dự án, hãy nhấn Create Project.
   • Đặt tên cho dự án (ví dụ: Laravel Google Auth) và nhấn Create.

3. Chuyển đến API & Services:

   • Ở menu bên trái, chọn API & Services > Credentials.

4. Bật OAuth 2.0 Client ID:

   • Nhấn Create Credentials > OAuth 2.0 Client ID.

5. Cấu hình OAuth Consent Screen (nếu chưa làm trước đó):

   • Trong quá trình tạo OAuth 2.0 Client ID, bạn sẽ được yêu cầu cấu hình OAuth consent screen.
   • Chọn External (dành cho ứng dụng công khai).
   • Điền các thông tin cơ bản:
     • App Name: Tên ứng dụng của bạn.
     • User Support Email: Email hỗ trợ (email của bạn).
     • Scopes: Giữ nguyên mặc định (chỉ yêu cầu các quyền cơ bản như email, profile).
     • Authorized domains: Thêm tên miền ứng dụng của bạn (hoặc localhost nếu đang phát triển).
     • Nhấn Save and Continue.

6. Tạo OAuth 2.0 Client ID:

   • Sau khi cấu hình xong Consent Screen:
     • Application Type: Chọn Web Application.
     • Name: Đặt tên cho OAuth Client (ví dụ: Laravel App).
     • Authorized JavaScript Origins: Thêm URL của ứng dụng (ví dụ: http://localhost hoặc tên miền thực tế).
     • Authorized Redirect URIs: Thêm URL callback (ví dụ: http://localhost/callback/google).
   • Nhấn Create và lưu lại Client ID và Client Secret.

Bước 2: Cài đặt Laravel Socialite

1. Cài đặt thư viện:

   Chạy lệnh sau trong terminal:

   composer require laravel/socialite

2. Cấu hình trong Laravel:

   • • Thêm thông tin trong file .env:

       GOOGLE_CLIENT_ID=your_google_client_id
       GOOGLE_CLIENT_SECRET=your_google_client_secret
       GOOGLE_REDIRECT_URL=http://localhost/callback/google

     • Cập nhật file config/services.php:

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

Bước 3: Thêm Route và Controller cho Google Login

1. Thêm Route: Mở file routes/web.php và thêm:

   use App\Http\Controllers\Auth\GoogleController;
   
   Route::get('login/google', [GoogleController::class, 'redirectToGoogle'])->name('login.google');
   Route::get('callback/google', [GoogleController::class, 'handleGoogleCallback']);

2. Tạo Controller:

   • Chạy lệnh:

     php artisan make:controller Auth/GoogleController

   • Trong file GoogleController.php, thêm logic sau:

     namespace App\Http\Controllers\Auth;
     
     use App\Http\Controllers\Controller;
     use Laravel\Socialite\Facades\Socialite;
     use Illuminate\Support\Facades\Auth;
     use App\Models\User;
     
     class GoogleController extends Controller
     {
         public function redirectToGoogle()
         {
             return Socialite::driver('google')->stateless()->redirect();
         }
     
         public function handleGoogleCallback()
         {
             $googleUser = Socialite::driver('google')->stateless()->user();
     
             // Tạo hoặc lấy người dùng từ database
             $user = User::updateOrCreate(
                 ['email' => $googleUser->getEmail()],
                 [
                     'name' => $googleUser->getName(),
                     'google_id' => $googleUser->getId(),
                     'avatar' => $googleUser->getAvatar(),
                 ]
             );
     
             // Đăng nhập
             Auth::login($user);
     
             return redirect()->route('home');
         }
     }

3. Cập nhật Model User:

   • Đảm bảo bảng users có các cột google_id và avatar. Tạo migration nếu chưa có:

     php artisan make:migration add_google_id_and_avatar_to_users_table --table=users

   • Trong file migration:

     public function up()
     {
         Schema::table('users', function (Blueprint $table) {
             $table->string('google_id')->nullable();
             $table->string('avatar')->nullable();
         });
     }

   • Chạy migration:

     php artisan migrate

Bước 4: Tích hợp Google One Tap

1. Tạo Helper Function

// app/Helpers/global.php
<?php

use Illuminate\Support\Facades\Auth;

if (!function_exists('isUserLoggedIn')) {
    function isUserLoggedIn()
    {
        return Auth::check();
    }
}

"autoload": {
    "files": [
        "app/Helpers/global.php"
    ]
}

composer dump-autoload

1. Thêm thư viện Google Identity Services

Trong file layout chính (vd: resources/views/layouts/app.blade.php), thêm:

<script>
    const isLoggedIn = {{ json_encode(isUserLoggedIn()) }};
</script>

<script src="https://accounts.google.com/gsi/client" async defer></script>

2. Hiển thị Google One Tap

Thêm JavaScript vào view của bạn (vd: welcome.blade.php):

<script>
    window.onload = function () {
        if (isLoggedIn) {
            console.log("Người dùng đã đăng nhập. Không hiển thị Google One Tap.");
            return;
        }

        google.accounts.id.initialize({
            client_id: "{{ env('GOOGLE_CLIENT_ID') }}",
            callback: handleCredentialResponse,
            cancel_on_tap_outside: false,
        });

        google.accounts.id.prompt((notification) => {
            if (notification.isNotDisplayed()) {
                console.warn('Google One Tap không được hiển thị: ', notification.getNotDisplayedReason());
            }
            if (notification.isSkippedMoment()) {
                console.warn('Google One Tap bị bỏ qua: ', notification.getSkippedReason());
            }
            if (notification.isDismissedMoment()) {
                console.warn('Người dùng đóng One Tap');
                document.getElementById('google-login-btn').style.display = 'block'; // Hiển thị nút nếu cần
            }
        });
    };

    function handleCredentialResponse(response) {
        fetch("{{ route('onetap.callback') }}", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "X-CSRF-TOKEN": "{{ csrf_token() }}"
            },
            body: JSON.stringify({ credential: response.credential })
        })
        .then(res => res.json())
        .then(data => {
            if (data.success) {
                window.location.reload(); // Đăng nhập thành công
            } else {
                alert('Đăng nhập thất bại!');
            }
        });
    }

    function triggerGoogleLogin() {
        window.location.href = "{{ route('login.google') }}";
    }
</script>

<div id="onetap-prompt"></div>
<button id="google-login-btn" 
        style="display: none; padding: 10px 20px; background-color: #4285F4; color: white; border: none; border-radius: 4px; cursor: pointer;"
        onclick="triggerGoogleLogin()">Đăng nhập với Google</button>

3. Xử lý callback Google One Tap

composer require google/apiclient

1. Thêm route:

   Route::post('onetap/callback', [GoogleController::class, 'handleOneTapCallback'])->name('onetap.callback');

2. Thêm logic trong GoogleController:

   1. use Illuminate\Http\Request;
      use Google_Client;
      
      public function handleOneTapCallback(Request $request)
      {
          $client = new Google_Client(['client_id' => env('GOOGLE_CLIENT_ID')]);
          $payload = $client->verifyIdToken($request->credential);
      
          if ($payload) {
              $user = User::updateOrCreate(
                  ['email' => $payload['email']],
                  [
                      'name' => $payload['name'],
                      'google_id' => $payload['sub'],
                      'avatar' => $payload['picture'],
                  ]
              );
      
              Auth::login($user);
      
              return response()->json(['success' => true]);
          }
      
          return response()->json(['success' => false], 401);
      }
      

Bước 4: Kiểm tra

• Google Login: Truy cập /login/google để kiểm tra đăng nhập thông qua OAuth.
• Google One Tap: Truy cập trang chủ hoặc bất kỳ view nào chứa mã One Tap để kiểm tra cửa sổ xuất hiện.

Lưu ý quan trọng

1. HTTPS: Google yêu cầu HTTPS để sử dụng Google One Tap. Nếu đang phát triển, bạn có thể sử dụng ngrok để tạo một URL HTTPS:

   ngrok http 8000​

2. Triển khai: Trên môi trường production, đảm bảo bạn đã cấu hình URL callback và domain trong Google Console.