透過 JavaScript 使用 Facebook 登入進行身份驗證

透過將 Facebook Login 整合到您的應用程式中,您可以讓用戶使用其 Facebook 帳戶透過 Firebase 進行身份驗證。您可以透過使用 Firebase SDK 執行登入流程,或手動執行 Facebook 登入流程並將產生的存取權杖傳遞給 Firebase 來整合 Facebook 登入。

在你開始之前

  1. 將 Firebase 新增到您的 JavaScript 專案
  2. Facebook for Developers網站上,取得您的應用程式的應用程式 ID應用程式金鑰
  3. 啟用 Facebook 登入:
    1. Firebase 控制台中,開啟「驗證」部分。
    2. 「登入方法」標籤上,啟用Facebook登入方法並指定從 Facebook 取得的App IDApp Secret
    3. 然後,確保您的OAuth 重定向 URI (例如my-app-12345.firebaseapp.com/__/auth/handler )在產品Facebook for Developers網站上的 Facebook 應用程式設定頁面中列為您的OAuth 重定向 URI之一設定 > Facebook 登入配置。

使用 Firebase SDK 處理登入流程

如果您正在建立 Web 應用程序,使用 Facebook 帳戶透過 Firebase 對使用者進行身份驗證的最簡單方法是使用 Firebase JavaScript SDK 處理登入流程。 (如果您想在 Node.js 或其他非瀏覽器環境中對使用者進行身份驗證,則必須手動處理登入流程。)

若要使用 Firebase JavaScript SDK 處理登入流程,請依照下列步驟操作:

  1. 建立 Facebook 提供者物件的實例:

    Web modular API

    import { FacebookAuthProvider } from "firebase/auth";
    
    const provider = new FacebookAuthProvider();

    Web namespaced API

    var provider = new firebase.auth.FacebookAuthProvider();
  2. 選用:指定您想要從身分驗證提供者要求的其他 OAuth 2.0 範圍。若要新增範圍,請呼叫addScope 。例如:

    Web modular API

    provider.addScope('user_birthday');

    Web namespaced API

    provider.addScope('user_birthday');
    請參閱身份驗證提供者文件
  3. 選用:若要將提供者的 OAuth 流程在地化為使用者的首選語言而不明確傳遞相關的自訂 OAuth 參數,請在啟動 OAuth 流程之前更新 Auth 實例上的語言程式碼。例如:

    Web modular API

    import { getAuth } from "firebase/auth";
    
    const auth = getAuth();
    auth.languageCode = 'it';
    // To apply the default browser preference instead of explicitly setting it.
    // auth.useDeviceLanguage();

    Web namespaced API

    firebase.auth().languageCode = 'it';
    // To apply the default browser preference instead of explicitly setting it.
    // firebase.auth().useDeviceLanguage();
  4. 可選:指定要與 OAuth 請求一起傳送的其他自訂 OAuth 提供者參數。若要新增自訂參數,請使用包含 OAuth 提供者文件指定的鍵和對應值的物件對初始化的提供者呼叫setCustomParameters 。例如:

    Web modular API

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

    Web namespaced API

    provider.setCustomParameters({
      'display': 'popup'
    });
    不允許保留所需的 OAuth 參數,這些參數將被忽略。有關更多詳細信息,請參閱身份驗證提供者參考
  5. 使用 Facebook 提供者物件透過 Firebase 進行身份驗證。您可以透過開啟彈出視窗或重新導向至登入頁面來提示使用者使用其 Facebook 帳戶登入。重定向方法在行動裝置上是首選。
    • 若要使用彈出視窗登錄,請呼叫signInWithPopup

      Web modular API

      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);
      
          // ...
        });

      Web namespaced API

      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;
      
          // ...
        });
      另請注意,您可以檢索 Fa​​cebook 提供者的 OAuth 令牌,該令牌可用於使用 Facebook API 取得其他資料。

      這也是您可以捕獲和處理錯誤的地方。有關錯誤代碼的列表,請查看Auth Reference Docs

    • 若要透過重定向到登錄頁面進行登錄,請呼叫signInWithRedirect :遵循使用「signInWithRedirect」時的最佳實務

      Web modular API

      import { getAuth, signInWithRedirect } from "firebase/auth";
      
      const auth = getAuth();
      signInWithRedirect(auth, provider);

      Web namespaced API

      firebase.auth().signInWithRedirect(provider);
      然後,您也可以在頁面載入時透過呼叫getRedirectResult來檢索 Fa​​cebook 提供者的 OAuth 令牌:

      Web modular API

      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);
          // ...
        });

      Web namespaced API

      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;
          // ...
        });
      這也是您可以捕獲和處理錯誤的地方。有關錯誤代碼的列表,請查看Auth Reference Docs

在 Chrome 擴充功能中使用 Firebase 進行驗證

如果您正在建立 Chrome 擴充功能應用程序,請參閱Offscreen Documents 指南

下一步

使用者首次登入後,系統會建立新的使用者帳戶,並將其連結到使用者登入時所使用的憑證(即使用者名稱和密碼、電話號碼或驗證提供者資訊)。此新帳戶將作為 Firebase 專案的一部分存儲,並且可用於識別專案中每個應用程式中的用戶,無論用戶如何登入。

  • 在您的應用程式中,了解使用者的身份驗證狀態的建議方法是在Auth物件上設定觀察者。然後,您可以從User物件取得使用者的基本個人資料資訊。請參閱管理用戶

  • 在 Firebase 即時資料庫和雲端儲存安全性規則中,您可以從auth變數取得登入使用者的唯一使用者 ID,並使用它來控制使用者可以存取哪些資料。

您可以透過將身分驗證提供者憑證連結到現有使用者帳戶,允許使用者使用多個驗證提供者登入您的應用程式。

若要登出用戶,請呼叫signOut

Web modular API

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

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

Web namespaced API

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