Catch up on everthing we announced at this year's Firebase Summit. Learn more

通過 JavaScript 使用 Facebook 登錄進行身份驗證

您可以通過將 Facebook 登錄集成到您的應用中,讓您的用戶使用他們的 Facebook 帳戶通過 Firebase 進行身份驗證。您可以通過使用 Firebase SDK 執行登錄流程,或通過手動執行 Facebook 登錄流程並將生成的訪問令牌傳遞給 Firebase 來集成 Facebook 登錄。

在你開始之前

  1. 添加火力地堡到你的JavaScript項目
  2. Facebook上的開發者網站,獲取應用程序ID應用程式密鑰為您的應用程序。
  3. 啟用 Facebook 登錄:
    1. 火力地堡控制台,打開驗證部分。
    2. 登錄方法選項卡,使Facebook的登錄方法,並指定應用程序IDApp秘密你從Facebook獲得。
    3. 然後,請確保您的OAuth重定向URI(my-app-12345.firebaseapp.com/__/auth/handler )被列為上的Facebook應用程序的設置頁面您的OAuth重定向URI之一的Facebook面向開發人員產品網站設置> Facebook的登錄配置。

使用 Firebase SDK 處理登錄流程

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

要使用 Firebase JavaScript SDK 處理登錄流程,請按以下步驟操作:

  1. 創建 Facebook 提供程序對象的實例:

    網頁版 9

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

    網頁版 8

    var provider = new firebase.auth.FacebookAuthProvider();
  2. 可選:指定其他的OAuth 2.0範圍要由身份驗證提供者的要求。要添加範圍,請致電addScope 。例如:

    網頁版 9

    provider.addScope('user_birthday');

    網頁版 8

    provider.addScope('user_birthday');
    身份驗證提供文檔
  3. 可選:要本地化供應商的OAuth流向用戶的首選語言沒有明確地傳遞相關的定制OAuth的參數,在開始的OAuth流之前更新的驗證實例的語言代碼。例如:

    網頁版 9

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

    網頁版 8

    firebase.auth().languageCode = 'it';
    // To apply the default browser preference instead of explicitly setting it.
    // firebase.auth().useDeviceLanguage();
  4. 可選:指定其他定制的OAuth提供者參數要使用OAuth發送請求。要添加自定義參數,調用setCustomParameters上初始化提供商與如由提供商的OAuth文檔和相應的值來指定包含密鑰的對象。例如:

    網頁版 9

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

    網頁版 8

    provider.setCustomParameters({
      'display': 'popup'
    });
    不允許保留的必需 OAuth 參數,將被忽略。見身份驗證提供參考更多的細節。
  5. 使用 Facebook 提供程序對象通過 Firebase 進行身份驗證。您可以通過打開彈出窗口或重定向到登錄頁面來提示您的用戶使用他們的 Facebook 帳戶登錄。在移動設備上首選重定向方法。
    • 要使用彈出窗口登錄,電話signInWithPopup

      網頁版 9

      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;
      
          // ...
        })
        .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;
          // The AuthCredential type that was used.
          const credential = FacebookAuthProvider.credentialFromError(error);
      
          // ...
        });

      網頁版 8

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

      這也是您可以捕獲和處理錯誤的地方。有關錯誤代碼列表,看看在驗證參考文檔

    • 要通過重定向到登錄頁面,呼號signInWithRedirect

      網頁版 9

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

      網頁版 8

      firebase.auth().signInWithRedirect(provider);
      然後,你還可以通過調用獲取Facebook的供應商的OAuth令牌getRedirectResult當你的頁面加載:

      網頁版 9

      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;
        }).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;
          // AuthCredential type that was used.
          const credential = FacebookAuthProvider.credentialFromError(error);
          // ...
        });

      網頁版 8

      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;
          // ...
        });
      這也是您可以捕獲和處理錯誤的地方。有關錯誤代碼列表,看看在驗證參考文檔

在 Chrome 擴展程序中使用 Firebase 進行身份驗證

如果您正在構建 Chrome 擴展程序應用程序,則必須添加您的 Chrome 擴展程序 ID:

  1. 打開在項目火力地堡控制台
  2. 身份驗證部分,打開登錄方法頁。
  3. 添加一個URI類似下面的授權域的列表:
    chrome-extension://CHROME_EXTENSION_ID

只有彈出操作( signInWithPopuplinkWithPopupreauthenticateWithPopup )可供選擇Chrome瀏覽器擴展,如Chrome擴展不能使用HTTP重定向。您應該從後台頁面腳本而不是瀏覽器操作彈出窗口調用這些方法,因為身份驗證彈出窗口將取消瀏覽器操作彈出窗口。彈出窗口的方法可以只使用擴展使用清單V2 。較新的清單V3只允許在服務人員的形式,不能在所有執行彈出操作後台腳本。

在您的Chrome擴展程序清單文件確保您添加https://apis.google.com URL到content_security_policy允許列表。

下一步

用戶首次登錄後,將創建一個新用戶帳戶並將其鏈接到用戶登錄時使用的憑據(即用戶名和密碼、電話號碼或身份驗證提供商信息)。這個新帳戶作為 Firebase 項目的一部分存儲,可用於識別項目中每個應用中的用戶,無論用戶如何登錄。

  • 在您的應用程序,要知道你的用戶的身份驗證狀態的推薦方法是設置一個觀察者的Auth的對象。然後,您可以從用戶的基本個人資料信息User對象。請參閱管理用戶

  • 在你的火力地堡實時數據庫和雲存儲安全規則,你可以得到簽署的,從用戶的唯一的用戶ID auth的變量,並用它來控制哪些數據的用戶可以訪問。

您可以允許用戶通過使用多個身份驗證提供登錄到您的應用程序連接身份驗證提供憑據到現有的用戶帳戶。

要註銷用戶,請撥打signOut

網頁版 9

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

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

網頁版 8

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