CODEWITHSUNDEEP
angularjsapitwitteroauth-2.0firebase
NSCoder
NSCoder

Reputation: 1668

Angular JS and Twitter API, how can we hook them up

I've been trying to connect AngularJS and Twitter API. It all started with following the instructions on John Lindquist's video on AngularJS twitter search. Which is basically the following code

var app = angular.module("MyApp", ["ngResource"]);

function MyCtrl($scope, $resource) {
  var TwitterAPI = $resource("http://search.twitter.com/search.json",
    { callback: "JSON_CALLBACK" },
    { get: { method: "JSONP" }});

  $scope.search = function() {
    $scope.searchResult = TwitterAPI.get({ q: $scope.searchTerm });
  };
}

But the problem is, this generates a 401 Unauthorized. A few searches on google revealed that Twitter had changed its API since this tutorial had been posted. I found another article on using OAuth2 with AngularJS to access Twitter. Which has the following

var consumerKey = encodeURIComponent('<your consumer key>')
var consumerSecret = encodeURIComponent('<your consumer secret>');
var credentials = Base64.encode(consumerKey + ':' + consumerSecret);

// Twitters OAuth service endpoint
var twitterOauthEndpoint = $http.post(
  'https://api.twitter.com/oauth2/token'
  , "grant_type=client_credentials"
  , {headers: {'Authorization': 'Basic ' + credentials, 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'}}
);

However this also ended up with the following error on the console

> OPTIONS https://api.twitter.com/oauth2/token 405 (Method Not Allowed) 
> XMLHttpRequest cannot load https://api.twitter.com/oauth2/token. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:3000' is therefore not allowed access.

I've gone this far, but don't know what to do next to get search results using $resource from twitter. Don't know if this helps, but I'm also using Firebase.

Upvotes: 2

Views: 10971

Answers (4)

Cody Jacques
Cody Jacques

Reputation: 524

This blogpost works. http://www.sitepoint.com/building-twitter-app-using-angularjs/

Basically, you can't just query the twitter search API. You need to go to https://apps.twitter.com/ to set up an app to be able to communicate with the API, and then you need to use oauth as well (I personally created an account with oauth.io).

It's all in the blogpost.

After the basic stuff I would recommend reading the twitter api docs: https://dev.twitter.com/rest/public

I know your post is old, but there was no accepted answer, so hopefully this helps :)

Upvotes: 0

Mohammad Adnan
Mohammad Adnan

Reputation: 6627

The twitter no more supports the way blog explained to query. Twitter changed it's API and now you need to authenticate/authorize for every such request. There is working example present here

https://blog.twitter.com/2014/rendering-tweets-with-angularjs-and-nodejs

This will require your app and secret keys and access and secret keys. this will allow you to fetch results. I hope this will help. There is good information about this is available here also

https://beautifulbytes.wordpress.com/2013/06/18/oauth2-with-angularjs-to-access-twitter/

Upvotes: 0

Philipp Gayret
Philipp Gayret

Reputation: 5060

XMLHttpRequest cannot load https://api.twitter.com/oauth2/token.
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://127.0.0.1:3000' is therefore not allowed access.

This means that from http://127.0.0.1:3000 your browser will not allow JavaScript to get results from the HTTP call. Futher No 'Access-Control-Allow-Origin' header is present indicates that this goes for every domain you could call from ( Except api.twitter.com ).

Reading through the OAuth API documentation I haven't been able to find anything else than people asking how to perform CORS requests and that they're unable to call the API from the browser. All JavaScript Twitter libraries are NodeJS, which is server side.

GabrielG also makes a point that the call is returning an https://api.twitter.com/oauth2/token 405 (Method Not Allowed) which means that the browser cannot do a lookup of wheter it's allowed to do a POST, it does this with the OPTIONS method. This does not mean that you shouldn't be using POST

Upvotes: 1

GabrielG
GabrielG

Reputation: 454

You might be getting this error because you are trying to do a POST request, instead of a GET request:

    var twitterOauthEndpoint = $http.get(
  'https://api.twitter.com/oauth2/token'
  , "grant_type=client_credentials"
  , {headers: {'Authorization': 'Basic ' + credentials, 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'}}
);

In general, whenever you get 405, it's because you are using the wrong method, just like the error mentions.

Checkout ng-twitter by darul75, it looks like it does what you need, and if not, it can be a good source to read :) Here's the demo page.

Edit: I ignored the second console error. If you are running your app directly from a file, try switching to a local server (or even dropbox's public folder).

Upvotes: 1

Related Questions