以 JavaScript 使用 Facebook 登入進行驗證

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

事前準備

  1. 將 Firebase 新增至 JavaScript 專案。
  2. 在 Facebook 開發人員網站上取得應用程式的 應用程式 ID 和 應用程式密鑰。
  3. 啟用 Facebook 登入功能：
    1. 在 Firebase 控制台中，開啟「Auth」部分。
    2. 在「登入方式」分頁中，啟用 Facebook 登入方式，並指定您從 Facebook 取得的「應用程式 ID」和「應用程式密鑰」。
    3. 接著，請確認您的 OAuth 重新導向 URI (例如 my-app-12345.firebaseapp.com/__/auth/handler) 列為 Facebook 應用程式設定頁面 (開發人員版 Facebook 網站的 產品設定 > Facebook 登入 設定) 中的 OAuth 重新導向 URI 之一。

使用 Firebase SDK 處理登入流程

如果您正在建構網路應用程式，透過 Firebase 驗證使用者 Facebook 帳戶的最簡單方法，就是使用 Firebase JavaScript SDK 處理登入流程。(如果您想在 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。例如：

    Web

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

    Web

    provider.addScope('user_birthday');
    facebook.js
    請參閱驗證提供者說明文件。
  3. 選用：如要將提供者的 OAuth 流程本地化為使用者偏好的語言，但不需明確傳遞相關的自訂 OAuth 參數，請在開始 OAuth 流程前，先更新 Auth 例項的語言程式碼。例如：

    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 提供者文件中指定的鍵和相應值。例如：

    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 參考文件。

    • 如要透過重新導向登入頁面來登入，請呼叫 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
      您也可以在這裡捕捉及處理錯誤。如需錯誤代碼清單，請參閱 驗證參考文件。

在 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