In this tutorial we look at how we can add social login to our web application using Google. We do this in PHP.
Creating a project in Google Services
First thing we need to do is create a project using Google API Services dashboard. You can find that here.
When you click on the dropdown arrow a project screen should appear allowing you to create a new project.
Clicking the new project on the top right hand corner will take you to a screen that allows you to create your project.
Once your project is created be sure to select it using the dropdown arrow from before.
Now we get to the important part. Creating credentials.
To create your credentials click on the left menu panel that says credentials and then on the right panel click the create credentials button.
Select the OAuth Client Id option when prompted.
Choose web application
Click the save button and get started with you new credentials.
On the home screen you can view your credentials. Click on the one you created to get your credentials.
You can view your client id and client secret next. You will need these just now.
Next we need to setup our OAuth Consent Screen.
Click on that tab that takes you to this screen
Enter the required details. Pay attention to the Authorized domains section. Be sure to place your domain your are using to run the application here. This is very important. My dev domain is dev.sso.com. So I had to add sso.com for the application to work.
Save the information and enter you credentials page again. We are going to add our redirect url we plan to use for the app. You can do this later. This is the link that google will redirect to and must be associated with your authorized domain you added above.
Our app will redirect to the auth.php file. We need to add a fully qualified domain in that section.
That’s it for the Google Setup part. Lets get into the code now.
Creating the PHP Application
Create a folder for your application and initialize composer.
composer init
Next install google api-client for PHP
composer install google/apiclient
Once thats done create a functions.php file. We are going to place all the code we will need inside it.
At the start we must autoload our dependencies
require 'vendor/autoload.php';
The first function is the get_client function. It sets up the Google_Client object and returns it.
function get_client( $page="auth.php" ){
$client = new Google_Client();
$client->setClientId("client-id");
$client->setClientSecret('client-secret');
$client->setScopes(array('https://www.googleapis.com/auth/userinfo.email'));
$client->setRedirectUri('http://' . $_SERVER['HTTP_HOST'] . '/' . $page);
return $client;
}
Notice how we set the redirect URI with the $client->setRedirectUri function.
$client->setRedirectUri('http://' . $_SERVER['HTTP_HOST'] . '/' . $page);
We get $page as a default parameter set to auth.php.
When we need to go to google login page we need the correct URL the get_auth_url function does this. It loads the client and returns the authentication URL using the createAuthUrl function found in the google client api.
function get_auth_url(){
$client = get_client();
return $client->createAuthUrl();
}
Finally to get our user info we have the function called get_user_info_object.
function get_user_info_object( $authCode ){
$client = get_client();
$token = $client->fetchAccessTokenWithAuthCode($authCode);
$client->setAccessToken($token);
$oauth = new Google_Service_Oauth2($client);
return $oauth;
}
Lets get to the views sections. The fun part.
We create a view called login. It has mainly HTML in it. At the top we require the functions file
<?php require 'functions.php'; ?>
Next we want the auth url in our google login button
<a href="<?php echo get_auth_url();?>" class="btn btn-primary">Login via Google</a>
When this link is clicked we will be taken to the OAuth screen for your application.
In the auth.php file where we redirect to we get the auth code and retrieve the user information.
<?php
require 'functions.php';
if(isset($_GET["code"])){
$token = $_GET["code"];
$user = get_user_info_object($token);
$userData = $user->userinfo->get();
$email = $userData["email"];
$picture = $userData["picture"];
include 'profile.php';
}
We include the profile.php which displays the $email and $picture.
<div class="avatar">
<img alt="" src="<?php echo $picture;?>">
</div>
<div class="info">
<div class="title">
<a target="_blank" href="#"><?php echo $email;?></a>
</div>
</div>
You can now login using google. Have fun.
Credits to two articles that guided me – phppot and seegatesite.
