Adding a Google+ Sign-In to WordPress

This tutorial is aimed at WordPress developers who want to add a Google+ login to their WordPress theme. For themes built for eCommerce, forums and other sites that require users to login, providing the option for a Google+ login button makes the registration and login process both faster and easier for users as they don’t have to complete a form.

The Google+ OAuth WordPress Library

I have created a Google+ OAuth library for WordPress which handles all of the tough tasks of the Google+ OAuth login.

This library also creates the necessary REST API URLs required for Google+ login (official Google documentation refers to this as the Google+ Sign-In).

Once you’ve downloaded the zip file above, extract the contents into your theme folder. Now you will have an /inc directory in your theme folder which has all necessary files for a Google+ login.

Loading the Google+ OAuth WordPress Library

Now you need to load the library into WordPress. Inside your theme’s functions.php file, just include the following:

require_once("inc/googleplusoauth.php");

Redirecting Users

Next, when user clicks on the ‘Sign In with Google+’ button, you need to redirect user:

site_url() . "/wp-admin/admin-ajax.php?action=googleplus_oauth_redirect"

This URL will handle all of the core functionality of ‘Sign In with Google+’. Once the user has been logged in, the user will be redirected to the homepage of the website.

Creating and Installing a Google+ App

Users who install your theme need to create a Google Developer Project and enable Google+ API.

When enabling Google+ API, it asks for a callback URL. Users will have to use the following as the callback URL:

get_site_url() . "/wp-admin/admin-ajax.php?action=googleplus_oauth_callback"

Once they have enabled the Google+ API, they need to copy the Project name, API key and Secret Key from the project dashboard and store them as WordPress options.

You can use the following option names to store the options values:

update_option("googleplus_client_id", $client_id_variable);
update_option("googleplus_client_secret", $client_secret_variable);
update_option("googleplus_app_name", $app_name_variable);

This is all you need to do to have a Google+ login button integrated with your theme.

Now let’s create a Google+ Login widget which displays a Google+ login button.

Creating a Google+ Login Widget

In this section, I’ll list the code for creating a Google+ login widget. You can also put this code inside a plugin if you wish. You’ll just need to make sure that you include the Google+ OAuth WordPress library with your plugin.

<?php

require_once("inc/googleplusoauth.php");

class Google_Plus_Login_Widget extends WP_Widget 
{
    public function __construct() 
    {
        parent::__construct("Google_Plus_login_widget", "Google Plus Login", array("description" => __("Display a Google+ Login Button")));
    }
        
    public function form( $instance ) 
    {
        // Check values
        if($instance) 
        {
            $title = esc_attr($instance['title']);
            $api_key = $instance['api_key'];
            $secret_key = $instance['secret_key'];
            $googleplus_app_name = $instance['googleplus_app_name'];
        } 
        else 
        {
            $title = '';
            $api_key = '';
            $secret_key = '';
            $googleplus_app_name = '';
        }
        ?>

        <p>
            <label for="<?php echo $this->get_field_id('title'); ?>"><?php echo "Title"; ?></label>  
            <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $title; ?>" />
        </p>

        <p>
            <label for="<?php echo $this->get_field_id('api_key'); ?>"><?php echo "Client Id"; ?></label>
            <input type="text" class="widefat" id="<?php echo $this->get_field_id('api_key'); ?>" name="<?php echo $this->get_field_name('api_key'); ?>" value="<?php echo $api_key; ?>" />
        </p>
        
        <p>
            <label for="<?php echo $this->get_field_id('secret_key'); ?>"><?php echo "Client Secret"; ?></label>
            <input type="text" class="widefat" id="<?php echo $this->get_field_id('secret_key'); ?>" name="<?php echo $this->get_field_name('secret_key'); ?>" value="<?php echo $secret_key; ?>" />
        </p>

        <p>
            <label for="<?php echo $this->get_field_id('googleplus_app_name'); ?>"><?php echo "App Name"; ?></label>
            <input type="text" class="widefat" id="<?php echo $this->get_field_id('googleplus_app_name'); ?>" name="<?php echo $this->get_field_name('googleplus_app_name'); ?>" value="<?php echo $googleplus_app_name; ?>" />
        </p>

        <p>
            While creating a Twitter app use "<?php echo get_site_url() . '/wp-admin/admin-ajax.php?action=googleplus_oauth_callback'  ?>" as callback URL.
        </p>

        <?php
    }
        
    public function update( $new_instance, $old_instance ) 
    {
        $instance = $old_instance;
        $instance['title'] = strip_tags($new_instance['title']);
        $instance['api_key'] = strip_tags($new_instance['api_key']);
        $instance['secret_key'] = strip_tags($new_instance['secret_key']);
        $instance['googleplus_app_name'] = strip_tags($new_instance['googleplus_app_name']);
        update_option("googleplus_client_id", $new_instance['api_key']);
        update_option("googleplus_client_secret", $new_instance['secret_key']);
        update_option("googleplus_app_name", $new_instance['googleplus_app_name']);
        return $instance;
    }
        
    public function widget( $args, $instance ) 
    {
        extract($args);
        
        $title = apply_filters('widget_title', $instance['title']);
        echo $before_widget;
        
        if($title) 
        {
            echo $before_title . $title . $after_title ;
        }
        
        if(is_user_logged_in()) 
        {
            ?>
                <a href="<?php echo wp_logout_url( get_permalink() ); ?>" title="Logout"><input type="button" value="Logout" /></a>
            <?php
        }
        else
        {
            ?>
                <a href="<?php echo site_url() . '/wp-admin/admin-ajax.php?action=googleplus_oauth_redirect'; ?>"><input type="button" value="Login Using Google+" /></a>
            <?php
        }
        echo $after_widget;
    }
}
register_widget("Google_Plus_Login_Widget");

Let’s look at how the above code works:

We first included the Google+ OAuth library
Then we created a widget that displays a login button on the front-end and displays the keys input boxes on backend
When users submit the widget form on the backend the values are saved as WordPress options
When someone clicks on the Google+ login button on the front-end of the widget, the users are redirected to the ‘Redirect URL’ as mentioned above
The redirected URL handles all the login task

Making Google+ REST API Calls

Once you have a user logged in you will get an access token which acts as a permission to post and retrieve a user’s data in Google+.

The access token is unique to every user, therefore this library stores it as user metadata. You can retrieve it by using the following:

get_user_meta(get_current_user_id(), "googleplus_access_token", true)

Now you can make Google+ REST API calls by passing this token in HTTP Authorization request header.

Token Expiration

Access tokens have a limited lifetime and can become invalid due to several reasons. If you’re receiving an invalid access token error while making REST API calls then you’ll need to get a new access token by making the user login again.

Conclusion

We’ve learned how to create a Google+ login button. If you integrate it in your theme then you can place this button anywhere, but if it’s in a plugin then you’ll need to put in a widget.

If you’re interested in more information on the topic, here are some other helpful resources:

If you have any feedback, or use the above method or something similar in a project yourself, please let me know by commenting below.