Laravel Socialite tích hợp xác thực Google vào website

Đặt vấn đề

Hiện nay để có thể tạo thêm nhiều sự tiện lợi cho người dùng, cũng như việc giúp người dùng không phải tạo quá nhiều tài khoản và phải nhớ từng account để truy cập vào từng hệ thống. Các ứng dụng website đã tạo ra nhiều tiện ích cho việc tạo tài khoản như việc bạn có thể login bằng tài khoản goole, facebook hoặc github..vv. Điều này không những giúp cho người dùng không cần mất thêm thời gian cho việc tạo 1 tài khoản mới và rồi phải nhớ tới nó mỗi lúc muốn đăng nhập vào hệ thống.

Ngoài ra tích hợp các mạng xã hội vào phần đăng nhập hệ thống website có nhiều các lợi ích như: Thu thập thêm thông tin người dùng như ngày sinh, nơi sinh sống, giới tính… những thông tin này chúng ta thường rút gọn trong quá trình đăng ký tài khoản. Kết hợp với các hệ thống bình luận sử dụng mạng xã hội rất thuận tiện.

Laravel Socialite tích hợp xác thực Google vào website

1. Mô tả ứng dụng

Đầu tiên mình sẽ nhấn nút đăng nhập google để login tài khoản

Sau đó mình sẽ chọn 1 tài khoản google để đăng nhập trang web của mình

Sau khi đăng nhập xong thì trang web sẽ chuyển tới trang chủ và hiển thị tên người dùng ở trên thanh menu.

1. Thực hiện

Sau đây là các bước để thực hiện đăng nhập với tài khoản Google Api:

B1: Tạo project laravel trên cmd bằng dòng lệnh:

+ composer create-project laravel/laravel login-google

+ cd login-google : Để chuyển đến folder login-google

+ php artisan serve : Để chạy server

+ Kết quả cuối sẽ được như thế này.

B2: Chỉnh migration user và chạy php artisan migrate để tạo bảng users

B3: Cài đặt package Socialite để kết nối với tài khoản google bằng dòng lệnh

composer require laravel/socialite

+ Thiết lập thông số cho Laravel Socialite

Trong file config/auth.php ta thêm đoạn code socialite

Giờ đến file config/services.php thiết lập thông số như hình dưới

+ Tại file .env ta khai báo giá trị cho các tham số client_id, client_secret, redirect qua các bước sau:

Bạn vào https://console.cloud.google.com, thực hiện đăng nhập rồi chọn CREATE IDENTIFIERS và chọn OAuth client ID

Tiếp theo bạn ở type of application chọn Web application và đặt tên cho api

Tại Allowed redirect URIs ta thêm đường dẫn chứ tên miền của bạn kèm theo

/ google/callback giống trong hình

Khi chọn create sẽ trả về cho chúng ta 2 trường này

Cuối cùng vào file .env tạo 3 biến giống trong hình rồi sao chép 2 trường trên và Allowed redirect URIs vào, vậy là khai báo xong các thông số cho .env

B4: Tạo Auth Login bằng các dòng lệnh

+ composer require laravel/ui

+ php artisan ui bootstrap

+ php artisan ui bootstrap –auth

+ npm install && npm run dev

B5: Tại controller app/Http/Controllers/Auth/LoginController.php ta xử lý hai hàm

redirectToProvider: Chuyển hướng người dùng sang OAuth Provider

handleProviderCallback: Lấy thông tin từ Provider, kiểm tra nếu người dùng đã tồn tại trong database thì đăng nhập, ngược lại nếu chưa thì lưu người dùng mới vào database.

<?php

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;

use App\Providers\RouteServiceProvider;

use Illuminate\Foundation\Auth\AuthenticatesUsers;

use Socialite;

use App\Models\User;

class LoginController extends Controller

    use AuthenticatesUsers;

    /**

     * Where to redirect users after login.

     *

     * @var string

     */

    protected $redirectTo = RouteServiceProvider::HOME;

    /**

     * Create a new controller instance.

     *

     * @return void

     */

    public function index()

    {

        return view(‘frontend.form.login’);

    }

    public function redirectToProvider($driver)

    {

        return Socialite::driver($driver)->redirect();

    }

    public function handleProviderCallback($driver)

{

     try {

        $user = Socialite::driver($driver)->user();

     } catch (\Exception $e) {

        return redirect()->route(‘login’);

    }

    $existingUser = User::where(’email’, $user->getEmail())->first();

    if ($existingUser) {

        auth()->login($existingUser, true);

    } else {

        $newUser                    = new User;

        $newUser->google_id       = $user->id;

        $newUser->name              = $user->name;

        $newUser->password              = $user->token;

        $newUser->email             = $user->email;

        $newUser->email_verified_at = now();

        $newUser->save();

        auth()->login($newUser, true);

    }

    return redirect(‘/’);

}

}

+ B6: ở routes/web.php các bạn reset lại route và thêm route như thế này:

Route::get(‘/’, [App\Http\Controllers\HomeController::class, ‘index’])->name(‘home’);

Route::get(‘login’, [App\Http\Controllers\Auth\LoginController::class, ‘index’])->name(‘login’);

//login google

Route::get(‘redirect/{driver}’, [App\Http\Controllers\Auth\LoginController::class, ‘redirectToProvider’])

 ->name(‘login.provider’);

 Route::get(‘{driver}/callback’, [App\Http\Controllers\Auth\LoginController::class, ‘handleProviderCallback’]);

+ B7: Tạo giao diện đăng nhập ta tạo liên kết có dạng sau

<button type=”button” class=”btn btn-light”> 

<a href=”{{ route(‘login.provider’, ‘google’) }}”>Đăng nhập google</a> 

</button>

Vậy là với website được xây dựng bằng laravel framework bạn có thể đăng nhập với google được rồi nha ☺ .

Tác giả: Thy Đào Quốc - Ngày viết: 22/03/2023

Danh mục: Chương trình đào tạo, CNTT - Thiết kế Website, CNTT - Ứng dụng phần mềm, Ngành Công nghệ thông tin - Ứng dụng phần mềm, NHÓM NGÀNH CÔNG NGHỆ THÔNG TIN