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

Google Sign-In 会管理 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 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>