此页面由 Cloud Translation API 翻译。

在 JavaScript 中使用 Twitter 进行身份验证

您可以通过将 Twitter 身份验证集成到您的应用程序中，让您的用户使用他们的 Twitter 帐户通过 Firebase 进行身份验证。您可以通过使用 Firebase SDK 执行登录流程，或通过手动执行 Twitter OAuth 流程并将生成的访问令牌和密码传递给 Firebase 来集成 Twitter 身份验证。

在你开始之前

将 Firebase 添加到您的 JavaScript 项目。
在Firebase 控制台中，打开Auth部分。
在登录方法选项卡上，启用Twitter提供商。
将该提供商的开发人员控制台中的API 密钥和API 机密添加到提供商配置中：
1. 在 Twitter 上将您的应用程序注册为开发人员应用程序，并获取您应用程序的 OAuth API 密钥和API 机密。
2. 确保您的 Firebase OAuth 重定向 URI （例如my-app-12345.firebaseapp.com/__/auth/handler ）在您的Twitter 应用的配置页面中设置为您的授权回调 URL 。
单击保存。

使用 Firebase SDK 处理登录流程

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

要使用 Firebase JavaScript SDK 处理登录流程，请执行以下步骤：

创建 Twitter 提供者对象的实例：

Web version 9

import { TwitterAuthProvider } from "firebase/auth";

const provider = new TwitterAuthProvider();auth_twitter_provider_create.js

Web version 8

var provider = new firebase.auth.TwitterAuthProvider();twitter.js

可选：要将提供商的 OAuth 流程本地化为用户的首选语言而不显式传递相关的自定义 OAuth 参数，请在启动 OAuth 流程之前更新 Auth 实例上的语言代码。例如：

Web version 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 version 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 version 9
详细了解tree-shakeable Web v9 模块化 SDK 并从版本 8升级。
```
provider.setCustomParameters({
  'lang': 'es'
});auth_twitter_provider_params.js
```
Web version 8
```
provider.setCustomParameters({
  'lang': 'es'
});twitter.js
```
保留的必需 OAuth 参数是不允许的，将被忽略。有关更多详细信息，请参阅身份验证提供程序参考。

使用 Twitter 提供程序对象通过 Firebase 进行身份验证。您可以通过打开弹出窗口或重定向到登录页面来提示您的用户使用他们的 Twitter 帐户登录。在移动设备上首选重定向方法。

要使用弹出窗口登录，请调用signInWithPopup ：

Web version 9

import { getAuth, signInWithPopup, TwitterAuthProvider } from "firebase/auth";

const auth = getAuth();
signInWithPopup(auth, provider)
  .then((result) => {
    // This gives you a the Twitter OAuth 1.0 Access Token and Secret.
    // You can use these server side with your app's credentials to access the Twitter API.
    const credential = TwitterAuthProvider.credentialFromResult(result);
    const token = credential.accessToken;
    const secret = credential.secret;

    // The signed-in user info.
    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.customData.email;
    // The AuthCredential type that was used.
    const credential = TwitterAuthProvider.credentialFromError(error);
    // ...
  });auth_twitter_signin_popup.js

Web version 8

firebase
  .auth()
  .signInWithPopup(provider)
  .then((result) => {
    /** @type {firebase.auth.OAuthCredential} */
    var credential = result.credential;

    // This gives you a the Twitter OAuth 1.0 Access Token and Secret.
    // You can use these server side with your app's credentials to access the Twitter API.
    var token = credential.accessToken;
    var secret = credential.secret;

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

另请注意，您可以检索 Twitter 提供商的 OAuth 令牌，该令牌可用于使用 Twitter API 获取其他数据。

这也是您可以捕获和处理错误的地方。有关错误代码的列表，请查看Auth Reference Docs 。

要通过重定向到登录页面登录，请调用signInWithRedirect ：使用 signInWithRedirect 时遵循最佳实践。

Web version 9

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

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

Web version 8

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

然后，您还可以通过在页面加载时调用getRedirectResult来检索 Twitter 提供商的 OAuth 令牌：

Web version 9

import { getAuth, getRedirectResult, TwitterAuthProvider } from "firebase/auth";

const auth = getAuth();
getRedirectResult(auth)
  .then((result) => {
    // This gives you a the Twitter OAuth 1.0 Access Token and Secret.
    // You can use these server side with your app's credentials to access the Twitter API.
    const credential = TwitterAuthProvider.credentialFromResult(result);
    const token = credential.accessToken;
    const secret = credential.secret;
    // ...

    // The signed-in user info.
    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.customData.email;
    // The AuthCredential type that was used.
    const credential = TwitterAuthProvider.credentialFromError(error);
    // ...
  });auth_twitter_signin_redirect_result.js

Web version 8

firebase.auth()
  .getRedirectResult()
  .then((result) => {
    if (result.credential) {
      /** @type {firebase.auth.OAuthCredential} */
      var credential = result.credential;

      // This gives you a the Twitter OAuth 1.0 Access Token and Secret.
      // You can use these server side with your app's credentials to access the Twitter API.
      var token = credential.accessToken;
      var secret = credential.secret;
      // ...
    }

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

这也是您可以捕获和处理错误的地方。有关错误代码的列表，请查看Auth Reference Docs 。

处理帐户存在不同凭据错误

如果您在Firebase 控制台中启用了每个电子邮件地址一个帐户设置，当用户尝试使用另一个 Firebase 用户的提供商（例如 Google）已经存在的电子邮件登录提供商（例如 Twitter）时，错误auth/account-exists-with-different-credential与AuthCredential对象（Twitter oauth 令牌和秘密）一起抛出。要完成登录目标提供商，用户必须先登录现有提供商 (Google)，然后链接到之前的AuthCredential （Twitter oauth 令牌和密码）。

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


// Step 1.
// User tries to sign in to Twitter.
auth.signInWithPopup(new firebase.auth.TwitterAuthProvider()).catch(function(error) {
  // An error happened.
  if (error.code === 'auth/account-exists-with-different-credential') {
    // Step 2.
    // User's email already exists.
    // The pending Twitter 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() {
          // Twitter 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 Twitter credential.
        // As we have access to the pending credential, we can directly call the link method.
        result.user.linkAndRetrieveDataWithCredential(pendingCred).then(function(usercred) {
          // Twitter account successfully linked to the existing Firebase user.
          goToApp();
        });
      });
    });
  }
});

重定向模式

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

手动处理登录流程

您还可以通过调用 Twitter OAuth 端点处理登录流程，使用 Twitter 帐户通过 Firebase 进行身份验证：

按照开发人员的文档将 Twitter 身份验证集成到您的应用程序中。在 Twitter 登录流程结束时，您将收到一个 OAuth 访问令牌和一个 OAuth 密码。
如果您需要登录 Node.js 应用程序，请将 OAuth 访问令牌和 OAuth 密码发送到 Node.js 应用程序。
用户成功登录 Twitter 后，将 OAuth 访问令牌和 OAuth 密码交换为 Firebase 凭证：
```
var credential = firebase.auth.TwitterAuthProvider.credential(token, secret);
```

使用 Firebase 凭据通过 Firebase 进行身份验证：

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

Web version 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
```

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

在 Chrome 扩展程序的清单文件中，确保将https://apis.google.com URL 添加到content_security_policy白名单。

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

这也将用作 OAuth 登录的重定向机制。所有支持的 OAuth 提供商都需要允许该域。但是，这意味着用户在重定向回应用程序之前登录 Twitter 时可能会看到该域：继续访问：https://my-app-12345.firebaseapp.com 。

为避免显示您的子域，您可以使用 Firebase 托管设置自定义域：

按照为托管设置您的域中的步骤 1 到 3 进行操作。当您验证您的域所有权时，Hosting 会为您的自定义域提供 SSL 证书。
将您的自定义域添加到Firebase 控制台中的授权域列表： auth.custom.domain.com 。
在 Twitter 开发人员控制台或 OAuth 设置页面中，将重定向页面的 URL 列入白名单，该页面可在您的自定义域上访问： https://auth.custom.domain.com/__/auth/handler ://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 Security Rules中，您可以从auth变量中获取登录用户的唯一用户 ID，并使用它来控制用户可以访问的数据。

您可以允许用户使用多个身份验证提供程序登录您的应用程序，方法是将身份验证提供程序凭据链接到现有用户帐户。

要注销用户，请调用signOut ：

Web version 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 version 8

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

在 JavaScript 中使用 Twitter 进行身份验证

在你开始之前

使用 Firebase SDK 处理登录流程

Web version 9

Web version 8

Web version 9

Web version 8

Web version 9

Web version 8

Web version 9

Web version 8

Web version 9

Web version 8

Web version 9

Web version 8

处理帐户存在不同凭据错误

弹出模式

重定向模式

手动处理登录流程

Web version 9

Web version 8

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

自定义 Twitter 登录的重定向域

下一步

Web version 9

Web version 8