Yelp的API和AngularJS [英] Yelp API and AngularJS
问题描述
我想打电话给使用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
这是我的code的做呼叫的片段：
函数randomString（长度，字符）{
VAR的结果='';
为（变量I =长度;我大于0; --i）结果+ =字符[Math.round（的Math.random（）*（chars.length - 1））];
返回结果;
}app.factory（MyYelpAPI功能（$ HTTP）{
返回{
retrieveYelp：函数（名称，回调）{
$http.jsonp(\"http://api.yelp.com/v2/search?term=food&location=San+Francisco&callback=JSON_CALLBACK\",
{
params：一个{
oauth_consumer_key：/ *主要消费品* /
组oauth_token：/ *令牌* /
oauth_signature_method：HMAC-SHA1
oauth_signature：/ *令牌密钥* /
oauth_timestamp：新的Date（）的getTime（）。
oauth_nonce：randomString（32，'0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'）
}
}
）.success（回调）;
}
}
}）;
Yelp的API返回您可以在响应体内找到非常丰富的错误消息。我做了3步，让工作要求：
-
更改HMAC-SHA1到HMAC-SHA1。文件说，HMAC-SHA-1，但它是错误的。
-
oauth_signature是不一样的令牌秘密。您需要单独为每个请求oauth_signature。我用这个库 https://github.com/bettiolo/oauth-signature-js
-
AngularJS发送硬codeD回调参数到服务器，所以我们需要硬code它的参数列表了。否则，我们的签名不正确。
我的code：
＆LT;！DOCTYPE HTML＆GT;\r
＆LT; HTML和GT;\r
＆LT; HEAD＆GT;\r
＆所述; SCRIPT SRC =https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js＆GT;＆下; /脚本＆GT;\r
＆LT;脚本src=\"https://raw.githubusercontent.com/bettiolo/oauth-signature-js/master/dist/oauth-signature.min.js\"></script>\r
＆LT; /头＆GT;\r
＆LT;机身NG-应用=plunker＆GT;\r
＆LT; DIV NG控制器=MainCtrl＆GT;\r
＆所述p为H.;＆下;日期输入名称=info.name消息=info.message＆GT;＆下; /日期输入＆GT;＆下; / P＆GT;\r
＆LT; UL＆GT;\r
＆LT;李数据-NG-重复=业务的企业＆GT;\r
{{business.name}}\r
＆LT; /李＆GT;\r
＆LT; / UL＆GT;\r
＆LT; / DIV＆GT;\r
＆LT;脚本＆GT;\r
功能randomString（长度，字符）{\r
VAR的结果='';\r
为（变量I =长度;我大于0; --i）结果+ =字符[Math.round（的Math.random（）*（chars.length - 1））];\r
返回结果;\r
}\r
\r
VAR应用= angular.module（'plunker'，[]）;\r
app.controller（'MainCtrl'，['$范围，MyYelpAPI'，函数（$范围，MyYelpAPI）{\r
$ scope.businesses = [];\r
MyYelpAPI.retrieveYelp（''，函数（数据）{\r
$ scope.businesses = data.businesses;\r
\r
}）;\r
\r
}]）。工厂（MyYelpAPI功能（$ HTTP）{\r
返回{\r
retrieveYelp：函数（名称，回调）{\r
VaR方法=GET;\r
VAR URL ='http://api.yelp.com/v2/search';\r
VAR PARAMS = {\r
回调：angular.callbacks._0'，\r
位置：圣+ Francisc，\r
oauth_consumer_key：''，//消费重点\r
组oauth_token：''，//令牌\r
oauth_signature_method：HMAC-SHA1\r
oauth_timestamp：新的Date（）的getTime（）。\r
oauth_nonce：randomString（32，'0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'），\r
长期：食物\r
};\r
VAR consumerSecret =''; //消费者揭秘\r
VAR tokenSecret =''; //令牌密钥\r
VAR签名= oauthSignature.generate（方法，URL，参数，可以consumerSecret，tokenSecret，{EN codeSignature：假}）;\r
PARAMS ['oauth_signature'] =签名;\r
。$ http.jsonp（URL，{params：一个PARAMS}）成功（回调）;\r
}\r
}\r
}）;\r
＆LT; / SCRIPT＆GT;\r
＆LT; /身体GT;\r
＆LT; / HTML＆GT; \r
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屋！
