将 Google 登录功能集成到您的 Web 应用中

Google 登录服务会管理 OAuth 2.0 流程和令牌生命周期，从而简化与 Google API 的集成。用户随时可以选择撤消对应用的访问权限。

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

创建授权凭据

任何使用 OAuth 2.0 访问 Google API 的应用都必须具有授权凭据，以向 Google 的 OAuth 2.0 服务器表明应用的身份。以下步骤介绍了如何为项目创建凭据。然后，您的应用便可使用这些凭据访问您为该项目启用的 API。

  1. Go to the Credentials page.
  2. 点击创建客户端。
  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 ID、姓名、个人资料网址和电子邮件地址。

如需检索用户的个人资料信息，请使用 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>