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

您可以将 Twitter 身份验证机制集成到您的应用中,让用户可使用自己的 Twitter 帐号进行 Firebase 身份验证。您可以使用 Firebase SDK 实施登录流程,或者手动实施 Twitter OAuth,并将生成的访问令牌和密钥传递至 Firebase,从而集成 Twitter 身份验证。

开始之前

  1. 将 Firebase 添加至您的 JavaScript 项目
  2. 在 Twitter 上将您的应用注册为开发者应用,并获取您的应用的 API 密钥API 密码
  3. 启用 Twitter 登录:
    1. Firebase 控制台中,打开身份验证 (Authentication) 部分。
    2. 登录方法标签上,启用 Twitter 登录方法,然后指定从 Twitter 获取的 API 密钥API 密码
    3. 然后,请务必转到 Twitter 应用配置,在您的应用的设置页面上,将 Firebase OAuth 重定向 URI(例如 my-app-12345.firebaseapp.com/__/auth/handler)设置为回调网址

使用 Firebase SDK 处理登录流程

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

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

  1. 创建 Twitter 提供方对象实例:
    var provider = new firebase.auth.TwitterAuthProvider();
    
  2. 可选:要在不明确地传递相关自定义 OAuth 参数的情况下将提供方的 OAuth 流程本地化为用户偏好的语言,请在启动 OAuth 流程之前先更新 Auth 实例中的语言代码。例如:
    firebase.auth().languageCode = 'pt';
    // To apply the default browser preference instead of explicitly setting it.
    // firebase.auth().useDeviceLanguage();
    
  3. 可选:指定您希望通过 OAuth 请求发送的其他自定义 OAuth 提供方参数。如需添加自定义参数,请使用包含 OAuth 提供方文档中指定的键及相应值的对象,在已初始化的提供方服务中调用 setCustomParameters。例如:
    provider.setCustomParameters({
      'lang': 'es'
    });
    
    禁止使用保留的必需 OAuth 参数,系统将忽略此类参数。请参阅身份验证提供方参考资料了解更多详细信息。
  4. 使用 Twitter 提供方对象进行 Firebase 身份验证。您可以提示您的用户,让其通过打开弹出式窗口或重定向至登录页面的方法以自己的 Twitter 帐号登录。移动设备最好使用重定向方法。
    • 要使用弹出式窗口登录,请调用 signInWithPopup
      firebase.auth().signInWithPopup(provider).then(function(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.
        var token = result.credential.accessToken;
        var secret = result.credential.secret;
        // 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;
        // ...
      });
      
      此外请注意,您可以检索 Twitter 提供方的 OAuth 令牌,使用 Twitter API 可从该令牌中提取其他的数据。

      您还可以通过这种方法捕捉并处理错误。要获取错误代码列表,请参阅身份验证参考文档

    • 要用重定向至登录页面的方法登录,请调用 signInWithRedirect
      firebase.auth().signInWithRedirect(provider);
      
      然后,您还可以通过在您的页面加载时调用 getRedirectResult 来检索 Twitter 提供方的 OAuth 令牌:
      firebase.auth().getRedirectResult().then(function(result) {
        if (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 = result.credential.accessToken;
          var secret = result.credential.secret;
          // ...
        }
        // 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;
        // ...
      });
      
      您还可以通过这种方法捕捉并处理错误。要获取错误代码列表,请参阅身份验证参考文档

手动处理登录流程

您还可以通过调用 Twitter OAuth 端点来处理登录流程,从而使用 Twitter 帐号进行 Firebase 身份验证:

  1. 开发者文档中的说明操作,将 Twitter 登录机制集成到您的应用中。在 Twitter 登录流程结束后,您会收到一个 OAuth 访问令牌和一个 OAuth 密钥。
  2. 如果您需要在 Node.js 应用上登录,请将 OAuth 访问令牌和 OAuth 密钥发送到 Node.js 应用。
  3. 在用户使用 Twitter 成功登录后,用 OAuth 访问令牌和 OAuth 密钥换取 Firebase 凭据:
    var credential = firebase.auth.TwitterAuthProvider.credential(token, secret);
    
  4. 最后,使用 Firebase 凭据进行 Firebase 身份验证:
    firebase.auth().signInWithCredential(credential).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;
      // ...
    });

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

如果您正在构建 Chrome 扩展程序应用,则必须将 Chrome 扩展程序 ID 列入白名单:

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

只有 Chrome 扩展程序才能使用弹出式操作(signInWithPopuplinkWithPopup),因为 Chrome 扩展程序无法使用 HTTP 重定向。您应该从后台脚本而不是浏览器操作弹出窗口中调用这些方法,因为身份验证弹出窗口将取消浏览器操作弹出窗口。

后续步骤

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

  • 在您的应用中,要了解用户的身份验证状态,建议在 Auth 对象上设置一个观察者。您可以从 User 对象获取用户的个人资料基本信息。请参阅管理用户

  • 在您的 Firebase 实时数据库和 Cloud Storage 安全规则中,您可以从 auth 变量中获取已登录用户的唯一用户 ID,然后用此 ID 来控制用户可以访问哪些数据。

您可以允许用户通过多种身份验证提供方服务登录您的应用,只需将多个身份验证提供方凭据关联至现有用户帐号即可。

要让用户退出登录,可调用 signOut

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

发送以下问题的反馈:

此网页
需要帮助?请访问我们的支持页面