Tuesday, 25 June 2013

How to make people login into your website with their Google account

OpenID provides a safe, elegant and easy way for people to login into your website without having to fill in a registration form. They just have to have an account to one OpenID provider, a Google account for instance, and they will login into your site with this account.

I will show you how to implement it with Google accounts, but the source code is exactly the same for other providers (such as Yahoo!), you just have to change the URLs.
?How does it work ?
You just have to know that you don’t have to deal with the user authentication. You will provide a link to a Google page in which the user will :
  • give his credentials (or not, if he is already logged on Gmail for instance) :
  • give the authorization to Google to give you some his personnal data that you request :
Then the user will be redirect to a page of your website, that you chose, and you will be able to retrieve his personal data.

Let’s write some code !

We will have two part in our the code :
  • First, the code to retrieve the user personal data. Here, you just want to execute that code once, only when the user clicks on “Login with my Google account”. 
  • Then, the code to render the login button. You might want to display the login button on several pages, in your sidebar or whatever, so that code has to run each time you render the button.

1
We will be using a one-file PHP OpenID library that you can download here :LightOpenID. Just put this file in your project folder.

2
Here is the login.php file, it will be the page that the user willl be redirected to after having given his credentials and authorization to Google. This code retrieve and display the personal data of the user :
<?php
require_once 'openid.php';
$openid = new LightOpenID("my-domain.com");
 
if ($openid->mode) {
if ($openid->mode == 'cancel') {
echo "User has canceled authentication !";
} elseif($openid->validate()) {
$data = $openid->getAttributes();
$email = $data['contact/email'];
$first = $data['namePerson/first'];
echo "Identity : $openid->identity <br>";
echo "Email : $email <br>";
echo "First name : $first";
} else {
echo "The user has not logged in";
}
} else {
echo "Go to index page to log in.";
}
?>
Make sure to replace my-domain.com by your domain name.
If you have already a running signup/login system on your website, you might want to add a openid_identity field to your table users in your database and store in it $openid->identity. It is the unique ID that Google provides you to identify the user. The other fields may change if the user changes his Google profile.

3
And last step, the code to render the button, let’s say on the home page,index.php. It will call a Google window and it will tell this window to redirect to your site after.
<?php
require_once 'openid.php';
$openid = new LightOpenID("my-domain.com");
 
$openid->identity = 'https://www.google.com/accounts/o8/id';
$openid->required = array(
'namePerson/first',
'namePerson/last',
'contact/email',
);
$openid->returnUrl = 'http://my-domain.com/login.php'
?>
 
<a href="<?php echo $openid->authUrl() ?>">Login with Google</a>
Here you have to change the returnUrl field : put the absolute URL of the PHP page of step 2.
Once again, make sure to replace my-domain.com by your domain name.

4
To logout a user, just destroy the session :
session_destroy();
And that’s it ! Finally, some figures about with what OpenID provider users prefer login according to JanRain.

What users prefer

Other OpenID providers

You can use this code to make people login into your website with some other accounts : Yahoo, WordPress, AOL, … You just have to change the url $openid->identity by :
  • Google : https://www.google.com/accounts/o8/id
  • Google profile : http://www.google.com/profiles/~YOURUSERNAME
  • Yahoo : https://me.yahoo.com
  • AOL : https://www.aol.com
  • WordPress : http://YOURBLOG.wordpress.com
  • LiveJournal : http://www.livejournal.com/openid/server.bml

Other languages

You can find the equivalent of LightOpenID that I used in PHP in the other languages on this page of the OpenID.net wiki : Libraries.
Feel free to ask questions right here ↓

0 comments :

Post a Comment