Đối với các tình huống đăng nhập người dùng chỉ xác thực, chúng tôi khuyên bạn nên sử dụng các nút Đăng nhập bằng Google và Một lần chạm mới hơn cho các ứng dụng web và ứng dụng gốc Android .

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, đơ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 một ứ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 API Google đề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 xác thực 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>

Sau đây là ví dụ về nút Đăng nhập Google mặc định:

Nhận thông tin hồ sơ

Sau khi bạn đã đăng nhập một người dùng bằng Google bằng phạm vi mặc định, bạn có thể truy cập vào 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>