Awesome Login: a complete authentication system - Part I

This is the first blog post from the Awesome Coder. The main goal of this blog is to give to beginners or experienced coders free, complete and amazing source codes for some cool applications. These apps are usually hard to find in just one very place. Often you have to dig into several different sites and tutorials, getting involved in some unhealthy and messy discussions on the web and still get disappointed with broken, non-functional or even incomplete solutions. TheAwesomeCoder is the place where you won't need to go through it anymore; here, you will get the complete solution without much troubling.

And I'd like begin with something that kept me up for a few nights: a complete authentication system that enables sign in from various social websites, namely Facebook, Twitter, LinkedIn, Windows Live, Google, Yahoo and any other OpenID provider. I've run into many serious troubles before getting it done. As for most disgusting problem, I've found the solution for it (get this) in a Japanese website after days of searching on the web. The solution seemed to be buried out there pretzeled into a bunch of strange characters. That was a sign that I should write a blog post and share with all of you what I've learnt. =)

This post is the part one of a series of tutorials explaining the integration with each one of the mentioned social sites. All the source codes will be provided as well as any other reference. So you'll be able to get up and running such an authentication system in your own website, blog, or whatever.

In this first post I'll give you an overview of what we'll be getting at the end of the tutorial series: a login system that let users sign in using existing external accounts. This is a pretty cool feature, since annoying registration process shouldn't be required for new users of your website. Basically, the overall workflow of the system shall be as follows:

1 - A new user visits your website for the first time;

2 - The user tries to access some restricted page or feature and thus is asked for signing in;

3 – Luckily your website is cool and will provide an option to signing in through an existing account;

4 - Then the user chooses his favorite social website out of several options;

5 - The user is redirected to the chosen social website's authentication page;

6 - He safely enters his private login information;

7 - After successfully signing in, the user is redirected back to the your website.

8 – The user is welcomed, authenticated, and ready to continue surfing in the restricted page.

Our login page should look like this:

That's basically what we'll be designing in this series of tutorials. Each part will cover a particular social website authentication. In the next post we'll be doing some amazing coding. =) I'm gonna show you how implement an authentication system using an OpenId provider, like Google and Yahoo. Check out the next post.

Hopefully that will be useful. ;)

Like what you've read? Wish to support this project?