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

Question

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.

Solution 1

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 :)

Solution 2

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).

Solution 3

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

Comments

[Philipp Gayret]

The demo runs http request against its own domain though ( http://darul-demo.herokuapp.com/search?hashtag=football ) not the twitter API

[Philipp Gayret]

Or as the readme states "So one thing you need to do on your own is the server side.", as the author of the thing also faced CORS issues which is what this question is about

[NSCoder]

@GabrielG ng-twitter is great but I still need the core twitter api as my main concern is searching through twitter users not tweets once I can get OAuth to get me authenticated.

[GabrielG]

Right, my bad.. anyway, you absolutely do not have to run your app under the Twitter domain to use their REST API :)

[GabrielG]

@NSCoder, where are you running your app from? is it form a local server or directly through a file?

[NSCoder]

I'm running a yeoman App using gruntJS.

[GabrielG]

Here's something worth trying - try adding "127.0.0.1" as your app's domain. You will later be able to change it. I have a strong feeling about this

[Cody Jacques]

With the solution in the blogpost, you don't need node.js, which is nice.