使用 JavaScript 和 Twitter API 加载推文答案

【问题标题】：Loading Tweets using JavaScript and Twitter API使用 JavaScript 和 Twitter API 加载推文
【发布时间】：2019-07-21 11:35:38
【问题描述】：

我对 JavaScript 比较陌生，并决定尝试通过 API 访问 Twitter 以获取我的 5 条最新推文，但是我遇到了困难，我将不胜感激。

这是tweets.js 代码。我已经仔细查看了 API 来形成这个，但不确定它是否正确。

tweets = {
    loaddata: function() {
        $.ajax({
            url: 'https://api.twitter.com/1.1/statuses/user_timeline.json',
            type: 'GET',
            dataType: 'json',
            data: {
                screen_name: 'techybox',
                include_rts: false,
                count: 5,
                include_entities: true
            },
            success: function(data, text) {
                var html = '<li class="tweet">TWEET</li>';
                $('#timeline').append(html.replace('TWEET', tweets(data.text)));
            }
        });
    };
}

$(document).ready(function() {
    tweets.loaddata();

});

理论上应该加载 5 条最新的推文并将它们附加到带有 id 时间线的 UL。我已经看到您可能需要 OAuth 来执行此操作，但我不确定我将如何实现它？我对么？ Twitter 的旧 API 似乎没有这个但 1.1 可以工作。可能会因此而改变？

最后是我的 html 页面，其中只包含 UL：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tweets</title>
</head>
<body>
    <h1>Tweets</h1>
    <ul id='timeline'></ul>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="tweets.js"></script>
</body>
</html>

【问题讨论】：

您是否在控制台中看到任何错误？
你有一个额外的括号，这是正确的代码，你可以用你的api信息试试吗？ jsfiddle.net/pjz1fzzg
感谢您发现这一点，它似乎仍然无法正常工作。我应该查看 OAuth 吗？
我几乎肯定您需要将 OAuth 与 twitter API 一起使用...
您可能想查看 Twit 库，它使 OAuth 部分变得轻而易举 github.com/ttezel/twit

标签： javascript twitter

【解决方案1】：

Twitter 更新后的 API 需要 oAuth，这需要您编写一个服务器端组件，供您的 javascript 使用。

所以这并不是你的方法是错误的。 Twitter 只是不想让你再以这种方式获取信息。

请注意，如果您在浏览器中访问 API，您只会收到错误消息。 https://api.twitter.com/1.1/statuses/user_timeline.json?screen_name=techybox&count=3

这里有一篇关于这个主题的非常好的帖子：Simplest PHP example for retrieving user_timeline with Twitter API version 1.1

【讨论】：

非常感谢 :) 通过对 OAuth 的一些阅读，我需要一个服务器端组件，而不是按照 twitter 的建议将其实现到 Javascript 中

【解决方案2】：

使用来自 here的oauth

var oauth = require('oauth.js');

var urlLink = 'https://api.twitter.com/1.1/statuses/update.json';

var twitterStatus = "Sample tweet";

var oauth_consumer_key = "d6T0PcnqxxxxxxxxxxUB7Jok2f";
var consumerSecret = "NFbG1H7CGRxukJTPxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxze02qH8";

var oauth_token = "306673734-RQanTkxxxxxxxxxxxxxxxxxxeH4NuqQ8Z";
var tokenSecret = "YnF5vpjclMMVWhuxxxxxxxxxxxxxxxl3xejqAu";

var nonce = oauth.nonce(32);
var ts = Math.floor(new Date().getTime() / 1000);
var timestamp = ts.toString();

var accessor = {
    "consumerSecret": consumerSecret,
    "tokenSecret": tokenSecret
};

var params = {
    "status": twitterStatus,
    "oauth_consumer_key": oauth_consumer_key,
    "oauth_nonce": nonce,
    "oauth_signature_method": "HMAC-SHA1",
    "oauth_timestamp": timestamp,
    "oauth_token": oauth_token,
    "oauth_version": "1.0"
};
var message = {
    "method": "POST",
    "action": urlLink,
    "parameters": params
};

//lets create signature
oauth.SignatureMethod.sign(message, accessor);
var normPar = oauth.SignatureMethod.normalizeParameters(message.parameters);
var baseString = oauth.SignatureMethod.getBaseString(message);
var sig = oauth.getParameter(message.parameters, "oauth_signature") + "=";
var encodedSig = oauth.percentEncode(sig); //finally you got oauth signature

$.ajax({
    url: urlLink,
    type: 'POST',
    data: {
        "status": twitterStatus
    },
    beforeSend: function(xhr){
        xhr.setRequestHeader("Authorization",'OAuth oauth_consumer_key="'+oauth_consumer_key+'",oauth_signature_method="HMAC-SHA1",oauth_timestamp="' + timestamp + '",oauth_nonce="' + nonce + '",oauth_version="1.0",oauth_token="'+oauth_token+'",oauth_signature="' + encodedSig + '"');  
   },
   success: function(data) { 
        alert("Tweeted!"); 
   },
   error:function(exception){
       alert("Exeption:"+exception);
    }
  });

【讨论】：