Giáo Trình Hay – Tài Liệu Hay – Giáo Trình CNTT – SEO – Thủ Thuật IT Tài liệu cntt,giáo trình cntt,tài liệu hay,giáo trình hay,thủ thuật hay,mẹo vặt hay,góc suy ngẫm,phần mềm hay,phần cứng,kỹ năng mềm,kỹ năm cứng,tâm sự thầm kín,seo,marketing online
Hướng dẫn viết tính năng Đăng nhập với Google cho website
78 Lượt xem
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.
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
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
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
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
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
|
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 !
Tagged with: Hướng dẫn viết tính năng Đăng nhập với Google cho website
Bài đăng
0 nhận xét:
Đăng nhận xét