html 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

then create a new project or select an existing project


create project


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

new project


Enable google+ Api

enableing google pluse

enableing google pluse 2



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>
		<meta charset="ISO-8859-1">
		<meta name="google-signin-client_id" content="<YOUR CLIENT ID>"></meta>
		<title>Google login </title>

		<script src="//"></script>

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

		<br>Access token<br>
		<textarea id="token" rows="" cols=""></textarea>
		<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="" 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);

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



Server side verification (PHP)


echo "Result from server<br>";

if (isset ( $_REQUEST['token'] ) && $_REQUEST['token'] != '') {
    $response = file_get_contents ( '' . $_REQUEST['token'] );
    $response = json_decode ( $response );
    echo "<pre>";
    print_r ( $response );
    echo "</pre>";


Out Put






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