您可以通过将 Twitter 身份验证集成到您的应用程序中,让您的用户使用他们的 Twitter 帐户通过 Firebase 进行身份验证。您可以通过使用 Firebase SDK 执行登录流程,或通过手动执行 Twitter OAuth 流程并将生成的访问令牌和密码传递给 Firebase 来集成 Twitter 身份验证。
在你开始之前
- 将 Firebase 添加到您的 JavaScript 项目。
- 在Firebase 控制台中,打开Auth部分。
- 在登录方法选项卡上,启用Twitter提供商。
- 将该提供商的开发人员控制台中的API 密钥和API 机密添加到提供商配置中:
- 在 Twitter 上将您的应用程序注册为开发人员应用程序,并获取您应用程序的 OAuth API 密钥和API 机密。
- 确保您的 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();
Web version 8
var provider = new firebase.auth.TwitterAuthProvider();
- 可选:要将提供商的 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();
Web version 8
firebase.auth().languageCode = 'it'; // To apply the default browser preference instead of explicitly setting it. // firebase.auth().useDeviceLanguage();
- 可选:指定要与 OAuth 请求一起发送的其他自定义 OAuth 提供程序参数。要添加自定义参数,请使用包含 OAuth 提供程序文档指定的密钥和相应值的对象对已初始化的提供程序调用
setCustomParameters
。例如:保留的必需 OAuth 参数是不允许的,将被忽略。有关更多详细信息,请参阅身份验证提供程序参考。Web version 9
provider.setCustomParameters({ 'lang': 'es' });
Web version 8
provider.setCustomParameters({ 'lang': 'es' });
- 使用 Twitter 提供程序对象通过 Firebase 进行身份验证。您可以通过打开弹出窗口或重定向到登录页面来提示您的用户使用他们的 Twitter 帐户登录。在移动设备上首选重定向方法。
- 要使用弹出窗口登录,请调用
signInWithPopup
:另请注意,您可以检索 Twitter 提供商的 OAuth 令牌,该令牌可用于使用 Twitter API 获取其他数据。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); // ... });
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; // ... });
这也是您可以捕获和处理错误的地方。有关错误代码的列表,请查看Auth Reference Docs 。
- 要通过重定向到登录页面登录,请调用
signInWithRedirect
:使用 signInWithRedirect 时遵循最佳实践。然后,您还可以通过在页面加载时调用Web version 9
import { getAuth, signInWithRedirect } from "firebase/auth"; const auth = getAuth(); signInWithRedirect(auth, provider);
Web version 8
firebase.auth().signInWithRedirect(provider);
getRedirectResult
来检索 Twitter 提供商的 OAuth 令牌:这也是您可以捕获和处理错误的地方。有关错误代码的列表,请查看Auth Reference Docs 。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); // ... });
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 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); // ... });
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; // ... });
在 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 项目的一部分,可用于在项目中的每个应用程序中识别用户,无论用户如何登录。
在您的应用程序中,了解用户身份验证状态的推荐方法是在
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. });
Web version 8
firebase.auth().signOut().then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });