Yelp API and AngularJS

Question

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);
    }
}
});

score 7 · Accepted Answer · answered Oct 01 '14 at 23:02

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>

I had to move the oauthSignature stuff to the backend to avoid exposing consumer and token secrets, but this was a helpful starting point for local testing and prototyping. Thanks! — Alex M, May 17 '15 at 14:12

Yelp API and AngularJS

1 Answers1

Linked