Cách tạo trang web đăng nhập với tài khoản Google
Để tạo một trang web cho phép đăng nhập và đăng xuất bằng Google bằng PHP, bạn cần sử dụng Google OAuth 2.0. Việc sử dụng đăng nhập bằng Google (Google Sign-In) mang lại nhiều lợi ích cho cả người dùng và nhà phát triển.
Sau đây VniTeach sẽ hướng dẫn cụ thể cách tạo trang web đăng nhập với tài khoản Google một cách đơn giản và dễ hiểu nhất.
Bước 1: Tạo một ứng dụng trên Google Developer Console
- Truy cập vào Google Developer Console: https://console.developers.google.com/.
- Tạo một dự án mới và kích hoạt dịch vụ “Google Sign-In” trong dự án đó.
- Tạo một OAuth 2.0 Client ID và cung cấp các thông tin cần thiết như URL chuyển hướng sau khi xác thực.
Thao tác cụ thể như sau:
1. Tạo một dự án mới bằng cách nhấp vào nút “Select a project” ở góc trên cùng bên trái và sau đó nhấn vào nút “New project”.
2. Đặt tên cho project ở mục Project name (nhớ đặt đúng tên ứng dụng vì sau này tên này sẽ hiển thị khi đăng nhập bằng Google). Mục Location thì để mặc định No organization rồi chọn CREATE để tạo.
3. Sau đó chọn Select Project ở hộp thông báo, chọn Credentials ở bên trái chọn New CREDENTIALS chọn OAuth client ID, chọn CONFIGURE CONSENT SCREEN, chọn External rồi CREATE. Tiếp theo bạn chỉ cần điền Tên ứng dụng, địa chỉ email hỗ trợ, mục App domain nhập http://localhost/google-login/redirect.php (vì lúc nãy chúng ta tạo dự án với tên thư mục là google-login), nhập email (chính là địa chỉ email bạn đang dùng và truy cập vào Google) tại mục Developer contact information, rồi chọn SAVE AND CONTINUE. Tiếp tục chọn SAVE AND CONTINUE rồi cũn chọn SAVE AND CONTINUE
4. Chọn Credentials ở bên trái rồi chọn CREATE CREDENTIALS, chọn OAuth client ID, mục Application type bạn chọn Web Application, tiếp tục tại mục Name bạn đặt tên cho ứng dụng của mình và chọn CREATE khi đó thì bảng thông báo thành công hiện ra với các thông tin về Client ID và Client secret để bạn dùng cho ứng dụng của mình.
Bước 2: Cài đặt thư viện Google API Client cho PHP
Trước tiên, bạn phải chắc chắn đã cài XAMPP hoặc WampServer, bạn nên chọn cài đặt XAMPP vì ứng dụng bao gồm của XAMPP có phiên bản thường cao hơn của WampServer, đặc biệt là phiên bản PHP phải cao hơn 7.4 thì mới sử dụng đăng nhập bằng Google được.
Tiếp theo bạn cần cài đặt ứng dụng Composser. Sau đó bạn vào thư mục gốc của XAMPP ở địa chỉ C:\xampp\htdocs rồi tạo thư mục với tên là dự án của bạn (ví dụ ở đây mình đặt tên là google-login) và tiến hành cài đặt thư viện google/apiclient bằng Composer. Bạn vào thư mục google-login sau đó gõ lệnh cmd ở thanh đường dẫn của thư mục để mở terminal và chạy lệnh sau:
composer require google/apiclientBước 3: Tạo ứng dụng sử dụng chức năng đăng nhập với Google
Tạo tệp config.php: Đây là nơi bạn sẽ cấu hình thông tin xác thực từ Google.
<?php
session_start();
// Cài đặt thông tin OAuth 2.0 từ Google Developer Console
$client_id = 'YOUR_CLIENT_ID';
$client_secret = 'YOUR_CLIENT_SECRET';
$redirect_uri = 'http://localhost/google-login/redirect.php';
// Tải các thư viện Google API Client
require_once __DIR__ . '/vendor/autoload.php';
// Tạo một đối tượng Google Client
$google_client = new Google_Client();
$google_client->setClientId($client_id);
$google_client->setClientSecret($client_secret);
$google_client->setRedirectUri($redirect_uri);
$google_client->addScope('email');
$google_client->addScope('profile');
?>Tiếp theo tạo trang login.php: Trang này chứa nút đăng nhập bằng Google và chuyển hướng đến trang xác thực Google.
<?php
require_once 'config.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login with Google</title>
</head>
<body>
<?php if (!isset($_SESSION['access_token'])): ?>
<a href="<?php echo $google_client->createAuthUrl(); ?>">Login with Google</a>
<?php endif; ?>
</body>
</html>Tạo trang redirect.php: Trang này nhận mã xác thực từ Google và thực hiện xác thực cuối cùng.
<?php
require_once 'config.php';
if (isset($_GET['code'])) {
// Thực hiện yêu cầu token từ Google
$token = $google_client->fetchAccessTokenWithAuthCode($_GET['code']);
// Lưu trữ token trong session
$_SESSION['access_token'] = $token;
}
// Chuyển hướng trở lại trang đăng nhập nếu xác thực thất bại
if (!isset($_SESSION['access_token'])) {
header('Location: login.php');
exit();
}
// Lấy thông tin người dùng từ Google API
$google_client->setAccessToken($_SESSION['access_token']);
$google_service = new Google_Service_Oauth2($google_client);
$user_info = $google_service->userinfo->get();
// In thông tin người dùng
echo 'Welcome, ' . $user_info->getName() . '!';
echo '<br>Email: ' . $user_info->getEmail();
?>Cuối cùng, bạn khởi động máy chủ và truy cập vào trang login.php ở địa chỉ localhost/googe-login/login.php. Bạn sẽ thấy nút “Login with Google”.
Sau khi đăng nhập bằng Google, bạn sẽ được chuyển hướng trở lại trang và thấy thông tin người dùng được hiển thị.
Lưu ý: Trong ví dụ trên, bạn cần thay thế YOUR_CLIENT_ID và YOUR_CLIENT_SECRET bằng thông tin thực tế từ Google Developer Console.
Chúc bạn thành công!