此页面由 Cloud Translation API 翻译。

将 Google Sign-In 集成到您的网络应用中

Google 登录管理 OAuth 2.0 流程和令牌生命周期，简化您与 Google API 的集成。用户始终可以随时撤销对应用程序的访问权限。

本文档介绍了如何完成基本的 Google 登录集成。

创建授权凭证

任何使用 OAuth 2.0 访问 Google API 的应用程序都必须具有向 Google 的 OAuth 2.0 服务器识别应用程序的授权凭据。以下步骤说明了如何为您的项目创建凭据。然后，您的应用程序可以使用凭据访问您为该项目启用的 API。

Go to the Credentials page.
单击创建凭据 > OAuth 客户端 ID 。
选择Web 应用程序类型。
命名您的 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 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>