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);
}
}
});
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>来源：https://stackoverflow.com/questions/23716264/yelp-api-and-angularjs