從 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+ 或改用紅色。 遵守新版品牌宣傳規範。

大部分 Google+ 登入應用程式要求以下範圍的組合：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+ 登入按鈕，請進行下列變更：

  • 當您在 <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。