透過 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 開發人員頁面取得。

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

  6. 按一下「Authorized Domains」下方的「Add Domain」，即可註冊應用程式的網域。為方便開發，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 遊戲登入服務做為 IdP。Identity Platform 不支援手動導入 Facebook 遊戲登入。只接受用於交換 Identity Platform 憑證的權杖。

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

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

  3. 將從 Facebook 或 Facebook 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;
    // ...
  });

後續步驟