Yelp API 和 AngularJS [英] Yelp API and AngularJS
问题描述
我正在尝试使用 AngularJS 调用 Yelp API，但遇到了问题.我不断收到 400 错误的请求，但我不知道为什么.
Yelp API 文档:
http://www.yelp.com/developers/documentation/v2/authenticationhttp://www.yelp.com/developers/documentation/v2/search_api
包含 Yelp API 生成密钥的页面:
http://gyazo.com/fa918329eb0cde18a5db242d1d0b0b0e
这是我调用的代码片段:
function randomString(length, chars) {var 结果 = '';for (var i = length; i > 0; --i) result += chars[Math.round(Math.random() * (chars.length - 1))];返回结果；}app.factory("MyYelpAPI", function($http) {返回 {retrieveYelp":函数(名称，回调){$http.jsonp("http://api.yelp.com/v2/search?term=food&location=San+Francisco&callback=JSON_CALLBACK",{参数:{oauth_consumer_key:/* 消费者密钥 */,oauth_token:/* 令牌 */,oauth_signature_method: "hmac-sha1",oauth_signature:/* 令牌秘密 */,oauth_timestamp: 新日期().getTime(),oauth_nonce: randomString(32, '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ')}}).成功(回调)；}}});Yelp API 返回非常有用的错误消息，您可以在响应正文中找到.我已经做了 3 个步骤来使请求工作:
将hmac-sha1"更改为HMAC-SHA1".文档说 hmac-sha1 但它是错误的.
oauth_signature 与 Token Secret 不同.您需要为每个请求分别生成 oauth_signature.我使用了这个库 https://github.com/bettiolo/oauth-signature-js
AngularJS 将硬编码的回调参数发送到服务器，因此我们也需要在参数列表中对其进行硬编码.否则我们的签名是不正确的.
我的代码:
<头><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><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 business">{{business.name}}<脚本>函数随机字符串(长度，字符){var 结果 = '';for (var i = length; i > 0; --i) result += chars[Math.round(Math.random() * (chars.length - 1))];返回结果；}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) {返回 {retrieveYelp":函数(名称，回调){var 方法 = 'GET';var url = 'http://api.yelp.com/v2/search';变量参数 = {回调:'angular.callbacks._0'，位置:'San+Francisc',oauth_consumer_key: '',//消费者密钥oauth_token: '',//令牌oauth_signature_method: "HMAC-SHA1",oauth_timestamp: 新日期().getTime(),oauth_nonce: randomString(32, '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'),术语:'食物'};var 消费者秘密 = '';//消费者秘密var tokenSecret = '';//令牌秘密var 签名 = oauthSignature.generate(method, url, params, consumerSecret, tokenSecret, { encodeSignature: false});params['oauth_signature'] = 签名；$http.jsonp(url, {params: params}).success(callback);}}});</html>
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>
这篇关于Yelp API 和 AngularJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
