javaScript Archives - wiki

Implementing Google Sign-In for Websites java script and PHP

Implementing Google Sign-In for Websites java script and PHP

First step you need to create a google client id

Go to https://console.developers.google.com/project/_/apiui/apis/library

then create a new project or select an existing project

Step.1

create project

Step.2

I am going to create a new project (If you are having a project already you can select that one also)

new project

Step.3

Enable google+ Api

enableing google pluse

enableing google pluse 2

 

Step.4

Choose an Email Address, specify a Product Name, and press Save.

create creadential

In the Credentials tab, select the New credentials drop-down list, and choose OAuth client ID.

create creadential2

Under Application type, select Web application.

create creadential3

 

create creadential4

 

Copy the client id from the google developer console and past it in to the meta tag of the bellow index,html “<YOUR CLIENT ID>”

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="ISO-8859-1">
		<meta name="google-signin-client_id" content="<YOUR CLIENT ID>"></meta>
		<title>Google login </title>

		<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
	</head>
	
	<body>

		<div id ="signin" class="g-signin2" data-onsuccess="onSignIn"></div>

		<br>Access token<br>
		<textarea id="token" rows="" cols=""></textarea>
		
		<br>
		<button id="verify_in_server">verify in server</button>
		<div id="verify_in_server_result"></div>
		
		<a id ="signout" href="#" onclick="signOut();">Sign out</a>

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

		<script type="text/javascript">
		
			/*
			 * Google sign in callback
			 * after loginin to google this function will automatically call
			 * no neet call this function manually
			 */
			function onSignIn(googleUser) {
				var profile = googleUser.getBasicProfile();
	
				var id_token = googleUser.getAuthResponse().id_token;// this token we will send to server to verify
	
				console.log('ID: ' + profile.getId());
				console.log('Name: ' + profile.getName());
				console.log('Image URL: ' + profile.getImageUrl());
				console.log('Email: ' + profile.getEmail());
	
				console.log('Token: ' + id_token);
	
				$("#token").text(id_token);
			}

			function signOut() {
	
				var auth2 = gapi.auth2.getAuthInstance();
				auth2.signOut().then(function() {
					console.log('User signed out.');
				});
			}
			
			$("#verify_in_server").click(function(){
				
				$.ajax({
					type: "POST",
				 	url: "verify.php", 
				 	data: { token: $("#token").text()},
				 	success: function(result){
				    	    $("#verify_in_server_result").html(result);
				   	}
				});
			});

		</script>
	</body>
</html>

 

Server side verification (PHP)

<?php

echo "Result from server<br>";

if (isset ( $_REQUEST['token'] ) && $_REQUEST['token'] != '') {
    
    $response = file_get_contents ( 'https://www.googleapis.com/oauth2/v3/tokeninfo?id_token=' . $_REQUEST['token'] );
    
    $response = json_decode ( $response );
    
    echo "<pre>";
    print_r ( $response );
    echo "</pre>";
}
?>

 

Out Put

login1

login2

login3

login4

ref

https://developers.google.com/identity/sign-in/web/sign-in

By bm on June 29, 2016 | html, java script, php | A comment?
Tags: , , ,