java script

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: , , ,

How to create popup using javascript

Syntax

window.open (URL, windowName[, windowFeatures])
Example 1
window.open ("https://wiki.workassis.com","New popup window");

Example 2

<button onclick="openpopup()">Open My Popup</button>

<script>
function openpopup() {
    window.open("https://wiki.workassis.com","_blank", "toolbar=0,location=0,directories=0,scrollbars=0,resizable=0,top=500,left=500,width=400,height=400");
}
</script>

Window Features

status The status bar at the bottom of the window.
toolbar The standard browser toolbar, with buttons such as Back and Forward.
location The Location entry field where you enter the URL.
menubar The menu bar of the window
directories The standard browser directory buttons, such as What’s New and What’s Cool
resizable Allow/Disallow the user to resize the window.
scrollbars Enable the scrollbars if the document is bigger than the window
height Specifies the height of the window in pixels. (example: height=’350′)
width Specifies the width of the window in pixels.

 

Advanced popup use plugin like jquery ui

https://jqueryui.com/dialog/#modal-form

By bm on May 10, 2016 | java script | A comment?