CODEWITHSUNDEEP
angularjshttptwitteroauthtwitter-oauth
jDelforge
jDelforge

Reputation: 126

Simple method to retrieve Twitter User Timeline with $http

I need to access a twitter usertimeline with angular...

All keys are correct, it is working with php/curl, but i cannot manage to make it work within angular. I am using oauth-signature-js, then a $http request. I want to keep it as simple as possible.

The ng-controller :

app.controller('twitterController', function($scope, $http){

  // VARIABLES

    var screen_name = 'grapax_be';
    var count = 1;
    var consumer_key                = 'xxxxxxxxxxxxxxxxxxxxxxxxx';
    var consumer_secret             = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
    var oauth_access_token          = 'xxxxxxxxxx-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
    var oauth_access_token_secret   = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
    var oauth_timestamp             = Math.round((new Date()).getTime() / 1000.0);
    var oauth_nonce                 = oauth_timestamp;
    var oauth_signature_method      = 'HMAC-SHA1';
    var oauth_version               = '1.0'


  // GENERATE OAUTH SIGNATURE

    var httpMethod = 'GET';
    var url        = 'https://api.twitter.com/1.1/statuses/user_timeline.json';
    var parameters = {
      oauth_consumer_key : consumer_key,
      oauth_token : oauth_access_token,
      oauth_nonce : oauth_nonce,
      oauth_timestamp : oauth_timestamp,
      oauth_signature_method : oauth_signature_method,
      oauth_version : oauth_version,
    };
    var oauth_signature = oauthSignature.generate(httpMethod, url, parameters, consumer_secret, oauth_access_token_secret, { encodeSignature: true });


  // HTTP REQUEST

    var authorization_string = "OAuth " 
            + 'oauth_consumer_key="' + consumer_key + '", '
            + 'oauth_nonce="' + oauth_nonce + '", '
            + 'oauth_signature="' + oauth_signature + '", '
            + 'oauth_signature_method="' + oauth_signature_method + '", '
            + 'oauth_timestamp="' + oauth_timestamp + '", '
            + 'oauth_token="' + oauth_access_token + '", '
            + 'oauth_version="' + oauth_version + '"';

    $http.jsonp('https://api.twitter.com/1.1/statuses/user_timeline.json', {
        headers: {'Authorization': authorization_string},
        params:{
            count: count,
            screen_name: screen_name
        }
      }).success(function(res){ console.log('res:', res) });

});

This is still giving me a error 400.

Here is plunker

Any tips, questions, remarks, are welcome.... Thank you!

Johan

Upvotes: 0

Views: 355

Answers (2)

jDelforge
jDelforge

Reputation: 126

Own further answer:

  1. Headers cannot be set in jsonp request.
  2. Using Apache/WP at server side, it was just better to stick with a php/cURL request, and calling it with a simple $http.get() for Angular integration.

By the way this PHP/cURL method is working great : http://iag.me/socialmedia/build-your-first-twitter-app-using-php-in-8-easy-steps/

Upvotes: 1

Vaibhav
Vaibhav

Reputation: 569

Headers cannot be set in jsonp request. One solution can be to implement this using http client on server rather than the browser.

Upvotes: 1

Related Questions