Tích hợp tính năng Đăng nhập bằng Google vào ứng dụng web của bạn

Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.

Tính năng Đăng nhập bằng Google quản lý luồng OAuth 2.0 và vòng đời mã thông báo, giúp đơn giản hoá quá trình tích hợp với API của Google. Người dùng luôn có thể thu hồi quyền truy cập vào một ứng dụng bất cứ lúc nào.

Tài liệu này mô tả cách hoàn tất việc tích hợp Đăng nhập bằng Google cơ bản.

Tạo thông tin uỷ quyền

Bất kỳ ứng dụng nào sử dụng OAuth 2.0 để truy cập vào API của Google đều phải có thông tin xác thực ủy 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 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 vào các API mà bạn đã bật cho dự án đó.

  1. Go to the Credentials page.
  2. Nhấp vào Tạo thông tin xác thực > Mã ứng dụng khách OAuth.
  3. Chọn loại ứng dụng Ứng dụng web.
  4. Đặt tên cho ứng dụng OAuth 2.0 rồi nhấp vào 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 mã ứng dụng khách để hoàn tất các bước tiếp theo. (Một mật khẩu ứng dụng khách cũng được tạo, nhưng bạn chỉ cần mật khẩu đó cho các thao tác phía máy chủ.)

Tải Thư viện nền tảng Google

Bạn phải bao gồm Thư viện Google Platform trên các trang web tích hợp tính năng Đă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

Hãy chỉ định mã ứng dụng 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 tự động kết xuất. 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, biểu trưng và màu sắc thích hợp cho trạng thái đăng nhập của người dùng và phạm vi mà 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 phần tử div với lớp g-signin2 vào trang đăng nhập của bạn:

<div class="g-signin2" data-onsuccess="onSignIn"></div>

Nhận 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 phương thức 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 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 hàm gọi phương thức GoogleAuth.signOut() vào 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>