Menu
I'm trying to call the Yelp API using AngularJS, but I'm having trouble. I keep getting a 400 bad request and I don't know why.
Yelp API documentation:
http://www.yelp.com/developers/documentation/v2/authentication http://www.yelp.com/developers/documentation/v2/search_api
Page containing Yelp API generated keys:
http://gyazo.com/fa918329eb0cde18a5db242d1d0b0b0e
This is the snippet of my code doing the call:
function randomString(length, chars) {
var result = '';
for (var i = length; i > 0; --i) result += chars[Math.round(Math.random() * (chars.length - 1))];
return result;
}
app.factory("MyYelpAPI", function($http) {
return {
"retrieveYelp": function(name, callback) {
$http.jsonp("http://api.yelp.com/v2/search?term=food&location=San+Francisco&callback=JSON_CALLBACK",
{
params: {
oauth_consumer_key: /* Consumer Key */,
oauth_token: /* Token */,
oauth_signature_method: "hmac-sha1",
oauth_signature: /* Token Secret */,
oauth_timestamp: new Date().getTime(),
oauth_nonce: randomString(32, '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ')
}
}
).success(callback);
}
}
});
535
Yelp's API, also known as Yelp Fusion, is broken into three distinct categories of data types – business, events, and categories. Each associated API returns a response body based on the given parameters. To use Yelp's API, you will need to create a new app through the developers portal.
API, which is short for Application Program Interface, is a way for two pieces of software to “talk” with each other. With Yelp APIs, developers can integrate important data points from Yelp listings and show them in their own custom apps or websites. This includes things like a business's ratings, price, or category.
The Yelp Fusion API allows you to get the best local content and user reviews from millions of businesses across 32 countries. This tutorial provides an overview of the capabilities our suite of APIs offer, provides instructions for how to authenticate API calls, and walks through a simple scenario using the API.
Yelp API returns very informative error message you can find in response body. I have made 3 steps to make request work:
Changed "hmac-sha1" to "HMAC-SHA1". Documentation says hmac-sha1 but it's wrong.
oauth_signature is not the same as Token Secret. You need to generate oauth_signature for each request separately. I used this library https://github.com/bettiolo/oauth-signature-js
AngularJS sends hardcoded callback parameter to server so we need to hardcode it in parameters list too. Otherwise our signature is incorrect.
My code:
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js"></script>
<script src="https://raw.githubusercontent.com/bettiolo/oauth-signature-js/master/dist/oauth-signature.min.js"></script>
</head>
<body ng-app="plunker">
<div ng-controller="MainCtrl">
<p><date-input name="info.name" message="info.message"></date-input></p>
<ul>
<li data-ng-repeat="business in businesses">
{{business.name}}
</li>
</ul>
</div>
<script>
function randomString(length, chars) {
var result = '';
for (var i = length; i > 0; --i) result += chars[Math.round(Math.random() * (chars.length - 1))];
return result;
}
var app = angular.module('plunker', []);
app.controller('MainCtrl', ['$scope', 'MyYelpAPI', function($scope, MyYelpAPI) {
$scope.businesses = [];
MyYelpAPI.retrieveYelp('', function(data) {
$scope.businesses = data.businesses;
});
}]).factory("MyYelpAPI", function($http) {
return {
"retrieveYelp": function(name, callback) {
var method = 'GET';
var url = 'http://api.yelp.com/v2/search';
var params = {
callback: 'angular.callbacks._0',
location: 'San+Francisc',
oauth_consumer_key: '', //Consumer Key
oauth_token: '', //Token
oauth_signature_method: "HMAC-SHA1",
oauth_timestamp: new Date().getTime(),
oauth_nonce: randomString(32, '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'),
term: 'food'
};
var consumerSecret = ''; //Consumer Secret
var tokenSecret = ''; //Token Secret
var signature = oauthSignature.generate(method, url, params, consumerSecret, tokenSecret, { encodeSignature: false});
params['oauth_signature'] = signature;
$http.jsonp(url, {params: params}).success(callback);
}
}
});
</script>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
