As I said in My Previous Post Nowadays in almost all websites, You can find login via Social media accounts. So its inevitable for all the developers to learn more about these processes & integrate into their own websites. Their are many benefits of integrating this.
1) You can reduce the time consumption for the long form filling process during the registration
2) You doesn't want to wait for the customers to verify their email address or anything.
3) You can retrieve much more information about the personal info from their social media accounts.
Integrating Google Sigin is more easier than the facebook Signup.
Here You Just need to Create a Project in Google account by visiting:-
https://console.developers.google.com/apis/
Their You have to Create a Project like this:-
So Just save it somewhere, so that you have to use it in the code..
Now Create 2 files in Your project root folder.. one is google.php and then myprofile.php. You can name whatever you want. I named it as per my convenience.
1) In google.php.. Place the code:-
<html lang="en">
<head>
<meta name="google-signin-scope" content="profile email">
<meta name="google-signin-client_id" content="CLIENT_ID">
<script src="https://apis.google.com/js/platform.js" async defer></script>
</head>
<body>
<div class="g-signin2" data-onsuccess="onSignIn" data-theme="dark"></div>
<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+"&nm="+name+"&ml="+email+"&tk="+token;
};
</script>
Above script you noticed this line:- <meta name="google-signin-client_id" content="CLIENT_ID">
Here update the CLIENT_ID variable with the value Iam going to explain to you.
Visit: https://developers.google.com/identity/sign-in/web/sign-in#before_you_begin
Here go to this portion Down:-
Click on the Red Dotted highlighted area.. Then a dialogue box appears:-
HERE the project and credentials will come.. But for better copying you click on the View Link on the Bottom which I highlighted in green. Then you will redirect to a page :-
Here You can see Client Id & Client Secret Values. Just copy the Client Id from here & paste it in the CLIENT_ID Place
<meta name="google-signin-client_id" content="CLIENT_ID">
2) Now From this page value will be passed to googleaccess.php..
Create a Page called googleaccess.php & copy paste the code their:-
<?php
session_start();
?>
<head>
<title>Login with Google</title>
<link
href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
rel = "stylesheet">
</head>
<body>
<?php if($_GET['id']) {?>
<div class = "container">
<div class = "jumbotron">
<h1>Hello <?php echo $_GET['nm']; ?></h1>
<p>Welcome to UAE Travel Agents</p>
</div>
<ul class = "nav nav-list">
<h4>ID</h4>
<li><?php echo $_GET['id']; ?></li>
<h4>Fullname</h4>
<li><?php echo $_GET['nm']; ?></li>
<h4>Email</h4>
<li><?php echo $_GET['ml']; ?></li>
<h4>Token</h4>
<li><?php echo $_GET['tk']; ?></li>
</ul>
</div>
<?php } ?>
Now You will get all the details in this page...
