19 Mar 2013

Random notes on SkyDrive Picker API

I have spent the last couple of days integrating Dropbox, Google Drive and SkyDrive to Prowork. Of the three, I must say Dropbox has the most "charming" file picking API. Simple, straight, works. I guess this has to do with the simplicity of the service because really GDrive and SkyDrive are more complex products. But that's just that about that. Unlike Dropbox where all you need is in a single page, you have to jump through pages to get the full picture of how to fix everything together for Sky Drive. Here are notes on how to get it with.

Note that this is a simple file picker architecture. There are many stunts you can pull with the Sky Drive API. And in many languages too. What we are however trying to do is to let users add their files from the service. We simply link to the file. We don't download and store. The language of use is Javascript.

That said...

Include the js library
I am surprised the examples on the picker api page did not mention including the js library. If you just go ahead and do copy and paste, it won't work. You have to include the js library to start with. See Using the JavaScript library (Live Connect) for more.
```
<script src="http://js.live.net/v5.0/wl.js"></script>
```

WL.init()
You have to initialize the javascript library. This is missing from the picker page documentation too.

<script>
	WL.init({ 
		client_id: YOUR_CLIENT_ID, 
		redirect_uri: YOUR_REDIRECT_URL	
	});
</script>

Client ID, redirect url and localhost
Where is my CLIENT_ID and REDIRECT_URL? If you are familiar with APIs you will know what these are already. You won't however find a link to where you can get/set these parameters in the WL.init() doc page. You can do this from "My Apps". Where it however gets interesting is that you can't add localhost as your redirect url. "...you must map your domain to the Internet Protocol (IP) address of your local web server" [source] by editing some file somewhere in the System32 folder. I didn't do that though. (I hate things like that). I pushed up a test file and tested live on the server.
Callback
And when I thought everything was set, something else happened. When I click the SkyDrive button, a popup opens, everything works, then I pick a file then the popup itself redirects to Prowork (I actually set the redirect url to http://prowork.me) instead of closing and calling the callback function in my code. Turns out I have to create a seperate callback file for my redirect url. It is nothing big. This is all it needs to contain.
```
<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <script src="http://js.live.net/v5.0/wl.js"></script>
    </body>
</html>
```
I saved that as callback.htm and edited my redirect url
```
WL.init({
	client_id: MY_CLIENT_ID, 
	redirect_uri: "http://prowork.me/callback.htm"
});
```
And that's all.

I hope this saves someone some time. By the way, the three services are live on Prowork already. Take some time to check them out.

My name is Opeyemi Obembe. I build things for web and mobile and write about my experiments. Follow me on Twitter—@kehers.