如何在 JS Web 应用程序的客户端使用 Twitter API。

在本文中，我将指导您完成实现 Twitter API 的步骤，以直接从您的 React/Vue/Angular 或任何其他 JS 应用程序获取有关用户和推文的数据。

介绍：

乍一看，你会问我为什么在我的应用程序中需要 Twitter 数据。让我告诉你我的故事……

我最近的一个 React 项目对为应用程序创建个人用户帐户有一个特殊要求。基本上，您必须添加一个 Twitter 帐户名称作为您社交媒体的一部分。尽管 Twitter 的独特之处在于，您的个人资料应该是真实的，以便将来与它整合。我看到你没有得到任何这些，所以一点提示：它是一个 NFT 集合创建者应用程序，你的 Twitter 帐户是创建的 NFT 所有权的证明（这样你就可以向世界公开你的 NFT，并发布任何新闻，或更新）。

基本上，工作流程是：

用户在表单字段中输入他的帐户名称
系统会提示他使用应用程序提供的文本在他的帐户上发布推文
应用程序检查给定 Twitter 用户的最新推文
如果任何推文与文本匹配，它会确认 Twitter 帐户的真实性，并让您继续进行帐户创建流程的后续步骤

我一直在为如何实现这一点而苦苦挣扎，在找到答案后，我想与您分享……

入门：

我将指南分为三个主要部分：

在 Twitter 开发者平台上创建项目
设置从浏览器访问 API 的代理
通过 fetch/Axios 请求获取 Twitter 数据

在 Twitter 开发者平台上创建项目

Twitter 要求用户拥有开发者帐号为了访问它的API。您可以使用现有的 Twitter 帐户或创建一个新帐户用于开发目的。 Twitter 要求开发人员回答一些关于他们是什么类型的开发人员（学生、专业人士等）以及他们需要什么类型的开发帐户的问题。

在您填写完所有必填字段后，Twitter 将验证信息（请记住，在执行这些步骤之前，您必须在 Twitter 帐户上添加并确认您的电话号码）。创建开发者帐户后，您将看下面的屏幕：

下一步是单击“开始”：

完整填写必填字段，现在您应该等待。通常需要一些时间来批准。至于我，这个过程大约需要 1 周时间，我必须回复 Twitter 团队的一些电子邮件，因为他们需要更多信息。

在您的基本访问权限获得批准后，您将能够访问 Developer Portal 并创建一个项目。

Twitter 最近发布了它的 v2 API，这正是我们将要使用的。要了解有关 Twitter 开发人员空间中的项目和应用程序的更多信息，请查看文件 .设置项目后，创建应用程序，它应该如下所示：

从开发人员仪表板中，您可以访问项目/应用程序，还可以检查所有端点与推文限制的接近程度。进入仪表板屏幕后，单击应用名称附近的钥匙图标。这里可以生成并保存 Bearer Token，我们稍后会用到：

所以，我们终于在这部分结束了。

设置从浏览器访问 API 的代理

如果你已经阅读了文档，你找到了你需要的端点并且会尝试请求 Twitter API，你会得到类似下面的响应：

在这里，我试图获取有关 Elon Musk 帐户的信息并遇到 CORS 错误。这是因为 Twitter API 不适用于浏览器并且没有“Access-Control-Allow-Origin”标头。

但不要放弃，有一个棘手的绕过方法，称为 Proxy。

在这一部分中，我们将配置和托管我们自己的代理，以通过它传输我们的请求，并直接在我们的浏览器中从端点接收数据。

有一篇关于设置代理的好文章，所以我建议您完成那里描述的步骤，您应该能够发布您的代理。

但我也会在这里简要描述这些步骤：

设置您的 Heroku 帐户
克隆 cors-anywhere GitHub 存储库，作者 Rob Wu 并在本地安装依赖项
创建本地仓库并将其部署到 Heroku

完成所有步骤后，您应该会在 Heroku 提供的链接上看到：

在这里，我们基本上在我们的应用程序和 Twitter API 端点之间创建了一个中间件。

现在让我们进入最后一部分！

通过 fetch/Axios 请求获取 Twitter 数据

欢迎来到本文实际测试 Twitter API 的地方。我编写了一个简单的 JS 请求服务：

 const BEARER_TOKEN = '（您保存的应用程序不记名令牌）AAAAAAAAADWDbqB82wBCYCbILiEPvLcaUlcIr%4&ascUrilGiycm6F1';  
 常量 PROXY_URL = '<https://your-poxy-link.herokuapp.com> '; 常量 callTwitterApi = async (url) => {  
 const response = await fetch(`${PROXY_URL}/${url}`, {  
 标题：{  
 '授权': `承载 ${BEARER_TOKEN}`  
 }});  
 常量数据 = 等待 response.json();  
 控制台.log（数据）；  
 } 调用TwitterApi('<https://api.twitter.com/2/users/by/username/elonmusk> ');

您可以在此处看到 2 个常量，第一个是您从应用程序的 Twitter 开发人员仪表板中保存的 BEARER_TOKEN。第二个是 PROXY_URL，您可以通过在 Heroku 上设置自己的代理服务器来获得它。现在结合这两件事，我们可以向 Twitter API v2 发出请求，以获取有关 Elon Musk 的 Twitter 帐户的信息。当我们在浏览器中运行这个脚本时，响应应该是这样的：