All geek questions in one place

Yelp API and AngularJS

I am trying to call the Yelp API using AngularJS, but I am having problems. I keep getting 400 bad requests 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 the generated Yelp API keys:

http://gyazo.com/fa918329eb0cde18a5db242d1d0b0b0e

This is the code snippet making 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); } } });
+6
source share
1 answer

The Yelp API returns a very informative error message, which you can find in the body of the response. I took 3 steps to complete the request:

  • Changed "hmac-sha1" to "HMAC-SHA1". The documentation says hmac-sha1, but that is wrong.

  • oauth_signature is not the same as Token Secret. You must generate oauth_signature for each request separately. I used this library https://github.com/bettiolo/oauth-signature-js

  • AngularJS sends a hard-coded callback parameter to the server, so we also need to copy it to the parameter list. Otherwise, our signature is incorrect.

My code is:

 <!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>
+7
source

Source: https://habr.com/ru/post/969444/

More articles:


All Articles