Yelp API和AngularJS

一尘不染

Yelp API和AngularJS

angularjs

我正在尝试使用AngularJS调用Yelp API，但遇到了麻烦。我不断收到400个错误的请求，我也不知道为什么。

Yelp API文档：

http://www.yelp.com/developers/documentation/v2/验证
 http://www.yelp.com/developers/documentation/v2/search_api

包含Yelp API生成的键的页面：

http://gyazo.com/fa918329eb0cde18a5db242d1d0b0b0e

这是我的代码的摘录：

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

阅读 220

2020-07-04

共1个答案

一尘不染

Yelp API返回非常有用的错误消息，您可以在响应正文中找到。我已通过3个步骤使请求生效：

将“ hmac-sha1”更改为“ HMAC-SHA1”。文档说hmac-sha1，但这是错误的。
oauth_signature与令牌密钥不同。您需要分别为每个请求生成oauth_signature。我使用了这个库 https://github.com/bettiolo/oauth-signature-js
AngularJS将硬编码的回调参数发送到服务器，因此我们也需要在参数列表中对其进行硬编码。否则我们的签名不正确。

我的代码：

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

2020-07-04