以 JavaScript 使用 Facebook 登入進行驗證

只要在應用程式中整合 Facebook 登入功能，使用者就能透過 Facebook 帳戶向 Firebase 驗證身分。您可以透過 Firebase SDK 執行登入流程，也可以手動執行 Facebook 登入流程，然後將產生的存取權權杖傳遞給 Firebase。

事前準備

  1. 將 Firebase 新增至 JavaScript 專案。
  2. 在 Facebook for Developers 網站上，取得應用程式的應用程式 ID 和應用程式密鑰。
  3. 啟用 Facebook 登入：
    1. 在 Firebase 控制台中，開啟「驗證」部分。
    2. 在「登入方法」分頁中，啟用「Facebook」登入方法，並指定從 Facebook 取得的「應用程式 ID」和「應用程式密鑰」。
    3. 然後，請前往 Facebook for Developers 網站，在 Facebook 應用程式的設定頁面中，確認「OAuth 重新導向 URI」 (例如 my-app-12345.firebaseapp.com/__/auth/handler) 列於「OAuth 重新導向 URI」下方，路徑為「產品設定」>「Facebook 登入」設定。

使用 Firebase SDK 處理登入流程

如果您要建構網頁應用程式，最簡單的方法是使用 Firebase JavaScript SDK 處理登入流程，讓使用者透過 Facebook 帳戶驗證身分。(如要在 Node.js 或其他非瀏覽器環境中驗證使用者，您必須手動處理登入流程)。

如要使用 Firebase JavaScript SDK 處理登入流程，請按照下列步驟操作：

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

    Web

    import { FacebookAuthProvider } from "firebase/auth";

const provider = new FacebookAuthProvider();
    auth_facebook_provider_create.js

    Web

    var provider = new firebase.auth.FacebookAuthProvider();
    facebook.js
  2. 選用：指定要向驗證供應商要求的其他 OAuth 2.0 範圍。如要新增範圍，請呼叫 addScope。例如： <0x

    Web

    provider.addScope('user_birthday');
    auth_facebook_provider_scopes.js

    Web

    provider.addScope('user_birthday');
    facebook.js
    請參閱驗證供應商說明文件。
  3. 選用：如要將供應商的 OAuth 流程本地化為使用者偏好的語言，而不需明確傳遞相關的自訂 OAuth 參數，請在啟動 OAuth 流程前，更新 Auth 執行個體上的語言代碼。例如： <0x

    Web

    import { getAuth } from "firebase/auth";

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

    Web

    firebase.auth().languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();
    index.js
  4. 選用：指定要隨 OAuth 要求傳送的其他自訂 OAuth 供應商參數。如要新增自訂參數，請使用包含鍵的物件，在已初始化的供應商上呼叫 setCustomParameters，並根據 OAuth 供應商文件指定鍵和對應的值。例如： <0x

    Web

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

    Web

    provider.setCustomParameters({
  'display': 'popup'
});
    facebook.js
    系統不允許使用保留的必要 OAuth 參數，且會忽略這類參數。 詳情請參閱 驗證供應商參考資料。
  5. 使用 Facebook 提供者物件向 Firebase 進行驗證。您可以開啟彈出式視窗或重新導向至登入頁面，提示使用者透過 Facebook 帳戶登入。行動裝置偏好使用重新導向方法。
    • 如要使用彈出式視窗登入，請呼叫 signInWithPopup：

      Web

      import { getAuth, signInWithPopup, FacebookAuthProvider } from "firebase/auth";

const auth = getAuth();
signInWithPopup(auth, provider)
  .then((result) => {
    // The signed-in user info.
    const user = result.user;

    // This gives you a Facebook Access Token. You can use it to access the Facebook API.
    const credential = FacebookAuthProvider.credentialFromResult(result);
    const accessToken = credential.accessToken;

    // IdP data available using getAdditionalUserInfo(result)
    // ...
  })
  .catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.customData.email;
    // The AuthCredential type that was used.
    const credential = FacebookAuthProvider.credentialFromError(error);

    // ...
  });
      auth_facebook_signin_popup.js

      Web

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

    // The signed-in user info.
    var user = result.user;
    // IdP data available in result.additionalUserInfo.profile.
      // ...

    // 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;

    // ...
  });
      facebook.js
      另請注意，您可以擷取 Facebook 供應商的 OAuth 權杖，用來透過 Facebook API 擷取其他資料。

      您也可以在這裡擷取及處理錯誤。如需錯誤代碼清單，請參閱「Auth Reference Docs」。

    • 如要透過重新導向至登入頁面來登入，請呼叫 signInWithRedirect： 使用 `signInWithRedirect` 時，請遵循最佳做法。

      Web

      import { getAuth, signInWithRedirect } from "firebase/auth";

const auth = getAuth();
signInWithRedirect(auth, provider);
      auth_signin_redirect.js

      Web

      firebase.auth().signInWithRedirect(provider);
      index.js
      然後，您也可以在網頁載入時呼叫 getRedirectResult，擷取 Facebook 供應商的 OAuth 權杖：

      Web

      import { getAuth, getRedirectResult, FacebookAuthProvider } from "firebase/auth";

const auth = getAuth();
getRedirectResult(auth)
  .then((result) => {
    // This gives you a Facebook Access Token. You can use it to access the Facebook API.
    const credential = FacebookAuthProvider.credentialFromResult(result);
    const token = credential.accessToken;

    const user = result.user;
    // IdP data available using getAdditionalUserInfo(result)
    // ...
  }).catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.customData.email;
    // AuthCredential type that was used.
    const credential = FacebookAuthProvider.credentialFromError(error);
    // ...
  });
      auth_facebook_signin_redirect_result.js

      Web

      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;
    // IdP data available in result.additionalUserInfo.profile.
      // ...
  }).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.js
      您也可以在這裡擷取及處理錯誤。如需錯誤代碼清單，請參閱「Auth Reference Docs」。

在 Chrome 擴充功能中透過 Firebase 進行驗證

如果您要建構 Chrome 擴充功能應用程式，請參閱 螢幕外文件指南。

後續步驟

使用者首次登入後，系統會建立新的使用者帳戶，並連結至使用者登入時使用的憑證 (即使用者名稱和密碼、電話號碼或驗證供應商資訊)。這個新帳戶會儲存在 Firebase 專案中，可用於識別專案中每個應用程式的使用者，無論使用者登入方式為何。

  • 在應用程式中，如要瞭解使用者的驗證狀態，建議在 Auth 物件上設定觀察器。接著，您就可以從 User 物件取得使用者的基本個人資料資訊。請參閱「管理使用者」。

  • 在 Firebase Realtime Database 和 Cloud Storage 安全規則中，您可以從 auth 變數取得已登入使用者的專屬使用者 ID， 並使用該 ID 控制使用者可存取的資料。

您可以將驗證供應商憑證連結至現有使用者帳戶，允許使用者透過多個驗證供應商登入應用程式。

如要登出使用者，請呼叫 signOut：

Web

import { getAuth, signOut } from "firebase/auth";

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});
auth_sign_out.js

Web

firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});
index.js