Skip to content

Instantly share code, notes, and snippets.

@NirmalAriyathilake

NirmalAriyathilake/index.php

Last active October 27, 2018 03:42
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save NirmalAriyathilake/f904c0aa56825961f5e9f4cd8d48cd12 to your computer and use it in GitHub Desktop.
Save NirmalAriyathilake/f904c0aa56825961f5e9f4cd8d48cd12 to your computer and use it in GitHub Desktop.
Download ZIP
OAuth And Social Login - index.php
Raw
index.php
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>OAuth And Social Login</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://apis.google.com/js/platform.js?onload=init" async defer></script>
<meta name="google-signin-client_id" content="57064433868-ebkvuv5druld2jah3h8hmt5l71ennfqb.apps.googleusercontent.com">
<script>
function onSignIn(googleUser) {
var profile = googleUser.getBasicProfile();
console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
console.log('Name: ' + profile.getName());
console.log('Image URL: ' + profile.getImageUrl());
console.log('Email: ' + profile.getEmail()); // This is null if the 'email' scope is not present.
var id_token = googleUser.getAuthResponse().id_token;
document.getElementById('loginForm').style.display = "none";
document.getElementById('profileinfo').style.display = "block";
document.getElementById('label_name').innerHTML = profile.getName();
document.getElementById('label_email').innerHTML = profile.getEmail();
document.getElementById("imageid").src=profile.getImageUrl();
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://localhost/OAuthSocialLogin/server.php');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onload = function() {
console.log('Signed in as: ' + xhr.responseText);
};
xhr.send('idtoken=' + id_token);
}
</script>
</head>
<body>
<div class="container" style="margin-top: 100px" id="loginForm">
<h2 class="text-center">Login</h2>
<div class="row justify-content-center">
<div class="col-md-9">
<form method="post" action="server.php" name="loginform">
Username:<br/>
<input type="text" name="username" class="form-control" placeholder="Username" required><br/>
Password:<br/>
<input type="password" name="password"class="form-control" placeholder="Password" required><br/>
<input type="submit" name="submit" value="Login" class="btn btn-success"/>
<br/><br/>
Or you can sign in using google<br/>
<div class="g-signin2" data-onsuccess="onSignIn"></div>
</form>
</div>
</div>
</div>
<div class="container" style="margin-top: 100px; display:none;" id="profileinfo">
<h2 class="text-center">Profile</h2><br/>
<div class="row justify-content-center">
<div class="col-md-9">
<div class="text-center"> <img src="" id="imageid" /></div><br/>
Name:<br/>
<label id="label_name" class="form-control"></label><br/>
Email:<br/>
<label id="label_email" class="form-control"></label><br/>
<input type="button" value="Log Out!" onclick="window.location.href='logout.php'" class="btn btn-danger"/>
</div>
</div>
</div>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment