2-legged OAuth Javascript Function for YQL

Here is a 2-legged OAuth Javascript function that makes it easy to get YQL results into your Javascript application.

First we want to include the oauth javascript libraries obtained from http://oauth.googlecode.com.

<script type="text/javascript" src="http://oauth.googlecode.com/svn/code/javascript/oauth.js"></script>
<script type="text/javascript" src="http://oauth.googlecode.com/svn/code/javascript/sha1.js"></script>

It’s probably best to download those files to your local server, instead of calling them directly from googlecode in this example.

We then want to use function makeSignedRequest to make the signed URL string to query.yahooapis.com so we can get the YQL results.

<script type="text/javascript">
var makeSignedRequest = function(ck,cks,encodedurl) {     
 
	var accessor = { consumerSecret: cks, tokenSecret: ""};          
	var message = { action: encodedurl, method: "GET", parameters: [["oauth_version","1.0"],["oauth_consumer_key",ck]]};
 
	OAuth.setTimestampAndNonce(message);
	OAuth.SignatureMethod.sign(message, accessor);
 
	var parameterMap = OAuth.getParameterMap(message);
	var baseStr = OAuth.decodeForm(OAuth.SignatureMethod.getBaseString(message));           
	var theSig = "";
 
	if (parameterMap.parameters) {
		for (var item in parameterMap.parameters) {
			for (var subitem in parameterMap.parameters[item]) {
				if (parameterMap.parameters[item][subitem] == "oauth_signature") {
					theSig = parameterMap.parameters[item][1];                    
					break;                      
				}
			}
		}
	}
 
	var paramList = baseStr[2][0].split("&");
	paramList.push("oauth_signature="+ encodeURIComponent(theSig));
	paramList.sort(function(a,b) {
		if (a[0] < b[0]) return -1;
		if (a[0] > b[0]) return 1;
		if (a[1] < b[1]) return  -1;
		if (a[1] > b[1]) return 1;
		return 0;
	});
 
	var locString = "";
	for (var x in paramList) {
		locString += paramList[x] + "&";                
	}
 
	var finalStr = baseStr[1][0] + "?" + locString.slice(0,locString.length - 1);
 
	return finalStr;
};
</script>

Here is an example of how to call the function.

makeSignedRequest("<API Key HERE>","<Shared Secret HERE>","<YQL URL HERE>");

If you havn’t already created your API key and Shared Secret, you can do so by going here. Use the URL from the YQL console, located in the textarea to the right of where you enter the query.

<script type="text/javascript">
var signedURL = makeSignedRequest("dj0yJmk9Rm1MUU9iWmdNZ2FjJmQ9WVdrOVZWWk9Wa3h5TldFbWNHbzlNVEk0TXpNMk1EYzFPQS0tJnM9Y29uc3VtZXJzZWNyZXQmeD1kMg--","570e2ef3db460b114e6a0a987709a0f6a90b5ec0","http://query.yahooapis.com/v1/yql?q=select%20*%20from%20search.news%20where%20query%3D%22obama%22&format=json&callback=myCallback");
</script>

And it’s easy as that! You then can make cool apps that use dynamic script nodes to bring in the YQL data.

Here is a sample app created with all the ingredients from above.

This entry was posted in yahoo and tagged , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

8 Comments

  1. Mon K
    Posted December 7, 2008 at 10:07 pm | Permalink

    First, thanks.
    To you and Mr. Jonathan. I finally have examples of Oauth using javascript, just to tests ideas simply without the need to do intricate things

  2. Bobby
    Posted December 8, 2008 at 9:09 pm | Permalink

    GOOD JOB!~ this will help a lot!~

  3. Katya
    Posted July 15, 2009 at 5:40 pm | Permalink

    Thanks for posting this. It helped a lot!

  4. Posted August 19, 2009 at 9:04 am | Permalink

    Paul,

    I’ve stolen your code and made it into a little twitter page.

    http://www.infonote.com/yqltweet.htm

    It’s helped me a lot to understand the Oauth requirements, many thanks.

  5. James Wragg
    Posted March 18, 2010 at 9:15 am | Permalink

    Note for anyone looking to use this function: You need to correctly encode the signature, otherwise plus (+) chars are ignored as spaces:
    paramList.push(“oauth_signature=”+encodeURI(theSig));

    **changed code in blog to reflect

  6. James Wragg
    Posted March 18, 2010 at 9:28 am | Permalink

    Actually, make that encodeURIComponent()

    **changed code in blog to reflect

  7. George
    Posted June 30, 2010 at 11:01 am | Permalink

    Hello there,
    That’s a really goog article.

    I have a question on how to use this script to obtain a signed query but retieving the source code of the specified url. I tried changing the query with the appropriate one in the sample app but i can’t find any solution to retrieve the responded source code of the queried.

    Any help on this would really appreciate it!

    Thank you very much

    Regards,
    George

  8. Posted April 20, 2011 at 4:57 pm | Permalink

    This is really the single most excellent OAuth and YQL tutorial I have ever read. I have used it on more than a couple occasions to prove to unbelieving managers or fellow developers that the OAuth authorization flow was possible in pure client-side JavaScript (mind you there’s a need to store some key information publicly).

    As of today though, I noticed it no longer works. This may be related to the fact that OAuth 2.0 requires HTTPS (SSL) support in any libraries for the new request signing and protection process (presumably to disallow storing keys in plain view in the client).

    Do you happen to know if it is possible to ever get this working again, or is the JavaScript OAuth library history, like much of Yahoo!’s original Search and Information Retrieval Web Services?

    If you have any ideas on how to get this working again I would be most grateful, and CHEERS for the initial effort on the OAuth 1.0 version!

One Trackback

  1. By Run YQL from your javascript « Jonathans stuff on October 31, 2008 at 9:48 am

    [...] try things out away from the console and my colleague Paul has created some simple sample code for executing 2-legged oauth queries from javascript that enables you to call YQL functions without needing a server. Its as easy as: var [...]

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*