Web application with OAuth authorization

Today in the most of the websites you can see on login page there are some options like Login with "Facebook" or "Login with Google". So here I am going to show how to create a such social login using OAuth authorization server and OAuth resource server.

I am creating my  web application in localhost with apache server using php. First we create a page with name index.php. Here we contain the simple login form.

We create a simple html form and for css we use bootstrap.
On that same page we have the Log in with Google option.

In that section we define what data we want to get from the users and we assign those data to variables.
In the next step we create another file named loginG.php. 

There we have some variables as cllientId, clientSecret and redirectURL. To get the clientId and clientSecret we have to use Google console.

After login to google console you can create an app.

Then go to Product and services tab > API and services > Credentials.

Then select get OAuth client ID.

Then select the type as web application , select a name and authorize the redirect URL.

Then it gives the client ID and client secret we mentioned before.
Then we have to copy and paste it to our code.
For the redirect URL we use the same url we select to authorize url in google console.

Finally we have to create the Home.php page where we load the users details. First of all we create a session on this page when the user logs in.

Then we represent the data we achieved from the user through Google in a table which were assigned to variables in page index.php.

Then we create the Logout button.

After everything is done we open our web application.

Then we select the button "Sign in with Google".
then it redirects to this page where it requests user's authorization.

After the user logs in it redirects to the Home page with the details of the logged user.

My sample project in GitHub - Social Login