从 Google+ 登录功能迁移

最大限度地降低范围更改对用户影响的步骤

  1. 如果您的应用需要经过身份验证的用户的电子邮件地址,并且您之前已将 profile.emails.read 用于该目的,请改用 email
  2. 使用已批准的验证请求为 profile.emails.read 获得批准。请参阅如何提交进行验证?
  3. 在要移除的范围内撤消之前的用户令牌,或彻底移除对应用的访问权限。例如,应撤消具有 profile.emails.read 访问权限的令牌。我们建议您在用户仍在应用期间应用撤消,以便您可以立即征得用户同意。
  4. 在不使用 profile.emails.read 的情况下,提示用户重新同意新的范围(例如 email)。
  5. 移除您的 Google API OAuth 同意屏幕配置中将会逐步淘汰的范围。

您必须做出哪些更改才能将网站从 Google+ 登录功能迁移到 Google 登录功能,具体取决于您使用的 Google+ 登录流程。通常情况下,进行迁移时,您需要更新登录按钮、请求的范围以及有关如何从 Google 检索个人资料信息的说明。

更新登录按钮时,请勿直接指向 Google+,也不要使用红色。 符合我们更新后的品牌推广指南

大多数 G+ 登录应用都会请求组合使用下列范围:plus.loginplus.meplus.profile.emails.read。您需要按如下方式重新映射范围:

旧范围 新建范围
plus.login profile
plus.me openid
plus.profile.emails.read email

许多 Google+ 登录功能实现者都使用过代码流程。这意味着 Android、iOS 或 JavaScript 应用从 Google 获取 OAuth 代码,然后客户端将该代码发送回服务器,同时进行跨站请求伪造防护。然后,服务器会验证代码并获取刷新令牌和访问令牌,以便从 people.get API 拉取用户个人资料信息。

Google 现在建议您请求 ID 令牌,并将该 ID 令牌从客户端发送到服务器。ID 令牌内置了跨站点伪造防护功能,还可以在您的服务器上进行静态验证,从而避免为了从 Google 的服务器获取用户个人资料信息而进行额外的 API 调用。请按照说明在服务器上验证 ID 令牌

如果您仍希望使用代码流程获取个人资料信息,可以这样做。服务器拥有访问令牌后,您需要从登录发现文档中指定的 userinfo 端点获取用户个人资料信息。API 响应的格式与 Google+ 个人资料响应的格式不同,因此您需要将解析更新为新的格式。

迁移 HTML 登录按钮

如果您通过将 g-signin 类分配给某个元素在网页中添加了 Google+ 登录按钮,请做出以下更改:

  • <meta> 标记、data- 属性或参数对象中指定客户端 ID 时,请将字符串 clientid 更改为 client_id,如以下示例所示:

    <!-- Google+ Sign-in (old) -->
    <meta name="google-signin-clientid" content="YOUR_CLIENT_ID">
    

    <!-- Google Sign-in (new) -->
    <meta name="google-signin-client_id" content="YOUR_CLIENT_ID">
    
  • g-signin2 类分配给登录按钮元素,而非 g-signin。此外,还应指定单独的成功和失败回调,而不是单个回调,如以下示例所示:

    <!-- Google+ Sign-in (old) -->
    <div
      class="g-signin"
      data-callback="signinCallback">
    </div>
    

    <!-- Google Sign-in (new) -->
    <div
      class="g-signin2"
      data-onsuccess="onSignIn"
      data-onfailure="onSignInFailure">
    </div>
    
  • 定义成功和失败处理程序,而不是单个回调处理程序,如以下示例所示:

    // Google+ Sign-in (old)
    function signinCallback(authResult) {
      if (authResult['status']['signed_in']) {
        // Handle successful sign-in
      } else {
        // Handle sign-in errors
        console.log('Sign-in error: ' + authResult['error']);
      }
    }
    

    // Google Sign-in (new)
    function onSignIn(googleUser) {
      // Handle successful sign-in
    }
    function onSignInFailure() {
      // Handle sign-in errors
    }
    
  • 这些更改会将您的默认范围更新为 profile email openid。 您可以获取用户的基本个人资料信息,例如姓名、电子邮件地址和照片图片网址,如下所示:

    // Google Sign-in (new)
    function onSignIn(googleUser) {
      let profile = googleUser.getBasicProfile();
      let fullName = profile.getName();
      let email = profile.getEmail();
      let imageUrl = profile.getImageUrl();
    }
    

迁移动态呈现的登录按钮

如果您通过调用 gapi.signin.render() 在网页中添加了 Google+ 登录按钮,请做出以下更改:

  • <meta> 标记、data- 属性或参数对象中指定客户端 ID 时,请将字符串 clientid 更改为 client_id,如以下示例所示:

    <!-- Google+ Sign-in (old) -->
    <meta name="google-signin-clientid" content="YOUR_CLIENT_ID">
    

    <!-- Google Sign-in (new) -->
    <meta name="google-signin-client_id" content="YOUR_CLIENT_ID">
    
  • 使用 gapi.signin2.render()(而非 gapi.signin.render())渲染登录按钮,如以下示例所示:

    // Google+ Sign-in (old)
    gapi.signin.render('myButton', additionalParams);
    

    // Google Sign-in (new)
    gapi.signin2.render('myButton', additionalParams);
    
  • 定义成功和失败处理程序,而不是单个回调处理程序,如以下示例所示:

    // Google+ Sign-in (old)
    function signinCallback(authResult) {
      if (authResult['status']['signed_in']) {
        // Handle successful sign-in
      } else {
        // Handle sign-in errors
        console.log('Sign-in error: ' + authResult['error']);
      }
    }
    

    // Google Sign-in (new)
    function onSignIn(googleUser) {
      // Handle successful sign-in
    }
    function onSignInFailure() {
      // Handle sign-in errors
    }
    

这些更改会将您的默认范围更新为 profile email openid。您可以使用 getBasicProfile() 方法获取用户的基本个人资料信息。

迁移 JavaScript 发起的登录流程

如果您在用户点击登录按钮时调用 gapi.auth.signIn() 来启动登录流程,请进行以下更改:

  • <meta> 标记、data- 属性或参数对象中指定客户端 ID 时,请将字符串 clientid 更改为 client_id,如下例所示:

    <!-- Google+ Sign-in (old) -->
    <meta name="google-signin-clientid" content="YOUR_CLIENT_ID">
    

    <!-- Google Sign-in (new) -->
    <meta name="google-signin-client_id" content="YOUR_CLIENT_ID">
    
  • 使用 gapi.auth2.attachClickHandler() 在按下按钮时启动登录流程,如以下示例所示:

    // Google+ Sign-in (old)
    var signinButton = document.getElementById('signinButton');
    signinButton.addEventListener('click', function() {
      gapi.auth.signIn(additionalParams);
    });
    

    // Google Sign-in (new)
    auth2 = gapi.auth2.init();
    auth2.attachClickHandler('signinButton', additionalParams, onSignIn, onSignInFailure);
    
  • 定义成功和失败处理程序,而不是单个回调处理程序,如以下示例所示:

    // Google+ Sign-in (old)
    function signinCallback(authResult) {
      if (authResult['status']['signed_in']) {
        // Handle successful sign-in
      } else {
        // Handle sign-in errors
        console.log('Sign-in error: ' + authResult['error']);
      }
    }
    

    // Google Sign-in (new)
    function onSignIn(googleUser) {
      // Handle successful sign-in
    }
    function onSignInFailure() {
      // Handle sign-in errors
    }
    

这些更改会将您的默认范围更新为 profile email openid。您可以通过调用 getBasicProfile() 方法来获取用户的基本个人资料信息。

迁移混合服务器端流程

如果您使用 JavaScript API 获取要传递给服务器的一次性授权代码,请进行以下更改:

  • 将范围从 https://www.googleapis.com/auth/plus.login 更改为 profile

  • 您可以将 gapi.auth2.grantOfflineAccess() 方法与现有回调函数结合使用,如以下示例所示:

    <!-- Google+ Sign-in (old) -->
    <div class="g-signin"
      data-scope="https://www.googleapis.com/auth/plus.login"
      data-clientid="YOUR_CLIENT_ID"
      data-redirecturi="postmessage"
      data-accesstype="offline"
      data-callback="signInCallback">
    </div>
    

    // Google Sign-in (new)
    auth2 = gapi.auth2.init({
      client_id: 'YOUR_CLIENT_ID',
      scope: 'profile'
    });
    
    ...
    
    auth2.grantOfflineAccess().then(signInCallback);
    

如果您还需要访问用户的电子邮件地址,请将 email 添加到作用域参数中。