Yelp API 和 AngularJS
Posted
技术标签:
【中文标题】Yelp API 和 AngularJS【英文标题】：Yelp API and AngularJS 【发布时间】：2014-07-06 03:29:14 【问题描述】：我正在尝试使用 AngularJS 调用 Yelp API，但遇到了麻烦。我不断收到 400 错误请求，我不知道为什么。
Yelp API 文档：
http://www.yelp.com/developers/documentation/v2/authentication http://www.yelp.com/developers/documentation/v2/search_api
包含 Yelp API 生成的密钥的页面：
http://gyazo.com/fa918329eb0cde18a5db242d1d0b0b0e
这是我调用的代码的 sn-p：
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);
);
【问题讨论】：
【参考方案1】：Yelp API 返回您可以在响应正文中找到的非常丰富的错误消息。我已经完成了 3 个步骤来使请求生效：
将“hmac-sha1”更改为“HMAC-SHA1”。文档说 hmac-sha1 但它是错误的。
oauth_signature 与 Token Secret 不同。您需要分别为每个请求生成 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>【讨论】：
我不得不将 oauthSignature 东西移到后端以避免暴露消费者和令牌的秘密，但这是本地测试和原型设计的一个有用的起点。谢谢！以上是关于Yelp API 和 AngularJS的主要内容，如果未能解决你的问题，请参考以下文章