让用户通过 Twitter 登录

此页面由 Cloud Translation API 翻译。

本文档介绍如何使用 Identity Platform 让用户通过 Twitter 登录。

准备工作

本教程假定您已启用 Identity Platform，并且拥有一个使用 HTML 和 JavaScript 编写的基本 Web 应用。如需了解如何启用 Identity Platform 并进行登录，请参阅快速入门。

将 Twitter 配置为提供商

如需将 Twitter 配置为身份提供商，请执行以下操作：

前往 Google Cloud 控制台中的身份提供商页面。
前往“身份提供商”页面
点击添加提供商。
从列表中选择 Twitter。
输入您的 Twitter 应用 ID 和应用密钥。如果您还没有 ID 和密钥，则可以从 Twitter 应用页面获取一个。
将配置 Twitter 下列出的 URI 配置为您的 Twitter 应用的有效 OAuth 重定向 URI。如果您在 Identity Platform 中配置了自定义网域，请更新 Twitter 应用配置中的重定向 URI，以使用自定义网域而不是默认网域。例如，将 https://myproject.firebaseapp.com/__/auth/handler 更改为 https://auth.myownpersonaldomain.com/__/auth/handler。
在项目设置侧边栏中，点击添加网域，然后添加应用的网域。
我们建议您不要在正式版项目中包含 localhost。

注意：对于在 2025 年 4 月 28 日之前创建的项目，localhost 默认处于启用状态。
在配置您的应用部分，点击设置详细信息。将代码段复制到应用的代码中，以初始化 Identity Platform 客户端 SDK。
点击保存。

创建 Twitter 提供方对象实例：

Web 版本 9

import { TwitterAuthProvider } from "firebase/auth";

const provider = new TwitterAuthProvider();auth_twitter_provider_create.js

Web 版本 8

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

可选：对身份验证流程进行本地化。您可以指定语言，也可以使用设备的默认语言：

Web 版本 9

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

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

可选：指定其他自定义 OAuth 参数。这些参数是针对 Twitter 的，通常用于自定义身份验证体验。您无法传递 OAuth 或 Identity Platform 预留的参数。
Web 版本 9
```
provider.setCustomParameters({
  'lang': 'es'
});auth_twitter_provider_params.js
```
Web 版本 8
```
provider.setCustomParameters({
  'lang': 'es'
});twitter.js
```

使用 Twitter 提供商对象让用户登录。您可以打开一个弹出式窗口，也可以重定向当前网页。对于移动设备用户而言，重定向更为便捷。

如需显示弹出式窗口，请调用 signInWithPopup()：

Web 版本 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;
    // 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 = TwitterAuthProvider.credentialFromError(error);
    // ...
  });auth_twitter_signin_popup.js

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

如需重定向页面，请先调用 signInWithRedirect()。

使用 signInWithRedirect、linkWithRedirect 或 reauthenticateWithRedirect 时，请遵循最佳实践。

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() 来检索 Twitter 令牌：

Web 版本 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;
    // 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 = TwitterAuthProvider.credentialFromError(error);
    // ...
  });auth_twitter_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 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;
    // 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;
    // ...
  });twitter.js

获得访问令牌后，您就可以使用它来调用 Twitter API。例如：

REST

curl --request POST
  --url 'https://api.twitter.com/1.1/statuses/update.json?status=Hello%20world'
  --header 'authorization: OAuth oauth_consumer_key="CONSUMER_API_KEY",
  oauth_nonce="OAUTH_NONCE", oauth_signature="OAUTH_SIGNATURE",
  oauth_signature_method="HMAC-SHA1", oauth_timestamp="OAUTH_TIMESTAMP",
  oauth_token="ACCESS_TOKEN", oauth_version="1.0"'

如果您不想使用客户端 SDK，也可以手动处理登录流程：

按照开发者文档中的步骤将 Twitter 身份验证机制集成到您的应用中。
使用您在上一步中实现的流程让用户通过 Twitter 登录。

用您从 Twitter 收到的令牌交换 Identity Platform 凭据：

Web 版本 9

import { TwitterAuthProvider } from "firebase/auth";

const credential = TwitterAuthProvider.credential(accessToken, secret);auth_twitter_provider_credential.js

Web 版本 8

var credential = firebase.auth.TwitterAuthProvider.credential(accessToken, secret);twitter.js

使用该凭据让用户通过 Identity Platform 登录：

Web 版本 9

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

// Sign in with the credential from the user.
const auth = getAuth();
signInWithCredential(auth, credential)
  .then((result) => {
    // Signed in 
    // ...
  })
  .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;
    // ...
  });auth_signin_credential.js

Web 版本 8

// Sign in with the credential from the user.
firebase.auth()
  .signInWithCredential(credential)
  .then((result) => {
    // Signed in 
    // ...
  })
  .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;
    // ...
  });index.js

后续步骤

详细了解 Identity Platform 用户。
让用户通过其他身份提供商登录。

准备工作

将 Twitter 配置为提供商

让用户通过客户端 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

REST

手动让用户登录

Web 版本 9

Web 版本 8

Web 版本 9

Web 版本 8

后续步骤