Categories
Chia sẻ

Hướng dẫn viết tính năng Đăng nhập với Google cho website sử dụng php

Bạn có thể sử dụng tính năng đăng nhập với Google (Login with google) trên trang web của bạn để cho phép người dùng đăng nhập bằng tài khoản google của họ. Bạn cũng có thể quản lý người dùng trong trang project google của bạn. Bài viết này hướng dẫn cách viết tính năng Đăng nhập với Google cho website với ví dụ và demo

DEMO LOGIN WITH GOOGLE

DOWNLOAD LOGIN WITH GOOGLE

Tạo project Google và kết nối với Google

Bước 1: Tạo project mới trên google

Các bạn truy cập vào trang https://console.developers.google.com/start Chọn phần Create an empty project tiếp đó điền tên project mà bạn muốn rồi click nút Create

Tạo project google

Bước 2: Cấu hình project

Trong Dashboard của project bạn vào tab APIs & auth chọn tiếp Consent screen rồi điền các thông tin cần thiết cuối cùng click nút Saves

02-dien-cac-thong-tin-project-google

 

Sau khi đã điền thông tin và save lại ở bước trên, các bạn chọn tiêp tab Credentials rồi chọn Create new Client ID trong phần OAuth popup nhảy lện bạn chọn Web application (cái này mặc định rồi) tiếp đến điền thông tin (chú ý dùng http thay vì https nếu site bạn ko có)  cuối cùng click nút Create Client ID

03-tao-oauth2-trong-project-google

Chú ý ở phần Authorized rederect URIs là đường dẫn trả về trang của bạn sau khi đăng nhập thành công từ google

Tạo xong client ID rồi trong tab Credentials này bạn tiếp tục Create new key trong phần Public API access khi popup hiện lên chọn  Browser Key rồi Create

Làm xong bước 2 này bạn đã có đủ OAuth id + key kèm public api key accesss, hoàn thành phần tạo project cho website sử dụng tính năng đăng nhập bằng google

Bước 4: Tải mã nguồn đăng nhập bằng Google sử dụng php

Các bạn download tại đây: DOWNLOAD LOGIN WITH GOOGLE

Bước 5: Sửa mã nguồn, chèn ID, Secret và key của project vừa tạo

Các bạn mở file login-with-google/index.php

session_start();
$google_client_id 		= 'CLIENT_ID';
$google_client_secret 	= 'CLIENT_SECRET';
$google_redirect_url 	= 'http://demo.trinhtuantai.com/login-with-google/'; //path to your script
$google_developer_key 	= 'API_KEY';
require_once 'Google/Google_Client.php';
require_once 'Google/contrib/Google_Oauth2Service.php';

$gClient = new Google_Client();
$gClient->setApplicationName('Login to demo.trinhtuantai.com');
$gClient->setClientId($google_client_id);
$gClient->setClientSecret($google_client_secret);
$gClient->setRedirectUri($google_redirect_url);
$gClient->setDeveloperKey($google_developer_key);

$google_oauthV2 = new Google_Oauth2Service($gClient);

//If user wish to log out, we just unset Session variable
if (isset($_REQUEST['reset'])) 
{
  unset($_SESSION['token']);
  $gClient->revokeToken();
  header('Location: ' . filter_var($google_redirect_url, FILTER_SANITIZE_URL)); //redirect user back to page
}

//If code is empty, redirect user to google authentication page for code.
//Code is required to aquire Access Token from google
//Once we have access token, assign token to session variable
//and we can redirect user back to page and login.
if (isset($_GET['code'])) 
{ 
	$gClient->authenticate($_GET['code']);
	$_SESSION['token'] = $gClient->getAccessToken();
	header('Location: ' . filter_var($google_redirect_url, FILTER_SANITIZE_URL));
	return;
}


if (isset($_SESSION['token'])) 
{ 
	$gClient->setAccessToken($_SESSION['token']);
}


if ($gClient->getAccessToken()) 
{
	  //For logged in user, get details from google using access token
	  $user 				= $google_oauthV2->userinfo->get();
	  $user_id 				= $user['id'];
	  $user_name 			= filter_var($user['name'], FILTER_SANITIZE_SPECIAL_CHARS);
	  $email 				= filter_var($user['email'], FILTER_SANITIZE_EMAIL);
	  $profile_url 			= filter_var($user['link'], FILTER_VALIDATE_URL);
	  $profile_image_url 	= filter_var($user['picture'], FILTER_VALIDATE_URL);
	  $personMarkup 		= "$email<div><img src='$profile_image_url?sz=50'></div>";
	  $_SESSION['token'] 	= $gClient->getAccessToken();
}
else {
	//For Guest user, get google login url
	$authUrl = $gClient->createAuthUrl();
}

if(isset($authUrl)) //user is not logged in, show login button
{
	header("Location: ".$authUrl);
} 
else // user logged in 
{	
	//list all user details
	echo '<pre>'; 
	print_r($user);
	echo '</pre>';	
}

Thay CLIENT_ID, CLIENT_SECRET, API_KEY cũng như đường link trả về theo domain của bạn lấy thông tin trong project vừa tạo ở bước 1 và 2

Chú ý rằng nếu bạn thay đổi cấu trúc của thư mục hay rewrite lại đường dẫn thì phải đưa đường link chuẩn dẫn vào file này.

Tiếp theo các bạn chạy chính link trả về này, khi đăng nhập thành công trang sẽ đưa ra các thông tin gồm các thông tin tài khoản đăng nhập – như vậy là chúng ta đã kết nối thành công với google, việc tiếp theo là sử dụng dữ liệu này để đăng nhập trên website

 

Lưu và sử dụng dữ liệu để đăng nhập trên website của bạn

Phần này mình sẽ không làm ví dụ nữa vì mỗi website có cấu trúc và cách store users khác nhau. Mình chỉ xin nói qua về cách xử lý của mình khi đã nhận được dữ liệu trả về từ google sau khi làm như phần trên.

Giả sử mình có 1 bảng users(id, ggid, email, password, fullname, avatar, phone, gender, contact ….), website của mình có sử dụng tài khoản thường trên trang với các tính năng đăng nhập, đăng ký, sửa hồ sơ, thay mật khẩu … bây giờ làm thêm phần đăng nhập với Google thì ở file trả về kia sẽ làm các bước sau:

Check xem email trả về từ google kia đã có trong bảng users chưa ?

Nếu email đã có:

Update ggid của record đó

Select luôn user theo email mà không cần check password rồi tiến hành set đăng nhập (session hoặc cookie tùy kiểu đăng) nhập trên trang của bạn

Nếu email chưa có:

Insert dữ liệu vào bảng users

Select luôn user theo email mà không cần check password rồi tiến hành set đăng nhập (session hoặc cookie tùy kiểu đăng) nhập trên trang của bạn

Một cách khác các bạn có thể tạo ra mật khẩu fake khi các user đăng nhập từ facebook bằng cách dùng 1 số hàm mã hóa nối id facebook trả về với 1 chuỗi nào đó chẳng hạn.

Chúc các bạn thành công !

Xem thêm: Viết tính năng Đăng nhập với Facebook cho website sử dụng Facebook PHP SDK

 

Leave a Reply

Your email address will not be published. Required fields are marked *