Tích hợp đăng nhập Google cho website bằng PHP và MySQL

Đặ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 google, 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
  • 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.

  • Thực hiện
  • Đầu tiên:

Các bạn truy cập vào địa chỉ: https://console.cloud.google.com/

Bước 1: Đối với tài khoản lần đầu tiên các bạn cần tạo 1 project mới bằng cách nhấp vào CREATE PROJECT:

Bước 2: Sau đó các bạn hãy đặt tên cho project của mình và ấn CREATE:

Lưu ý: Đối với tài khoản thường thì chỉ cần điền ô đầu tiên không cần điền 2 ô dưới nhé

Bước 3: Sau 1 khoảng thời gian để dự án các bạn tạo xong, các bạn hãy chọn vào tab Credentials > Create Credentials > 0Auth client ID.

Bước 4: Sau khi vào trang tiếp theo các bạn nhấp vào CONFIGURE CONSENT SCREEN

Tiếp tục chọn: External > Create

Bước 5: Tại trang Edit app registration các bạn chỉ quan tâm những thông tin ở App Information và Developer contact information và điền những thông tin vào ô trong đó nhé > Save And Continute

Ở trang Scopes Test users nếu các bạn không yêu cầu quyền gì hoặc thêm người dùng để test thì cứ bỏ qua nó và ấn SAVE AND CONTINUE.

Sau khi tất cả bước trên hoàn tất hãy ấn vào Back to Dashboard.

Bước 6: Ta cùng quay lại bước 3 sẽ hiển thị 1 giao diện khác khi bạn ấn create 0auth client ID. Tại đây ở phần Application type chọn Web Application.

Sau khi chọn xong sẽ hiển thị sao diện như bên dưới

Name: Tên bạn muốn đặt cho APP của bạn.

Authorised JavaScript origins: Là phần trang chủ của các bạn. (ví dụ: http://localhost/ ).

Authorised redirect URls: Là đường dẫn đến file xử lý khi nhận được dữ liệu dạng GET của google trả về. (ví dụ: http://localhost/xulyGoogle.php ).

Cuối cùng là ấn CREATE.

Lúc này Google sẽ cung cấp cho bạn 2 key là: Your Client ID Your Client Secret.

Nhớ lưu 2 tụi nó lại nha ????. Mà lỡ có quên thì các bạn vào phần Credentials và tìm cái app của mình và nhấp vào cây bút chì > ở góc bên phải bạn sẽ thấy 2 cái key trên nha. Tiến hành code thôi nào ????????????????????????.

  • Tổ chức code:
  • Tải thư viện hỗ trợ:

https://github.com/googleapis/google-api-php-client/releases

(Chọn PHP version bạn đang sử dụng nha. Ở đây mình sẽ sử dụng bản PHP-7.4).

  • Kết nối database: mình sẽ sử dụng PDO kết nối với mySQL nhé.

+ Kết nối database kế thừa (Class): Tải về tại đây.

+ Kết nối database function: Tải về tại đây.

Okay vậy là chúng mình đã đủ dụng cụ để chiến rồi đó 😀 các bạn hãy mở xampp và tạo 1 dự án với cấu trúc như bên dưới nhé

Index.php: Trang dẫn vào trang web của các bạn.

Database.php: File kết nối PHP đến mySQL để thực hiện lưu trữ thông tin vào cơ sở dữ liệu.

xulyGoogle.php: Nơi tiếp nhận kết quả để xử lý thông tin từ Google trả về đã khai báo ở google.

Thư mục:

Login-google: Thư viện hỗ trợ kết nối tới google ở trên.

Views: Nơi chứa các file giao diện như: header,footer,css,js…

  1. Tạo Database

Bạn tạo 1 table với cấu trúc như sau: (tên bảng là: TEST)

  1. Kết nối tới database: database của mình là ASM

(Các bạn sử dụng 1 trong 2 file connect ở trên nhé.)

Dbname: Tên database

$username: Tài khoản phpmyadmin (mặc định xampp là: root)

$password: Mật khẩu phpMyAdmin (Mặc định là rỗng)

  1. Tổ chức index:

Mình sẽ gọi các file như sau:

Header: Đầu trang

Database: Kết nối cơ sở dữ liệu

Function: File viết chức năng

Footer: Chân trang

Mình sẽ sử dụng Session để lưu thông tin người dùng nên mình sẽ khai báo session_start() và nếu tìm thấy $_SESSION[‘id’] thì sẽ dẫn đến trang Home ngược lại mình sẽ chuyển đến trang LOGIN.

  1. Giao diện login:

Code: Sử dụng BOOTSTRAP 5.1

  1. Viết chức năng:
  • Tạo chức năng lấy thông tin client với Client ID Client Secret mà ở trên mình đã nói các bạn hãy lưu lại. Hãy viết vào file function.php nhé.

Code:

  • function clientGoogle(){
  •         // Lấy những giá trị này từ https://console.google.com
  •         $client_id = ”; // Client ID
  •         $client_secret = ”; // Client secret
  •         $redirect_uri = ‘http://localhost/xulyGoogle.php’; // URL tại Authorised redirect URIs
  •         $client = new Google_Client();
  •         $client->setClientId($client_id);
  •         $client->setClientSecret($client_secret);
  •         $client->setRedirectUri($redirect_uri);
  •         $client->addScope(“email”);
  •         $client->addScope(“profile”);
  •         return $client;
  •    
  • }

Lưu ý: Khi gọi file function ở index phải nằm dưới file thư viện kết nối của google nhé.

  1. Tạo đường dẫn để đi đến trang đăng nhập của google.

Sau khi các bạn có được 1 function là clientGoogle() hãy gán cho nó 1 biến nào đó để cho dễ nhớ dễ sử dụng nhé ở đây mình sẽ gán cho nó là 1 biến $client.

Hàm createAuthUrl() có sẵn trong thư viện login google vì thế mình chỉ cần gọi hàm kia để lấy thông tin client và xuất thông tin URL đăng nhập ra thôi 😀

Có biến $url các bạn chỉ việc gán vào href của nút đăng nhập google là được.

  1. Xử lý khi người dùng login vào:

Sau khi login ở đường link bạn đã khai báo sẽ được google trả về các dữ liệu dạng GET như sau:

http://localhost/xulyGoogle.php?code=4%2F0A34XCWi37rAPAcxITnJtD0-aQbcE2H6YV_SHvhmu4dbqC28TajyAWV1vue75Xj5WAQ7aLQ&scope=email+profile+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.profile+openid&authuser=2&prompt=consent#

Lúc này các bạn chỉ quan tâm đến biến code hay trong php sẽ là $_GET[‘code’]

Và các bạn chỉ cần lấy biến $_GET[‘code’] về và xử lý tiếp ở file xulyGoogle.php nhé.

Xử lý:

Viết 2 hàm: Kiểm tra thông tin người dùng và hàm thêm người dùng

// Kiểm tra người dùng

function checkThongTin($username,$rule=”){

    // nếu rỗng thì kiểm tra theo username

    if($rule == ”){

        $sql=’SELECT * FROM `test` WHERE `username` = ?’;

    // ngược lại kiểm tra theo id

    }else{

        $sql=’SELECT * FROM `test` WHERE `id` = ?’;

    }

    return pdo_query_one($sql,$username);

}

// Thêm người dùng

function insertUser($username, $password,$token,$email,$avatar){

    $sql=’INSERT INTO `test`(`username`,`password`,`token`,`email`,`avatar`)VALUES(?, ?, ?, ?, ?)’;

    pdo_execute($sql,$username, $password,$token,$email,$avatar);

}

Code file xulyGoogle.php:

<?php

ob_start(); // khắc phục lỗi chuyển hướng header

session_start();

// Gọi file Database vào sử dụng

require ‘database.php’;

// Gọi thư viện login goolge

require ‘login-google/vendor/autoload.php’;

// Gọi file function

require ‘function.php’;

// client

$client = clientGoogle();

// Tạo ra 1 biến mới để lấy thông tin người dùng

$service = new Google_Service_Oauth2($client);

// Kiểm tra xem có $_GET[‘code’] không. nếu không thì trở về login còn không thì tiếp tục xử lý

if(isset($_GET[‘code’])){

    // Kiểm tra mã code có hợp lệ hay không

    $check = $client->authenticate($_GET[‘code’]);

    // Mã code sẽ phát sinh trong lần request đầu tiên lần phát sinh sau sẽ lỗi.

    // Và mã code sẽ sinh ra 1 đoạn array có các key là: error(mã lỗi), error_description(Thông báo lỗi)

    if(isset( $check[‘error’] )){

        echo $check[‘error_description’];

    }else{

        // Thông tin người dùng

        $user = $service->userinfo->get();

        // Lấy thông tin người dùng

        $info = checkThongTin($user->email ); // lấy token bằng hàm getAccessToken

        if(!$info){

            // Nếu không có tài khoản thì thêm 1 tài khoản mới

            $email = $user->email; // var_dump($user) ra xem

            $avatar = $user->picture; // var_dump($user) ra xem

            $password = $user->name; // password tạo ra cho vui nên mình gán luôn là fullname nha ^^

            $token = mt_rand(1000,50000); // hàm getAccessToken của thư viện

            insertUser($email, $password,$token,$email,$avatar); // thêm người dùng vào nè

            // SET SESSION[‘id’] và trở về trang chủ

            $_SESSION[‘id’] = $info[‘id’];

            header(‘location: /index.php’);

        }else{

            // Nếu đã có tài khoản thì set SESSION[‘id’] và trở về lại trang chủ

            $_SESSION[‘id’] = $info[‘id’];

            header(‘location: /index.php’);

        }

    }

}else{

    header(‘location: /index.php’);

}

?>

Xử lý thêm 1 xíu ở file Home.php nữa là xong rồi ^^

<?php

// gọi hàm lấy thông tin dựa vào session id nè

$user_info = checkThongTin($_SESSION[‘id’], 1);

?>

<div>

    <h2>

Xin chào bạn. <strong class=’text-success’><?= $user_info[‘password’] ?></strong>

</h2>

<h4>Email của bạn là: <strong class=’text-primary’> <?= $user_info[’email’] ?></strong></h4>

<form action=””>

   

    <a href=’logout.php’ class=’btn btn-sm btn-danger’>Đăng xuất</a>

</form>

</h2>

</div>

Các bạn tạo thêm 1 file logout.php để xóa SESSION đi nữa là xong rồi ^^:

<?php

session_start(); // Khai báo hàm session cho File logout trước

session_destroy(); // hàm hủy tất cả các session trên trang web

header(‘location: /index.php’);

?>

Vậy là xong rồi đó ^^. Chúc các bạn thành công.

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Ệ

ĐỂ LẠI CÂU HỎI NẾU BẠN CÓ THẮC MẮC

GỬI BÌNH LUẬN

Hãy bình luận/đặt câu hỏi cùng Cao Đẳng Việt Mỹ ngay nhé.
Thông tin của bạn sẽ không được hiển thị công khai.
Các trường bắt buộc được đánh dấu *