Php MySQL

Add a Google SignIn button on your website login via gmail

Google sign-in has an Advance way of Sign-In, through which we can use the Google APIs to obtain any Basic Basic information like Email, Profile Pic, User Name etc.

Nowadays Google Sign-In is very much preferred, because this not only saves the time of user but also gets rid of the hassle of remembering the password.By filling several fields in the user login form, it is preferred to have Google Sign-In on a Good Click, so it is necessary that you also have to put a Google Sign-In Button in your website.To create a sign in button by Google, we need the Google API, so first of all, we need to generate a Google API, after which we will be able to move forward.

What is API?

API means Application Programming Interface (API);API is an interface used to connect a software or website to other software or website. That is, API is a specification that describes the process of connecting and using software or website.The specification given by the API is in the form of Source Code, nowadays many big websites provide their API, so others can do their job by adding those Web applications through their APIs in their programming.Some big websites, such as Google Facebook Instagram, provide their APIs, which we will further learn, here we only have to use Google APIs.

Also Read

How to create a Google API for your website?

Now that you have come to know about the API in detail, now we will learn to create a Google API for your website here.Before all these procedures you must have a Google Account, so first you have to create a Google Account.In the further process we will open our browser and open this URL to generate Google APIs

After you open this URL, you will see that a Google website has been opened in front of you, here you do nothing, just click on the “Configure A Project” button.

After clicking on the “Configure A Project” button, you will have to follow the steps shown in the photo below. Here you will find some information about yourself and your project, so fill in the right information here.

NOTE: Keep in mind that Google API is unique, the project you created for it will only work on it, you are also given secrets with API, so you do not share it anywhere.

How to Add Google Sign-In Button in Your Website?

Now that you have created Google API for your website, you might be wondering how to create a button with this API, and how the user’s information will be taken and how it works. You can find answers to all these questions here. Will go
Firstly, create a simple ‘HTML‘ or ‘PHP‘ page. If you are working on SESSION then you have to create a PHP page,Add HTML Basic Syntax here to make sure that your PHP page is working properly. After that you have to add the plugin to Google Library in your page, it is necessary that you can place it anywhere between <Head> …. </ Head> Tag. After this we will now add a “Google Sign-In” button to this page, use the code below for this to be done where you want to set the sign-in button.

   index.php
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="google-signin-scope" content="profile email">
<meta name="google-signin-client_id" content="535015035167-bp26bssa5e8iafirk5f9i6hla0s9069c.apps.googleusercontent.com">
<script src="https://apis.google.com/js/platform.js" async defer></script>
<title>Login Via GOOGLE Account</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<style>
.g-signin2{
margin-left:500px;
margin-top:200px:
}
.data{
display:none;
}
</style>
<body>
<div class="g-signin2" data-onsuccess="onSignIn"></div>
<div class="data">
<p>Profile Details</p>
<img id="pic" class="img-circle"width="100px"height="100px"/>
<p>Email Address</p>
<p id="email" class="alert alert-info"></p>
<button onclick="signOut()" class="btn btn-danger">SignOut</button>
</div>
</div>

</body>
</html>

After writing all the code, you have to use Javascript in it. Create a new page and name it as “script.js“, and paste the code below into it and save it.

  script.js
function onSignIn(googleUser)
{
var profile=googleUser.getBasicProfile();
$(“.g-signin2”).css(“display”,”none”);
$(“.data”).css(“display”,”block”);
$(“#pic”).attr(‘src’,profile.getImageUrl());
$(“#email”).text(profile.getEmail());
}
function signOut()
{
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(function(){
alert(“Logouted”);$(“.g-signin2”).css(“display”,”block”);
$(“.data”).css(“display”,”none”);
});
}

Save the page, open your browser and view this page, you will see a “Sign-in With Google” button in it.

Here we have created a simple Google Sign-In Button in the next tutorial, we will learn about SESSION Start, Get User Details, Via Google Account and Logout etc. by using the Google sign-in button.

If you wish, you can download Source Code from this project here.

google.com

Kamal

My name is Kamalesh saini , working as e-mitra operator and web developer too. i am here to guide people who need help in learning php MySQL, HTML,CSS, and javascript.

Add comment

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.