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

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登录用户后，即可访问该用户的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>