Chúng tôi sẽ ngừng cung cấp Thư viện nền tảng JavaScript đăng nhập bằng Google cho web. Bạn sẽ không thể tải thư viện này xuống sau ngày 31 tháng 3 năm 2023. Thay vào đó, hãy sử dụng Dịch vụ Google Identity mới cho Web.
Theo mặc định, mã ứng dụng khách mới tạo hiện bị chặn sử dụng Thư viện nền tảng cũ, các mã ứng dụng khách hiện có sẽ không bị ảnh hưởng. Những Mã ứng dụng khách mới được tạo trước ngày 29 tháng 7 năm 2022 có thể đặt `plugin_name` cho phép sử dụng Thư viện Google Platform.

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

Đă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 hóa việc tích hợp của bạn với các API của Google. Người dùng luôn có tùy chọn thu hồi quyền truy cập vào ứng dụng bất kỳ lúc nào.

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

Tạo thông tin xác thực ủy quyền

Bất kỳ ứng dụng nào sử dụng OAuth 2.0 để truy cập Google API đều phải có thông tin xác thực ủy quyền xác định ứng dụng đó với máy chủ OAuth 2.0 của Google. Các bước sau giải thích cách tạo thông tin đăng nhập cho dự án của bạn. Các ứng dụng của bạn sau đó có thể sử dụng thông tin đăng nhập để truy cập 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> ID ứ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 khách OAuth 2.0 của bạn và nhấp vào Tạo

Sau khi cấu hình xong, hãy ghi lại ID khách hàng đã được tạo. Bạn sẽ cần ID khách hàng để hoàn thành các bước tiếp theo. (Một bí mật máy khách cũng được tạo, nhưng bạn chỉ cần nó cho các hoạt động phía máy chủ.)

Tải Thư viện Google Platform

Bạn phải bao gồm Thư viện Google Platform trên các trang web tích hợp Đăng nhập bằng Google của mình.

<script src="https://apis.google.com/js/platform.js" async defer></script>

Chỉ định ID khách hàng của ứng dụng của bạn

Chỉ định ID khách hàng mà bạn đã tạo cho ứng dụng của mình trong Bảng điều khiển dành cho nhà phát triển của Google với 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 hiển thị 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, 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 bạn yêu cầu.

Để tạo nút Đăng nhập bằng Google sử dụng 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 bạn đã đă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 ID Google, tên, URL hồ sơ và địa chỉ email của người dùng.

Để truy xuất thông tin hồ sơ cho 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 mộ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 liên kết đến trang web của bạn. Để tạo liên kết đăng xuất, hãy đính kèm một hàm gọi phương thức GoogleAuth.signOut() vào sự kiện onclick của 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>