Accessing Twitter through Javascript

I'm building a web app that uses twitter in the following way:

1) A users can sign in with Twitter (i.e. a user authenticates and authorizes the app) -I get the following piece: "oauth_token_secret=[OAUTH_TOKEN_SECRET_HERE]&oauth_token=[OAUTH_TOKEN_HERE]" which I store to the server.

2) Now I want to access the users data purely on the client side using only javascript (with jQuery). So how do I do it??? I've tried a couple of approaches and I keep missing something, so my question is how should the calls be made? What parameters are needed in the example:

$.getJSON('https://api.twitter.com/1/statuses/home_timeline.json?include_entities=true&[WHAT PARAMETERS SHOLD BE ADDED HERE???]&callback=?', function(data) {
    console.log(data);
    });

You can use count amd max_id query parameters, but you don't need them.

I also don't think you need or want the callback=? part.

The key thing: You need to use those OAUTH items to produce an Authorization header, which you must add to the outbound request. The structure of the header is described in Twitter's developer documentation.

To see what the messages look like, go to: https://apigee.com/console/twitter

Thsi is an example of a valid request:

GET /1/statuses/home_timeline.json HTTP/1.1
Authorization: XXXXXXXXX
Host: api.twitter.com
User-Agent: Mozilla/5.0 (.....)

...where the XXXXXX is the Authorization header, generated according to the oauth 1.0a rules stipulated by Twitter.

It looks like this: (line breaks inserted for readability; this header should be all on one line in the actual request)

OAuth oauth_consumer_key="RR0sePOBbQ8bYdC8r41mg",
  oauth_signature_method="HMAC-SHA1",
  oauth_timestamp="1341705465",
  oauth_nonce="34350",
  oauth_version="1.0",
  oauth_token="5915213-haTzPfWcr6Ci2gdnD8797AfgRs8AICDK8KIStFtx",
  oauth_signature="1hxDP104ZXGMlcblQ05h6vWoJg%3D"

You might want to take advantage of a Javascript OAuth library in order to construct that header, and send the request.

Try searching jsOAuth and Twitter

you can use document.body.style.setproperty('--name', value);:

var bodystyles = window.getcomputedstyle(document.body);
var foobar = bodystyles.getpropertyvalue('--foo-bar'); //get

document.body.style.setproperty('--foo-bar', newvalue);//set

more information here.

i needed to add the following line the first time i execute makerequest:

var authorizationurl = twitterservice.authorize();
logger.log(authorizationurl);

then, open the url read from the log and authorize the app.

after that, all works fine.

i didn't test it but the issue could depend on the context of the ajaxstart/stop anonymous function.

can you try this?

var loading_dialog = $('#loading_dialog');
loading_dialog
    .ajaxstart(function () {
        loading_dialog.modal('show');
    })
    .ajaxstop(function () {
        loading_dialog.modal('hide');
});

either use the javascript twitter api helper at http://sources.disruptive-innovations.com/twitterhelper/tags/latest/twitterhelper.html

or the far easier way is to use the @anywhere api from twitter (http://dev.twitter.com/anywhere/begin)


Tags: Javascript Ajax Twitter