Build a one-click registration form powered by Google

Do you know that you can use Google's services to build a one-click registration form for your web site? Everyone with a Google Account can then press a button and instantly sign up for your application with their email, name and photo.

This service is called federated login, and is built on top of the OAuth2 protocol. This is a complex process that involves several data-exchange requests between your server and Google, but we will leave all this to Google's PHP Library, whcih will handle nearly everything on the server side.

Using this login/registration flow can simplify things for both you and your users. Here are some of the benefits:

• No need to create and validate registration and login forms;
• No need for a "forgot password" feature;
• Greatly simplified login/registration flow - you get the person's email, name and photo with only one click;
• The email is already validated by Google, so you don't have to send a validation message.
• Great security on Google's part.

Of course, this will only work if the person has a Google account, so it might make sense to have this in addition to an existing registration system. Let's get started!

Setting things up

The first step is to create a new application through Google's API Console. Follow these instructions for more information. After you complete the process, place the obtained keys in setup.php.

Run the code from schema.sql (you can find it in the download archive) in phpMyAdmin or a different MySQL administration tool. This will create the glogin_users table in your database, which will be used to store account information about the users of your app. After this, write your database connection details to setup.php.

The PHP

The login form we are making, uses Google's Federated login flow. What that means is that visitors of your website follow a link to a Google page, where they give your application access to their accounts, and are redirected back. You then get an access token, which you can use to request information about them. Here is a simplified description of the login flow:

• When the user clicks "Sign in with Google" in our demo, they are taken to Google's Authentication page, where they see what permissions are requested by our application.
• Upon hitting accept, they are redirected back to the site, along with a special code parameter passed in the URL. Our application will use this code to obtain an access token;
• With the access token, the app requests information about the user, which is inserted into the database.

For reading and inserting into the database, I am using a personal favorite - the tiny Idiorm library, which you can find in the library folder.

Our PHP code is organized in the following way:

• index.php - this is the main application file;
• setup.php - this file holds your database connection info, and the keys obtained from Google's API Console;
• The library folder - it contains the Idiorm library, Google's PHP library, and a class for turning timestamps into relative time.

Let us take a look at the code found at the top of index.php:

index.php

require 'setup.php';

// Create a new Google API client
$client = new apiClient();
//$client->setApplicationName("Tutorialzine");

// Configure it
$client->setClientId($client_id);
$client->setClientSecret($client_secret);
$client->setDeveloperKey($api_key);
$client->setRedirectUri($redirect_url);
$client->setApprovalPrompt(false);
$oauth2 = new apiOauth2Service($client);

// The code parameter signifies that this is
// a redirect from google, bearing a temporary code
if (isset($_GET['code'])) {

    // This method will obtain the actuall access token from Google,
    // so we can request user info
    $client->authenticate();

    // Get the user data
    $info = $oauth2->userinfo->get();

    // Find this person in the database
    $person = ORM::for_table('glogin_users')->where('email', $info['email'])->find_one();

    if(!$person){
        // No such person was found. Register!

        $person = ORM::for_table('glogin_users')->create();

        // Set the properties that are to be inserted in the db
        $person->email = $info['email'];
        $person->name = $info['name'];

        if(isset($info['picture'])){
            // If the user has set a public google account photo
            $person->photo = $info['picture'];
        }
        else{
            // otherwise use the default
            $person->photo = 'assets/img/default_avatar.jpg';
        }

        // insert the record to the database
        $person->save();
    }

    // Save the user id to the session
    $_SESSION['user_id'] = $person->id();

    // Redirect to the base demo URL
    header("Location: $redirect_url");
    exit;
}

// Handle logout
if (isset($_GET['logout'])) {
    unset($_SESSION['user_id']);
}

$person = null;
if(isset($_SESSION['user_id'])){
    // Fetch the person from the database
    $person = ORM::for_table('glogin_users')->find_one($_SESSION['user_id']);
}

What is happening here, is that we are checking for the code $_GET parameter. As I mentioned above, this parameter is set by Google when the user is redirected after authorizing the app. In the if block, we are requesting user information and writing it to the database. The id of the user (value of the id key in the database) is written to the session. This is preserved across requests and is used as a flag that the user is logged in.

If you'd like to learn more about OAuth and the login flow, read through Google's page on the subject. There you can also see a table with the fields returned by userinfo get() method.

Near the end, we define a $person variable. It holds an object that is returned by the Idiorm library with properties for each column of the glogin_users table. You can see how this object is used in the next section.

The HTML

The HTML of this example occupies the lower half of index.php. Because of this, we have access to the $person object, which will come handy when printing the name and photo of the user. The page itself is a standard HTML5 document:

index.php

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Google Powered Login Form | Tutorialzine Demo</title>

        <!-- The stylesheets -->
        <link rel="stylesheet" href="assets/css/styles.css" />
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700" />

        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>

    <body>

        <h1>Login Form</h1>
        <div id="main">

            <?php if($person):?>
                <div id="avatar" style="background-image:url(<?php echo $person->photo?>?sz=58)"></div>
                <p class="greeting">Welcome, <b><?php echo htmlspecialchars($person->name)?></b></p>
                <p class="register_info">You registered <b><?php echo new RelativeTime($person->registered)?></b></p>
                <a href="?logout" class="logoutButton">Logout</a>
            <?php else:?>
                <a href="<?php echo $client->createAuthUrl()?>" class="googleLoginButton">Sign in with Google</a>
            <?php endif;?>

        </div>

    </body>
</html>

We are checking whether the $person variable holds an object or is empty, and display the username and photo of the user if appropriate. In the other case, we generate and print an Auth URL that points to Google's authentication page for our application.

We're done!

With this our One-click registration form powered by Google is complete! You can build upon this example and embed it as part of your existing websites without much effort. Also, Facebook, Twitter, Github and many more also support OAuth authorization, so you can optionally implement an all-in-one solution that supports all major social networks.