從 Google+ 登入資訊遷移

可盡量減少範圍變更對使用者的影響

1. 如果您的應用程式需要已驗證使用者的電子郵件地址，而您先前已為該目的使用 profile.emails.read，請改用 email。
2. 取得「profile.emails.read」的核准要求獲得核准。請參閱「如何提交驗證申請」一節。
3. 將先前的使用者權杖撤銷到要從移除範圍中移除，或完全移除應用程式存取權。舉例來說，應撤銷具有 profile.emails.read 存取權的權杖。建議您在使用者使用應用程式時套用撤銷授權，以便立即取得使用者同意聲明。
4. 提示使用者透過新的範圍 (例如 email) 重新取得同意聲明，不使用 profile.emails.read。
5. 移除即將逐步停用 Google API OAuth 同意畫面設定的範圍。

從 Google+ 登入功能將網站遷移至 Google 登入所需的變更，取決於您使用的 Google+ 登入流程。一般而言，遷移會要求您更新登入按鈕、要求的範圍，以及從 Google 擷取設定檔資訊的操作說明。

更新登入按鈕時，請勿提及 Google+ 或使用紅色。 請遵守新版品牌宣傳規範。

大多數 G+ 登入應用程式會要求 plus.login、plus.me 和 plus.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+ 登入按鈕，請進行下列變更：

• 指定用戶端 ID 時，請在 <meta> 標記、data- 屬性或參數物件中將字串 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+ 登入按鈕，請進行下列變更：

• 指定用戶端 ID 時，請在 <meta> 標記、data- 屬性或參數物件中將字串 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() 來啟動登入流程，請進行下列變更：

• 指定用戶端 ID 時，請在 <meta> 標記、data- 屬性或參數物件中將字串 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。