從 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 擷取設定檔資訊。

更新登入按鈕時,請勿提及 G+,也不要使用紅色。 符合新版品牌宣傳指南

大多數 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 權杖內建跨網站偽造保護功能,也可在伺服器上經過靜態驗證,避免使用額外的 API 呼叫從 Google 伺服器取得使用者個人資料。按照操作說明在伺服器上驗證 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