Tính năng Đăng nhập bằng Google quản lý vòng đời của mã thông báo và quy trình OAuth 2.0, đơn giản hoá quá trình tích hợp với các API của Google. Người dùng luôn có thể chọn thu hồi quyền truy cập vào một ứng dụng của bạn bất cứ lúc nào.
Tài liệu này mô tả cách hoàn tất quy trình tích hợp cơ bản đối với tính năng Đăng nhập bằng Google.
Tạo thông tin xác thực cho phép
Mọi ứng dụng sử dụng OAuth 2.0 để truy cập API Google đều phải có thông tin xác thực uỷ quyền xác định ứng dụng tới máy chủ OAuth 2.0 của Google. Các bước sau đây sẽ giải thích cách tạo thông tin xác thực cho dự án của bạn. Sau đó, ứng dụng của bạn có thể sử dụng thông tin xác thực để truy cập API mà bạn đã bật cho dự án đó.
- Go to the Credentials page.
- Nhấp vào Tạo thông tin xác thực > Mã ứng dụng OAuth.
- Chọn loại ứng dụng Web application (Ứng dụng web).
- Đặt tên cho ứng dụng OAuth 2.0 rồi nhấp vào Create (Tạo)
Sau khi định cấu hình xong, hãy ghi lại mã ứng dụng khách đã tạo. Bạn sẽ cần có mã ứng dụng khách để hoàn tất các bước tiếp theo. (Mật khẩu ứng dụng khách cũng là nhưng bạn chỉ cần mã đó cho các hoạt động phía máy chủ.)
Tải Thư viện Google Platform
Bạn phải đưa Thư viện Google Platform vào các trang web tích hợp Đăng nhập bằng Google.
<script src="https://apis.google.com/js/platform.js" async defer></script>
Chỉ định mã ứng dụng khách của ứng dụng
Chỉ định ID ứng dụng khách mà bạn đã tạo cho ứng dụng của mình trong Google Developers Console
bằng phần tử meta google-signin-client_id.
<meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">
Thêm nút Đăng nhập bằng Google
Cách dễ nhất để thêm nút Đăng nhập bằng Google vào trang web của bạn là sử dụng nút đăng nhập được kết xuất tự động. Chỉ với một vài dòng mã, bạn có thể thêm một nút tự động định cấu hình để có văn bản phù hợp, biểu trưng và màu sắc cho trạng thái đăng nhập của người dùng cũng như phạm vi bạn yêu cầu.
Để tạo nút Đăng nhập bằng Google sử dụng các chế độ cài đặt mặc định, hãy thêm div
có lớp g-signin2 vào trang đăng nhập của bạn:
<div class="g-signin2" data-onsuccess="onSignIn"></div>
Lấy thông tin hồ sơ
Sau khi đăng nhập người dùng bằng Google bằng phạm vi mặc định, bạn có thể truy cập vào mã Google, tên, URL hồ sơ và địa chỉ email của người dùng.
Để truy xuất thông tin hồ sơ của người dùng, hãy sử dụng
getBasicProfile()
.
function onSignIn(googleUser) {
var profile = googleUser.getBasicProfile();
console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
console.log('Name: ' + profile.getName());
console.log('Image URL: ' + profile.getImageUrl());
console.log('Email: ' + profile.getEmail()); // This is null if the 'email' scope is not present.
}
Đăng xuất người dùng
Bạn có thể cho phép người dùng đăng xuất khỏi ứng dụng của mình mà không cần đăng xuất khỏi Google bằng cách
thêm nút đăng xuất hoặc đường liên kết đến trang web của bạn. Để tạo đường liên kết đăng xuất, hãy đính kèm
một hàm gọi phương thức
GoogleAuth.signOut()
cho sự kiện onclick của đường liên kết.
<a href="#" onclick="signOut();">Sign out</a>
<script>
function signOut() {
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(function () {
console.log('User signed out.');
});
}
</script>