We needed to create an integration from our installed application to a 3rd party web service. The integration requires an access token, which is retrieved from the web service during registration. Now, the web service uses OAuth 2 for authentication during the registration process.
This presented a challenge, as their OAuth implementation ultimately calls a redirect URL and includes the access token as a hash. How do we get the access token from web URL back into the installed application?
Our solution had to be dead simple, and work on a wide range of desktop operating systems. We considered a local web stack to accept the redirect URL, but that opens up a whole range of potential support issues with local firewalls and port conflicts.
My solution was to create a simple hosted web page that displayed the access token and made it easy for the end-user to copy it into the clipboard. Then, our installed application can retrieve the access token from the clipboard and store it to the database.
The workflow is as follows:
1. The installed application tells the user they need to register, and says “Click Next once you’ve registered”
2. The installation application opens an OAuth url provided by the web service.
2. The end-user gets a login page for the web service and provides their credentials.
3. The end-user is asked to confirm that they want to grant access to the web service.
4. At this point the web browser is redirected to a URL which includes the access token as a hash, like this
http://redirecturl.com/cc.html#access_token=f18a32c8-9324-492a-b75f-c844e6372831&token_type=Bearer&expires_in=314852901
5. The redirect URL page parses out the access token and displays it on the page with instructions for the end-user. They first type Ctrl-C, which copies it into the clipboard, then click Done, which closes the browser window.
6. They click Next in the installed application which retrieves the access token from the clipboard and we’re done.
This process can be enhanced to store the access token on the web server along with a unique key. Then, the installed application can perform a GET to automatically retrieve it without the end-user needing to copy it.
Here’s the simple web page:
[code lang=”XML”]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Awesome Web Service Integration Page</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var s = window.location.hash;
var o = {};
$.each(s.substr(1).split(‘&’), function (i, elem) {
var parts = elem.split(‘=’);
o[parts[0]] = parts[1];
});
document.getElementById(‘token’).value = o["access_token"];
token.focus();
token.select();
});
</script>
</head>
<body>
<p>
The code below needs to be copied to the Super Duper Application.
</p>
<p>
Simply type Ctrl-C, and then click the Done button to copy the code into the Super Duper Application.
</p>
<input name="token" id="token" value="" size="60" />
<input type="button" id="close" value="Done" onclick="window.open(”, ‘_self’, ”);window.close(); " />
</body>
</html>
[/code]