We are discontinuing the Google Sign-In JavaScript Platform Library for web. For authentication and user sign-in, use the new Google Identity Services SDKs for both Web and Android instead.

將Google登錄功能集成到您的網絡應用中

Google登錄管理OAuth 2.0流和令牌生命週期,從而簡化了與Google API的集成。用戶始終可以隨時選擇撤消對應用程序的訪問

本文檔介紹瞭如何完成基本的Google登錄集成。

創建授權憑證

使用OAuth 2.0訪問Google API的任何應用程序都必須具有授權憑據,以將應用程序標識到Google的OAuth 2.0服務器。以下步驟說明瞭如何為您的項目創建憑據。然後,您的應用程序可以使用憑據來訪問為該項目啟用的API。

  1. Go to the Credentials page.
  2. 點擊創建憑據> OAuth客戶端ID
  3. 選擇Web應用程序應用程序類型。
  4. 為您的OAuth 2.0客戶端命名,然後點擊創建

配置完成後,記下創建的客戶端ID。您將需要客戶端ID來完成後續步驟。 (還會創建一個客戶端機密,但僅在服務器端操作中需要它。)

加載Google平台庫

您必須在集成了Google登錄的網頁上包含Google平台庫。

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

指定您的應用的客戶端ID

使用google-signin-client_id元元素指定您在Google Developers Console中為您的應用創建的客戶端ID。

<meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">

添加Google登錄按鈕

向您的網站添加Google登錄按鈕的最簡單方法是使用自動呈現的登錄按鈕。僅需幾行代碼,您就可以添加一個按鈕,該按鈕會自動將自身配置為具有適當的文本,徽標和顏色,以適合用戶的登錄狀態和您要求的範圍。

要創建使用默認設置的Google登錄按鈕,請將g-signin2類的div元素添加到登錄頁面:

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

以下是默認的Google登錄按鈕的示例:

獲取資料信息

使用默認範圍使用Google登錄用戶後,即可訪問該用戶的Google ID,名稱,個人資料URL和電子郵件地址。

要檢索用戶的個人資料信息,請使用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.
}

登出用戶

您可以通過添加退出按鈕或鏈接到您的網站,使用戶無需退出Google即可退出您的應用程序。要創建註銷鏈接,請將調用GoogleAuth.signOut()方法的函數附加到鏈接的onclick事件。

<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>