Tuesday, September 13, 2011

Awesome Login: a complete authentication system - Part II: OpenID.

As promised in the first blog post of the Awesome Coder, here coding begins! =)
In this tutorial part I'll show how to implement an authentication system which support sign in from OpenID providers, like Google, Yahoo, MyOpenId.com etc. Hopefully, in the future, more social sites will support OpenID and this approach will be even more interesting.

What's OpenID ?

As the OpeniID website says, OpenID is a safe, faster, and easier way to log in to web sites. OpenID is an open standard which provides a secure way for using an existing account to sign in to multiple websites, without the need for creating new passwords.

There are several OpenID providers around such Google, Facebook, Yahoo!, Blogger, Live Journal, MyOpenId.com, Microsoft, AOL, MySpace, Sears, Universal Music Group, and so on. You can use these accounts to sign in to a website that supports OpenID. That's actually what we'll be doing in this tutorial. Unfortunately, not all of the useful websites are OpenID providers. Facebook, for example, hasn't supported OpenID for a long time. They've just recently announced support. But the integration process is still not stable or requires some workaround. For this reason, we won't support all of OpenID providers in this tutorial. =/

I'm not going deeper into OpenID details. So, for more about what OpenID is check this out, and for any other detailed information check their website.

What will we need?

  • In this tutorial we'll use a popular API for implementing the OpenID standard: Janrain OpenID Library. You can download the API here, but don't worry I'll attach a copy of it in the source code.
  • That's all. =)
Coding

First, lets take a look at which PHP files we'll have:
  1. index.php: It's our project's home page . The user will be redirect by default to this page after successfully login. However, I'll later show you an option to redirecting to someplace else.
  2. login.php: This page will provide the various login options. Whenever a user authentication is required, your website should redirect the user to this page.
  3. openid_auth.php: Contains the actual code for handling authentication via OpenID. This is core of the system.
  4. back_openid.php: It handles the authentication callback.
  5. config.php: This holds some general purpose configuration.
  6. logout.php: Guess what. =)

Our login.php renders the following page when no user is sign in.




Here is a snippet from login.php:

session_start();

// required parameters
include_once 'config.php';

//tell us if the user is logged. It could be any account.
if( $_SESSION['AUTH'] == true)
// displays the user account along with the authentication site's name.
$div = "You're logged on with: ".$_SESSION['user']." (".$_SESSION['auth_site'].") | "."<a href='logout.php'>Logout</a>";
else
$div = "You are not currently logged on.";

//captures and stores the GET parameter 'redirectMeTo' if any included in the URL.
// otherwise the DEFAULT_REDIRECT_ULR is taken
if($_GET['redirectMeTo'])
$_SESSION['redirectMeTo'] = $_GET['redirectMeTo'];
else
$_SESSION['redirectMeTo'] = $DEFAULT_REDIRECT_ULR;


About this file, the points worth commenting are:

1 - session_start(): I've included this line on pretty much every file. This initializes and/or restores session variables so that we can use them across pages.
2 - $_SESSION['AUTH']: This is a very important session variable. It indicates whether the session is authenticated or not, i.e. it is true when there's a user logged on.
3 - $_SESSION['user'] and ("$_SESSION['auth_site']: They store, respectively, the user name of logged user and the authentication site he used to sign in.
4 - $_GET['redirectMeTo'] is a variable sent through GET method (i.e., it comes along with url) from a given page. It contains the page you should redirect the user after sign in. As as example, suppose the visitor tries to access some restrict page, say somehost.com/restricted.php. Since this page accepts only authenticated visitors, he is redirected to the login page through the following url: somehost.com/login.php?redirectMeTo=restricted.php.


The rest of the code mainly deals with interface and appearance.

Now let me explain the main aspects of openid_auth.php. As mentioned, this file contains the implementation of the authentication process. Here, we basically have calls to the Janrain's open-enable API. Most of the code lines are commented so I'll just highlight some points.

$attribute[] = Auth_OpenID_AX_AttrInfo::make('http://axschema.org/contact/email',1,1, 'email');

The above line makes a Attribute Exchange request that retrieves the user's email address from the provider's database.

Next, we set the which page will handle the callback after the user entered in his data into the external login form:

$url = $auth->redirectURL('http://'.$host, 'http://'.$host.'/'.$OPENID_CALLBACK_PAGE);

$OPENID_CALLBACK_PAGE , as many other variables, is defined in config.php. The default value is 'back_openid.php'. In this page, the authentication is completed as follows:

$response = $consumer->complete('http://'.$host.'/'.$OPENID_CALLBACK_PAGE);



That is basically what you need to understand about the code. I hope you'll enjoy this. Check back for the next tutorial parts. In the next part, we will be dealing with Facebook. ;)
  1. Tutorial Part I: Overview
  2. Tutorial Part II: OpenID
  3. Tutorial Part III: Facebook
  4. Tutorial Part IV: Twitter
  5. Tutorial Part V: LinkedIn
  6. Tutorial Part VI: Windows Live
  • Guidelines and Troubleshooting
  1. You should give writing permission to 'oid_store' folder and to its sub-folders as well.
  2. Take a look at the Janrain's openid-enable API README file and install the extensions that it requires. This is very important.
  3. I have tested this code only on Linux, esp. Ubuntu 10.10.
  4. This code should work locally.
  5. More?
The complete code for OpenId authentication follows. Comments were added throughout each source file so that you should understand it with no trouble. Please, post bellow if you have any questions or comments. I'll be happy to help. =)

  • Disclaimer
The following code has not been sufficiently tested and, as such, you should be cautious of deploying it straight forward into your projects. There's no guarantee that it won't fail or that it is completely free of security flaws. Take it into account when using it in real projects.

Download this Awesome Code (tar.gz).

Download this Awesome Code (zip).


Did you like what you've read? Wish to support this project?

  • Consultancy
If you need any personalized help or advice for your project, please email me and I will solve your problem. =) (theawesomecoder at gmail dot com)

So, see you guys soon.

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?