PDA

View Full Version : INVALID_SIGNATURE error received (Sencha v1.1.1 integration with Yelp API v2)



cpremkumar
11 Jan 2012, 7:32 AM
Hi,
I'm trying to use Yelp's v2 API to retrieve restaurant list. I'm using
Sencha Touch framework (v1.1.1) for my application. I framed the
request following OAuth spec and unfortunately I'm receiving [Status
Code: 400 Bad Request] "Failed to load resource: the server responded
with a status of 400 (Bad Request)" in the web inspector console
always.

If I try to copy the HTTP header from the web inspector in the URL bar
of the browser I see the following error text,
"error":{"text":"Signature was
invalid","id":"INVALID_SIGNATURE","description":"Invalid signature.

My HTTP request looks like this,

http://api.yelp.com/v2/search

?term=food
&location=San%2BFrancisco
&limit=10
&oauth_consumer_key=xYecRreSCxjDnMvP9-9qSA
&oauth_consumer_secret=VVoHynmtMvq7jGt-5mlWnsNX8_Y
&oauth_token=jO_mAPvvUCAXpNjZxGgol8zqbSn2Qzxf
&oauth_signature_method=HMAC-SHA1&oauth_timestamp=1326285181
&oauth_nonce=ScZ2lK
&oauth_signature=busnIaes014egcxblO11OxZoge8%3D
&callback=stcCallback1001

Could someone help me to resolve this issue?

Thanks,
Prem

cpremkumar
11 Jan 2012, 7:39 AM
Hi,
I've some additional information. In the above HTTP request there is a
parameter appended in the last "&callback=stcCallback1001". This is
automatically appended to the request URL by the Sencha Touch JS
framework.

I removed the last parameter "&callback=stcCallback1001" from the HTTP
request and tried copying the remaining content in the URL bar, I was
able to see the response from Yelp server getting printed.

Here is the URL after removing the "&callback=stcCallback1001"
parameter,

http://api.yelp.com/v2/search (http://www.google.com/url?sa=D&q=http://api.yelp.com/v2/search&usg=AFQjCNGAAhR0t6YD790l7rfoa-WK9wBGbw)

?term=food
&location=San%2BFrancisco
&limit=10
&oauth_consumer_key=xxxxxxxxxxxxxxxxxxxxx
&oauth_consumer_secret=xxxxxxxxxxxxxxxxxxxxx
&oauth_token=xxxxxxxxxxxxxxxxxxxxxxxxxxx
&oauth_signature_method=HMAC-SHA1
&oauth_timestamp=1326285181&oauth_nonce=ScZ2lK
&oauth_signature=busnIaes014egcxblO11OxZoge8%3D

I'm using Ext.data.store.load() method where in I've written a callback function. This callback function is supposed to be fired on successful response from the server. I need to have a callback function where I can do my further operations in my app.

Here is the code that I'm using to build request and load the store,


'loadYelpData': function(options) {
console.log('inside controller loadYelpData');
mapObject = options.data;
var auth = {
//
// Update with your auth tokens.
//
consumerKey : "xxxxxxxxxxxxxxxxxxxxxxx",
consumerSecret : "xxxxxxxxxxxxxxxxxxxxx",
accessToken : "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
// This example is a proof of concept, for how to use the Yelp v2 API with javascript.
// You wouldn't actually want to expose your access token secret like this in a real application.
accessTokenSecret : "xxxxxxxxxxxxxxxxxxxxxx",
serviceProvider : {
signatureMethod : "HMAC-SHA1"
}
};

var terms = 'food';
var near = 'San+Francisco';

var accessor = {
consumerSecret : auth.consumerSecret,
tokenSecret : auth.accessTokenSecret
};

parameters = [];
parameters.push(['term', terms]);
parameters.push(['location', near]);
parameters.push(['limit', 10]);
parameters.push(['oauth_consumer_key', auth.consumerKey]);
parameters.push(['oauth_consumer_secret', auth.consumerSecret]);
parameters.push(['oauth_token', auth.accessToken]);
parameters.push(['oauth_signature_method', auth.serviceProvider.signatureMethod]);

var message = {
'action' : 'http://api.yelp.com/v2/search',
'method' : 'GET',
'parameters' : parameters
};

OAuth.setTimestampAndNonce(message);
OAuth.SignatureMethod.sign(message, accessor);

var parameterMap = OAuth.getParameterMap(message.parameters);
console.log(parameterMap);

var request = new Ext.data.Request({
url: message.action,
method: message.method,
params: parameterMap
});
mapsApp.stores.yelpStore.getProxy().limitParam = undefined;
mapsApp.stores.yelpStore.getProxy().noCache = false;
var url = mapsApp.stores.yelpStore.getProxy().buildUrl(request);
mapsApp.stores.yelpStore.getProxy().url = url;
console.log(mapsApp.stores.yelpStore.getProxy().url);
mapsApp.stores.yelpStore.load({
scope: this,
callback: function(records, operation, success) {
console.log(records);
mapsApp.views.mapView.refreshMap(mapObject);
}
});



Could someone help me resolving this issue? Am I going somewhere wrong?

Thanks in advance,
Prem

cpremkumar
11 Jan 2012, 9:09 PM
This is the reply I received from Yelp support,

"Every query param in the request URL must be processed as part of the signature. Appending the callback param after the oauth_signature has
already been generated will result in the INVALID_SIGNATURE error
you're seeing, so you'll need to handle this."

Now, I'm not sure how to avoid the "callback" parameter getting added to the end of the HTTP request URL.

As I'm using the Ext.data.store.load() API, it is adding "&callback=stcCallback1001" automatically to the end of the HTTP request URL.

Is there someway I can get rid of this and get the callback parameter added before the 'oauth_xxx' parameters?

Thanks in advance,
Prem