在 JavaScript 中使用 Facebook 登录服务进行身份验证

您可以将 Facebook 登录服务集成到您的应用中，让您的用户能够使用自己的 Facebook 帐号进行 Firebase 身份验证。集成 Facebook 登录的方法有两种：使用 Firebase SDK 执行登录流程；手动执行 Facebook 登录流程，并将生成的访问令牌传递给 Firebase。

准备工作

将 Firebase 添加至您的 JavaScript 项目。
在 Facebook for Developers 网站上，为您的应用获取应用 ID 和应用密钥。
启用 Facebook 登录服务：
1. 在 Firebase 控制台中，打开 Auth 部分。
2. 在登录方法标签页上，启用 Facebook 登录方法，并指定您之前从 Facebook 获得的应用 ID 和应用密钥。
3. 然后，请务必转到 Facebook for Developers 网站，依次点击产品设置 (Product Settings) > Facebook 登录 (Facebook Login) 配置，然后在您的 Facebook 应用的设置页面中，确保您的 OAuth 重定向 URI（例如 my-app-12345.firebaseapp.com/__/auth/handler）出现在 OAuth 重定向 URI (OAuth redirect URIs) 列表中。

使用 Firebase SDK 处理登录流程

如果您是在构建 Web 应用，想要通过用户的 Facebook 帐号对其进行 Firebase 身份验证，最简单的方法是使用 Firebase JavaScript SDK 来处理登录流程（如果您希望在 Node.js 或其他非浏览器环境中对用户进行身份验证，则必须手动处理登录流程）。

如需使用 Firebase JavaScript SDK 处理登录流程，请按以下步骤操作：

创建 Facebook 提供方对象的一个实例：

Web 版本 9

import { FacebookAuthProvider } from "firebase/auth";

const provider = new FacebookAuthProvider();auth_facebook_provider_create.js

Web 版本 8

var provider = new firebase.auth.FacebookAuthProvider();facebook.js

可选：指定您希望向身份验证提供方请求的额外 OAuth 2.0 范围。如需添加范围，请调用 addScope。例如：
Web 版本 9

详细了解可实现摇树优化的 Web v9 模块化 SDK，并从版本 8 开始升级。
```
provider.addScope('user_birthday');auth_facebook_provider_scopes.js
```
Web 版本 8
```
provider.addScope('user_birthday');facebook.js
```
请参阅身份验证提供方文档。

可选：若要在无需明确传递相关自定义 OAuth 参数的情况下，将提供方的 OAuth 流程本地化为用户偏好的语言，请在启动 OAuth 流程之前更新 Auth 实例中的语言代码。例如：

Web 版本 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();auth_set_language_code.js

Web 版本 8

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

可选：指定您希望通过 OAuth 请求发送的其他自定义 OAuth 提供方参数。如需添加自定义参数，请使用包含 OAuth 提供方文档中指定的键及相应值的对象，调用已初始化的提供方的 setCustomParameters 方法。例如：
Web 版本 9

详细了解可实现摇树优化的 Web v9 模块化 SDK，并从版本 8 开始升级。
```
provider.setCustomParameters({
  'display': 'popup'
});auth_facebook_provider_params.js
```
Web 版本 8
```
provider.setCustomParameters({
  'display': 'popup'
});facebook.js
```
禁止使用保留的必需 OAuth 参数，系统将忽略此类参数。有关详情，请参阅身份验证提供方参考。

使用 Facebook 提供方对象进行 Firebase 身份验证。您可以通过弹出式窗口或重定向至登录页面，提示用户使用自己的 Facebook 帐号登录。在移动设备上最好使用重定向方法。

如需使用弹出式窗口登录，请调用 signInWithPopup：

Web 版本 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);

    // ...
  });auth_facebook_signin_popup.js

Web 版本 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;

    // ...
  });facebook.js

此外请注意，您可以检索 Facebook 提供方的 OAuth 令牌，该令牌可用于通过 Facebook API 提取额外数据。

您还可以在此处捕捉并处理错误。如需获取错误代码列表，请参阅身份验证参考文档。

如需通过重定向到登录页面进行登录，请调用 signInWithRedirect：

Web 版本 9

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

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

Web 版本 8

firebase.auth().signInWithRedirect(provider);index.js

您还可以在页面加载时，调用 getRedirectResult 来检索 Facebook 提供方的 OAuth 令牌：

Web 版本 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);
    // ...
  });auth_facebook_signin_redirect_result.js

Web 版本 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;
    // ...
  });facebook.js

您还可以在此处捕捉并处理错误。如需获取错误代码列表，请参阅身份验证参考文档。

处理“account-exists-with-different-credential”错误

如果您在 Firebase 控制台中启用了每个电子邮件地址一个帐号设置，当用户尝试使用一个 Firebase 用户的提供方（例如 Google）的服务中已存在的电子邮件地址登录另一个提供方（例如 Facebook）的服务时，系统会抛出 auth/account-exists-with-different-credential 错误及 AuthCredential 对象（Facebook 访问令牌）。要登录到所需的提供方，用户必须先登录到现有提供方 (Google)，然后关联至之前的 AuthCredential（Facebook 访问令牌）。

如果使用的是 signInWithPopup，您可以使用与下例类似的代码来处理 auth/account-exists-with-different-credential 错误：


// Step 1.
// User tries to sign in to Facebook.
auth.signInWithPopup(new firebase.auth.FacebookAuthProvider()).catch(function(error) {
  // An error happened.
  if (error.code === 'auth/account-exists-with-different-credential') {
    // Step 2.
    // User's email already exists.
    // The pending Facebook credential.
    var pendingCred = error.credential;
    // The provider account's email address.
    var email = error.email;
    // Get sign-in methods for this email.
    auth.fetchSignInMethodsForEmail(email).then(function(methods) {
      // Step 3.
      // If the user has several sign-in methods,
      // the first method in the list will be the "recommended" method to use.
      if (methods[0] === 'password') {
        // Asks the user their password.
        // In real scenario, you should handle this asynchronously.
        var password = promptUserForPassword(); // TODO: implement promptUserForPassword.
        auth.signInWithEmailAndPassword(email, password).then(function(result) {
          // Step 4a.
          return result.user.linkWithCredential(pendingCred);
        }).then(function() {
          // Facebook account successfully linked to the existing Firebase user.
          goToApp();
        });
        return;
      }
      // All the other cases are external providers.
      // Construct provider object for that provider.
      // TODO: implement getProviderForProviderId.
      var provider = getProviderForProviderId(methods[0]);
      // At this point, you should let the user know that they already have an account
      // but with a different provider, and let them validate the fact they want to
      // sign in with this provider.
      // Sign in to provider. Note: browsers usually block popup triggered asynchronously,
      // so in real scenario you should ask the user to click on a "continue" button
      // that will trigger the signInWithPopup.
      auth.signInWithPopup(provider).then(function(result) {
        // Remember that the user may have signed in with an account that has a different email
        // address than the first one. This can happen as Firebase doesn't control the provider's
        // sign in flow and the user is free to login using whichever account they own.
        // Step 4b.
        // Link to Facebook credential.
        // As we have access to the pending credential, we can directly call the link method.
        result.user.linkAndRetrieveDataWithCredential(pendingCred).then(function(usercred) {
          // Facebook account successfully linked to the existing Firebase user.
          goToApp();
        });
      });
    });
  }
});

重定向模式

在重定向模式中处理该错误的方法类似，不同的是待处理凭据必须在页面重定向之间缓存（例如，使用会话存储）。

您还可以通过 Facebook Login JavaScript SDK 处理登录流程，从而使用 Facebook 帐号进行 Firebase 身份验证：

按开发者文档中的说明操作，将 Facebook 登录服务集成到您的应用中。确保使用您的 Facebook 应用 ID 配置 Facebook 登录：

<script src="//connect.facebook.net/en_US/sdk.js"></script>
<script>
  FB.init({
    /**********************************************************************
     * TODO(Developer): Change the value below with your Facebook app ID. *
     **********************************************************************/
    appId      : '<YOUR_FACEBOOK_APP_ID>',
    status     : true,
    xfbml      : true,
    version    : 'v2.6'
  });
</script>

我们还针对 Facebook 身份验证状态设置了监听器：

FB.Event.subscribe('auth.authResponseChange', checkLoginState);

在集成 Facebook 登录服务之后，在您的网页上添加一个 Facebook 登录按钮：

<fb:login-button data-auto-logout-link="true" scope="public_profile,email" size="large"></fb:login-button>

在 Facebook 身份验证状态回调中，使用来自 Facebook 身份验证响应的身份验证令牌换取 Firebase 凭据，然后登录 Firebase：

Web 版本 9

import { getAuth, onAuthStateChanged, signInWithCredential, signOut, FacebookAuthProvider } from "firebase/auth";
const auth = getAuth();

function checkLoginState(response) {
  if (response.authResponse) {
    // User is signed-in Facebook.
    const unsubscribe = onAuthStateChanged(auth, (firebaseUser) => {
      unsubscribe();
      // Check if we are already signed-in Firebase with the correct user.
      if (!isUserEqual(response.authResponse, firebaseUser)) {
        // Build Firebase credential with the Facebook auth token.
        const credential = FacebookAuthProvider.credential(
            response.authResponse.accessToken);

        // Sign in with the credential from the Facebook user.
        signInWithCredential(auth, credential)
          .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);
            // ...
          });
      } else {
        // User is already signed-in Firebase with the correct user.
      }
    });
  } else {
    // User is signed-out of Facebook.
    signOut(auth);
  }
}auth_facebook_callback.js

Web 版本 8

function checkLoginState(response) {
  if (response.authResponse) {
    // User is signed-in Facebook.
    var unsubscribe = firebase.auth().onAuthStateChanged((firebaseUser) => {
      unsubscribe();
      // Check if we are already signed-in Firebase with the correct user.
      if (!isUserEqual(response.authResponse, firebaseUser)) {
        // Build Firebase credential with the Facebook auth token.
        var credential = firebase.auth.FacebookAuthProvider.credential(
            response.authResponse.accessToken);

        // Sign in with the credential from the Facebook user.
        firebase.auth().signInWithCredential(credential)
          .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;
            // ...
          });
      } else {
        // User is already signed-in Firebase with the correct user.
      }
    });
  } else {
    // User is signed-out of Facebook.
    firebase.auth().signOut();
  }
}facebook.js

您还可以在此处捕捉并处理错误。如需获取错误代码列表，请参阅身份验证参考文档。

此外，您应确保 Facebook 用户尚未登录 Firebase，避免不必要的重复身份验证：

Web 版本 9

import { FacebookAuthProvider } from "firebase/auth";

function isUserEqual(facebookAuthResponse, firebaseUser) {
  if (firebaseUser) {
    const providerData = firebaseUser.providerData;
    for (let i = 0; i < providerData.length; i++) {
      if (providerData[i].providerId === FacebookAuthProvider.PROVIDER_ID &&
          providerData[i].uid === facebookAuthResponse.userID) {
        // We don't need to re-auth the Firebase connection.
        return true;
      }
    }
  }
  return false;
}auth_facebook_checksameuser.js

Web 版本 8

function isUserEqual(facebookAuthResponse, firebaseUser) {
  if (firebaseUser) {
    var providerData = firebaseUser.providerData;
    for (var i = 0; i < providerData.length; i++) {
      if (providerData[i].providerId === firebase.auth.FacebookAuthProvider.PROVIDER_ID &&
          providerData[i].uid === facebookAuthResponse.userID) {
        // We don't need to re-auth the Firebase connection.
        return true;
      }
    }
  }
  return false;
}facebook.js

高级：在 Node.js 中进行 Firebase 身份验证

如需在 Node.js 应用中进行 Firebase 身份验证，请按以下步骤操作：

使用用户的 Facebook 帐号登录，获取用户的 Facebook 访问令牌。例如，如手动处理登录流程部分中所述，让用户在浏览器中登录，将访问令牌发送到 Node.js 应用，而不是在客户端应用中使用该访问令牌。

取得用户的 Facebook 访问令牌之后，使用该令牌构建 Credential 对象，然后使用该凭据进行登录：

Web 版本 9

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

// Sign in with the credential from the Facebook user.
const auth = getAuth();
signInWithCredential(auth, credential)
  .then((result) => {
    // Signed in
    const credential = FacebookAuthProvider.credentialFromResult(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.email;
    // The AuthCredential type that was used.
    const credential = FacebookAuthProvider.credentialFromError(error);
    // ...
  });auth_facebook_signin_credential.js

Web 版本 8

// Sign in with the credential from the Facebook user.
firebase.auth().signInWithCredential(credential)
  .then((result) => {
    // Signed in
    var credential = result.credential;
    // ...
  })
  .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 扩展程序应用，则必须添加 Chrome 扩展程序 ID：

在 Firebase 控制台中打开您的项目。
在身份验证部分中，打开登录方法页面。
向“已获授权的网域”列表添加格式如下的 URI：
```
chrome-extension://CHROME_EXTENSION_ID
```

由于 Chrome 扩展程序无法使用 HTTP 重定向，因此只能使用弹出式操作方式（signInWithPopup、linkWithPopup 和 reauthenticateWithPopup）。您应该从后台页面脚本而不是弹出式窗口（浏览器操作）中调用这些方法，因为身份验证的弹出式窗口将取消浏览器操作的弹出式窗口。弹出式操作方式只能在使用 Manifest V2 的扩展程序中使用。较新的 Manifest V3 只允许采用 Service Worker 形式的后台脚本，根本无法执行弹出式操作方式。

在 Chrome 扩展程序的清单文件中，确保将 https://apis.google.com 网址加入 content_security_policy 许可名单中。

在创建项目时，Firebase 将为您的项目预配一个唯一的子网域：https://my-app-12345.firebaseapp.com。

它也将用作 OAuth 登录的重定向机制。该网域需要列入所有受支持的 OAuth 提供方的许可名单。但是，这意味着用户在登录 Facebook 时可能会先看到该网域（前往：https://my-app-12345.firebaseapp.com），然后才重定向回应用。

如需避免显示子网域，您可以使用 Firebase Hosting 设置自定义网域：

按照针对 Hosting 设置您的网域中的第 1 步到第 3 步执行操作。当您验证网域所有权时，Hosting 会为您的自定义网域预配一个 SSL 证书。
在 Firebase 控制台中，将您的自定义网域添加到已获授权的网域列表：auth.custom.domain.com。
在 Facebook 开发者控制台或 OAuth 设置页面中，将可通过该自定义网域访问的重定向页面的网址 (https://auth.custom.domain.com/__/auth/handler) 加入白名单。

初始化 JavaScript 库时，使用 authDomain 字段指定您的自定义网域：

var config = {
  apiKey: '...',
  // Changed from 'my-app-12345.firebaseapp.com'.
  authDomain: 'auth.custom.domain.com',
  databaseURL: 'https://my-app-12345.firebaseio.com',
  projectId: 'my-app-12345',
  storageBucket: 'my-app-12345.appspot.com',
  messagingSenderId: '1234567890'
};
firebase.initializeApp(config);

后续步骤

在用户首次登录后，系统会创建一个新的用户帐号，并将其与该用户登录时使用的凭据（即用户名和密码、电话号码或者身份验证提供方信息）相关联。此新帐号存储在您的 Firebase 项目中，无论用户采用何种方式登录，您项目中的每个应用都可以使用此帐号来识别用户。

在您的应用中，建议采用在 Auth 对象上设置观察者的方式来了解用户的身份验证状态。然后您可以从 User 对象获取用户的基本个人资料信息。请参阅管理用户。
在您的 Firebase Realtime Database 和 Cloud Storage 安全规则中，您可以从 auth 变量获取已登录用户的唯一用户 ID，然后利用此 ID 来控制用户可以访问哪些数据。

您可以将身份验证提供方凭据关联至现有用户帐号，让用户可以使用多个身份验证提供方登录您的应用。

如需将用户退出登录，请调用 signOut：

Web 版本 9

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 版本 8

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

在 JavaScript 中使用 Facebook 登录服务进行身份验证

准备工作

使用 Firebase SDK 处理登录流程

Web 版本 9

Web 版本 8

Web 版本 9

Web 版本 8

Web 版本 9

Web 版本 8

Web 版本 9

Web 版本 8

Web 版本 9

Web 版本 8

Web 版本 9

Web 版本 8

Web 版本 9

Web 版本 8

处理“account-exists-with-different-credential”错误

弹出模式

重定向模式

高级：手动处理登录流程

Web 版本 9

Web 版本 8

Web 版本 9

Web 版本 8

高级：在 Node.js 中进行 Firebase 身份验证

Web 版本 9

Web 版本 8

在 Chrome 扩展程序中进行 Firebase 身份验证

为 Facebook 登录服务自定义重定向网域

后续步骤

Web 版本 9

Web 版本 8