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.
- How to Make A database management System by Php & mySQL
- How to make multi property Search bar by php
- Add Social Media Button in Your Website
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.
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.
<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>
<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">
<div class="g-signin2" data-onsuccess="onSignIn"></div>
<img id="pic" class="img-circle"width="100px"height="100px"/>
<p id="email" class="alert alert-info"></p>
<button onclick="signOut()" class="btn btn-danger">SignOut</button>
var auth2 = gapi.auth2.getAuthInstance();
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.