Google 致力于为黑人社区推动种族平等。查看具体举措
本頁面由 Cloud Translation API 翻譯而成。
Switch to English

使用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提供程序對象的實例:
    var provider = new firebase.auth.FacebookAuthProvider();
    
  2. 可選:指定要從身份驗證提供程序請求的其他OAuth 2.0範圍。要添加範圍,請調用addScope 。例如:
    provider.addScope('user_birthday');
    
    請參閱身份驗證提供程序文檔
  3. 可選:要在不顯式傳遞相關自定義OAuth參數的情況下將提供程序的OAuth流本地化為用戶的首選語言,請在啟動OAuth流之前更新Auth實例上的語言代碼。例如:
    firebase.auth().languageCode = 'fr_FR';
    // To apply the default browser preference instead of explicitly setting it.
    // firebase.auth().useDeviceLanguage();
    
  4. 可選:指定要與OAuth請求一起發送的其他自定義OAuth提供程序參數。要添加自定義參數,請使用包含OAuth提供程序文檔中指定的鍵和相應值的對像在初始化的提供程序上調用setCustomParameters 。例如:
    provider.setCustomParameters({
      'display': 'popup'
    });
    
    不允許使用保留的必需OAuth參數,這些參數將被忽略。有關更多詳細信息,請參見身份驗證提供程序參考
  5. 使用Facebook提供程序對象向Firebase進行身份驗證。您可以通過打開彈出窗口或重定向到登錄頁面來提示用戶使用其Facebook帳戶登錄。在移動設備上首選重定向方法。
    • 要使用彈出窗口登錄,請調用signInWithPopup
      firebase.auth().signInWithPopup(provider).then(function(result) {
        // This gives you a Facebook Access Token. You can use it to access the Facebook API.
        var token = result.credential.accessToken;
        // The signed-in user info.
        var user = result.user;
        // ...
      }).catch(function(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提供程序的OAuth令牌,該令牌可用於使用Facebook API獲取其他數據。

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

    • 要通過重定向到登錄頁面進行登錄,請調用signInWithRedirect
      firebase.auth().signInWithRedirect(provider);
      
      然後,您還可以在頁面加載時通過調用getRedirectResult來檢索Facebook提供程序的OAuth令牌:
      firebase.auth().getRedirectResult().then(function(result) {
        if (result.credential) {
          // This gives you a Facebook Access Token. You can use it to access the Facebook API.
          var token = result.credential.accessToken;
          // ...
        }
        // The signed-in user info.
        var user = result.user;
      }).catch(function(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擴展程序,則必須添加Chrome擴展程序ID:

  1. Firebase控制台中打開您的項目。
  2. 在“身份驗證”部分中,打開“登錄方法”頁面。
  3. 將以下類似的URI添加到“授權域”列表中:
    chrome-extension://CHROME_EXTENSION_ID

Chrome擴展程序僅可使用彈出操作( signInWithPopuplinkWithPopup ),因為Chrome擴展程序無法使用HTTP重定向。您應該從後台腳本而不是瀏覽器操作彈出窗口調用這些方法,因為身份驗證彈出窗口將取消瀏覽器操作彈出窗口。

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

下一步

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

  • 在您的應用程序中,建議的了解用戶身份驗證狀態的方法是在Auth對像上設置觀察者。然後,您可以從User對象獲取用戶的基本配置文件信息。請參閱管理用戶

  • 在Firebase實時數據庫和雲存儲安全規則中,您可以從auth變量中獲取登錄用戶的唯一用戶ID,並使用它來控制用戶可以訪問哪些數據。

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

要註銷用戶,請致電signOut

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