Great OAuth tutorials for HTML5 applications

by Saulius   |   last updated March 7, 2015   |   Javascript Tutorials · OAuth · Web Tutorials ·

Applications we build are more and more dependent on 3rd party data sources. And as Internet of things continues to grow, this fact becomes even more stronger.

It allows us to create great experiences for the app end users by presenting them data gathered from across the Internets. But at the same time we have to spend more time ensuring that our applications are consuming all this data securely and they only get access to the data they need. OAuth protocol was designed and developed for this exact reason.

While I was doing research on the best OAuth practices for HTML5 applications I came across several great online posts and tutorials which I want to share with HTMLCenter readers. I’m sure this will help someone who is looking to take greater control of OAuth authorization flow happening in HTML5 apps.

Let us know if we missed any good tutorials on this subject.

OAuth and JavaScript

JavaScript tutorial for creating authorisation flow with the most used social cloud services: Facebook, Google and Twitter. This tutorial covers the actual code you will need for creating JavaScript OAuth flow and what are the main differences between these 3 most popular social identity providers (once it comes to OAuth). All source code is also provided as a dowloadable file.

Flickr, OAuth and App Garden

Flickr is very well known online community for photographers. As well as hosting millions of great photo images this site has exposed several API resources for 3rd party applications to consume.

Majority of these API’s do require authorisation and its achieved by implementing OAuth flow. Flickr supports OAuth flows for Web, mobile and desktop apps and their team has created several tutorials on how to implement such authorisation flows. This tutorial is about OAuth 1.1 protocol.

Vimeo API and OAuth

Vimeo is another great online community. They are all about high quality videos. In order to allow programmable access to the user groups, videos, channels and albums Vimeo has several advanced API’s. They are implementing OAuth 1.0 protocol for authorization and this guide / tutorial covers the example flow as well as several libraries Vimeo tech team created for this purpose.

OAuth.io and multiple authorizations

OAuth.io is a bit different from others in this list.

Its a background API service which handles all the complexity of OAuth authorisations on behalf of client apps and exposes very simple JavaScript API for applications to use.

The OAuth tutorial they created goes through JavaScript APIs for integrating multiple cloud services at once. OAuth.io guys have also created a PhoneGap plugin and open sourced the core engine which drives their project as oauthd.

OAuth with PhoneGap applications

PhoneGap is a very popular hybrid framework for mobile developers. It allows to create HTML5 apps and then wrap them up in to the native mobile applications.

Of course many such mobile applications use OAuth protocol to consume cloud services and this tutorial covers OAuth authorization how to while working with PhoneGap framework. It goes through example Google API integration.

OAuth Sign-in with Kinvey

Kinvey is the backend as service cloud platform. Variety of mobile apps are using it for storing data, push notifications and analytics. If you are planning on using this platform for your mobile applications and it happens to be HTML5 apps, folks at Kinvey have created a very informative tutorial on how to implement this. Tutorial covers the concept of HTML5 and OAuth working together.

Usergrid and HTML5 OAuth

Usergrid is an open source data platform for mobile applications. Its being incubated by Apache foundation and is gaining the traction among mobile app developers as cloud based backend solution.

Apigee, the company behind Usergrid published good few tutorials related to the OAuth authorization flow for consuming resources exposed by Usergrid. This one is for applications powered by HTML5 and jQuery.

HTML5 local storage for OAuth tokens

And to finally one short tutorial about using HTML5 local storage API to store OAuth authorization tokens received by applications during the OAuth flow.

One warning though, local storage is useful for storing application data for persistence but security has to be considered as HTML5 local storage is handled by the web browser and can be accessed by other applications which have access to browsers local data.