Updated Integrating Google Signin with PHP websites

 In modern sites, it's inevitable to have a login system by using social media. This is basically to keep away spammers mostly and verify their profiles from top sites so we will get maximum verified information from them . Most sites will remove the manual registration or sign-in procedures from their sites and go for Social media logins. So programmers be alert. Now in this post am explaining about how to integrate Google signing for your website. Considering other socialmedia integrations, google authentication is quite easy and straight forward. Iam going to explain step by step on how to do this in this post:-

1) Create authorization credentials

The most important thing is to create authentication credentials in Google for whatever api's we are using from then.Any application that uses OAuth 2.0 to access Google APIs must have authorization credentials that identify the application to Google's OAuth 2.0 server. The following steps explain how to create credentials for your project. Your applications can then use the credentials to access APIs that you have enabled for that project. So for creating that :-

a) Go to the Credentials page.

Sometimes we have to configure OAuth content screen for creating credentials. You can find more here in my previous post.

https://phpdudes.blogspot.com/2021/06/setting-up-google-oauth-content-screen.html

b) Click Create credentials > OAuth client ID.

c) Select the Web application application type.

d) Name your OAuth 2.0 client and click Create

Here you have to enter web application name,then authorised domain URL and the URL where request will come. Please make sure that the redirect URL will be the link after signing, customer will be redirected to.

e) After configuration is complete, take note of the client ID that was created. You will need the client ID to complete the next steps. (A client secret is also created, but you need it only for server-side operations.)

Please take note of the client id you get from here, as we have to put same in one place of our script.

2) Putting JS scripts in the header of the script

 <meta name="google-signin-scope" content="profile email">

    <meta name="google-signin-client_id" content="YOUR_CLIENT_ID_COPIED">

    <script src="https://apis.google.com/js/platform.js" async defer></script>

Include this script over the body of your script page. Replace YOUR_CLIENT_ID_COPIED with the google API key u created.

3)Putting Google signing display button in your page

<div class="g-signin2" data-onsuccess="onSignIn" data-theme="dark">

Put above code in the place you want the signin button to appear. It will display like this:-

4) Putting Javascript code in the page

Put following javascript code snippet code at end of the page.

<script>

      function onSignIn(googleUser) {

        // Useful data for your client-side scripts:

        var profile = googleUser.getBasicProfile();

        console.log("ID: " + profile.getId()); // Don't send this directly to your server!

        console.log('Full Name: ' + profile.getName());

        console.log('Given Name: ' + profile.getGivenName());

        console.log('Family Name: ' + profile.getFamilyName());

        console.log("Image URL: " + profile.getImageUrl());

        console.log("Email: " + profile.getEmail());

        // The ID token you need to pass to your backend:

        var id_token = googleUser.getAuthResponse().id_token;

        console.log("ID Token: " + id_token);

        var id = profile.getId();

        var name = profile.getName();

        var email = profile.getEmail();

        var token= id_token;

        window.location.href = "googleaccess.php?id="+id+"&name="+name+"&email="+email+"&token="+token;

      };

    </script>

5)Create a Google Details Accessing Page

You have to create a page called googleaccess.php to catch all these values ina PHP page. These details you can use for checking the login and registering according to your websites logic.

          $email=$_GET['email'];

          $name=$_GET['name'];

          $token=$_GET['token'];

You can do like this:- You check whether the email exist in your database associated with a user. If yes activate his session and log him in. If his email is not available, then you create account of him by inserting name, email.etc. This is the basic login and register you can do using the Google signin.

You can download sample code from here:- https://github.com/litto/GoogleSignin