Firstly, let’s understand the overall flow of how Google login works on your site.
On the login page of your site, there are two options users could choose from to log in. The first one is to provide a username and password if they already have an account with your site. And the other is to log in on your site with their existing Google account.
When they click on the Login With Google button, it initiates the Google login flow and takes users to the Google site for login. Once there, they log in with their Google credentials, and after that they will be redirected to the consent page.
On the consent page, users will be asked for permission to share their Google account information with the third-party site. In this case, the third-party site is a site where they want to use their Google account for login. They will be presented with two options: they can either allow or deny.
Once they allow their information to be shared with the third-party site, they will be taken back to the third-party site from where they initiated the Google login flow.
At this point, the user is logged in with Google, and the third-party site has access to the user profile information which can be used to create an account and do user login.
So that’s the basic flow of integrating Google login on your site. In the rest of the post, we’ll implement this login flow in a working example in PHP.
Setting Up the Project for Google Login
In this section, we’ll go through the basic setup which is required to integrate Google login with your PHP website.
Create a Google API Project
Firstly, you need to create an application with Google which will allow you to register your site with Google. It allows you to set up basic information about your website and a couple of technical details as well.
Once you’re logged in with Google, open the Google Developers console. That should open up the Google Dashboard page, as shown in the following screenshot.
From the top left menu, click on the Select a project link. That should open up a popup as shown in the following screenshot.
Click on the New Project link and it will ask you to enter the Project Name and other details. Fill in the necessary details as shown in the following example.
Click on the Create button to save your new project. You will be redirected to the Dashboard page. Click on the Credentials from the left sidebar, and go to the OAuth consent screen tab.
On this page, you need to enter the details about your application like application name, logo, and a few other details. Fill in the necessary details and save them. For testing purposes, just entering the application name should do it.
Next, click on Credentials in the left sidebar. That should show you the API Credentials box under the Credentials tab, as shown in the following screenshot.
Click Client credentials > OAuth client ID to create a new set of credentials for our application. That should present you with a screen that asks you to choose an appropriate option. In our case, select the Web application option and click on the Create button. You will be asked to provide a few more details about your application.
Enter the details shown in the above screenshot and save it! In redirect field please use the URL where you have installed the script. The login.php is the file where you have to redirect your user after successful authorization.
At this point, we’ve created the Google OAuth2 client application, and now we should be able to use this application to integrate Google login on our site. Please note down the Client ID and Client Secret valuesthat will be required during the application configuration on our end. You can always find the Client ID and Client Secret when you edit your application.