透過 Facebook 登入使用者

本文說明如何使用 Identity Platform，透過 Facebook 登入使用者帳戶。

事前準備

本教學課程假設您已啟用 Identity Platform，並使用 HTML 和 JavaScript 編寫基本網頁應用程式。如要瞭解操作方式，請參閱快速入門導覽課程。

將 Facebook 設定為供應商

如要將 Facebook 設定為識別資訊提供者，請按照下列步驟操作：

  1. 前往 Google Cloud 控制台的「Identity Providers」(身分識別提供者) 頁面。

    前往「Identity Providers」頁面

  2. 按一下「Add A Provider」。

  3. 從清單中選取「Facebook」Facebook。

  4. 輸入 Facebook 應用程式 ID 和應用程式密鑰。如果您還沒有 ID 和密鑰，可以前往 Facebook for Developers 頁面取得。

  5. 將「設定 Facebook」下方列出的 URI，設為 Facebook 應用程式的有效 OAuth 重新導向 URI。如果您在 Identity Platform 中設定了自訂網域，請更新 Facebook 應用程式設定中的重新導向 URI，改用自訂網域，而非預設網域。舉例來說，將 https://myproject.firebaseapp.com/__/auth/handler 變更為 https://auth.myownpersonaldomain.com/__/auth/handler。

  6. 按一下「已授權網域」下方的「新增網域」，註冊應用程式的網域。為方便開發，localhost 預設為啟用狀態。

  7. 在「設定應用程式」下方，按一下「設定詳細資料」。將程式碼片段複製到應用程式的程式碼中，初始化 Identity Platform 用戶端 SDK。

  8. 按一下 [儲存]。

透過用戶端 SDK 登入使用者

  1. 建立 Facebook 提供者物件的執行個體：

    JavaScript 

    var provider = new firebase.auth.FacebookAuthProvider();

  2. 選用：新增 OAuth 範圍。範圍會指定您向 Facebook 要求的資料。如果資料較為敏感，可能需要特定範圍。請參閱供應商的說明文件，瞭解應用程式需要哪些範圍。

    JavaScript 

    provider.addScope('user_birthday');

  3. 選用：將驗證流程在地化。你可以指定語言，或使用裝置的預設語言：

    JavaScript 

    firebase.auth().languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();

  4. 選用：指定其他自訂 OAuth 參數。這些是 Facebook 專屬的參數，通常用於自訂驗證體驗。您無法傳遞 OAuth 或 Identity Platform 保留的參數。

    JavaScript 

    provider.setCustomParameters({
'display': 'popup'
});

  5. 使用 Facebook 提供者物件登入使用者。您可以開啟彈出式視窗，或重新導向目前頁面。行動裝置使用者更容易重新導向。

    如要顯示彈出式視窗，請呼叫 signInWithPopup()：

    JavaScript 

    firebase
  .auth()
  .signInWithPopup(provider)
  .then((result) => {
    /** @type {firebase.auth.OAuthCredential} */
    var credential = result.credential;

    // The signed-in user info.
    var user = result.user;

    // This gives you a Facebook Access Token. You can use it to access the Facebook API.
    var accessToken = credential.accessToken;

    // ...
  })
  .catch((error) => {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;
    // The email of the user's account used.
    var email = error.email;
    // The firebase.auth.AuthCredential type that was used.
    var credential = error.credential;

    // ...
  });

    如要重新導向網頁，請先呼叫 signInWithRedirect()。

    使用 signInWithRedirect、linkWithRedirect 或 reauthenticateWithRedirect 時，請遵循最佳做法。

    JavaScript 

    firebase.auth().signInWithRedirect(provider);

    然後，在網頁載入時呼叫 getRedirectResult()，擷取 Facebook 權杖：

    JavaScript 

    firebase.auth()
  .getRedirectResult()
  .then((result) => {
    if (result.credential) {
      /** @type {firebase.auth.OAuthCredential} */
      var credential = result.credential;

      // This gives you a Facebook Access Token. You can use it to access the Facebook API.
      var token = credential.accessToken;
      // ...
    }
    // The signed-in user info.
    var user = result.user;
  }).catch((error) => {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;
    // The email of the user's account used.
    var email = error.email;
    // The firebase.auth.AuthCredential type that was used.
    var credential = error.credential;
    // ...
  });

取得存取權杖後，即可用來呼叫 Facebook API。 例如：

REST

curl "https://graph.facebook.com/me?fields=id,name&access_token=[TOKEN]"

手動登入使用者

如果不想使用用戶端 SDK，也可以手動處理登入流程。

這個登入方法也支援 Facebook Login for Gaming 做為 IdP。Identity Platform 不支援手動導入 Facebook Login for Gaming。這個端點只接受用於交換 Identity Platform 憑證的權杖。

  1. 按照 Facebook 或 Facebook Login for Gaming 開發人員說明文件中的步驟，將驗證功能整合到應用程式中：

  2. 使用您在上一步中實作的流程，透過 Facebook 或 Facebook Login for Gaming 登入使用者。

  3. 將從 Facebook 或 Facebook Login for Gaming 收到的權杖，換成 Identity Platform 憑證：

    JavaScript 

    var credential = firebase.auth.FacebookAuthProvider.credential(accessToken);

  4. 使用憑證透過 Identity Platform 登入使用者：

    JavaScript 

    // Sign in with the credential from the user.
firebase.auth()
  .signInWithCredential(credential)
  .then((result) => {
    // Signed in
    // ...
  })
  .catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.email;
    // ...
  });

後續步驟