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
Step.2
I am going to create a new project (If you are having a project already you can select that one also)
Step.3
Enable google+ Api
Step.4
Choose an Email Address, specify a Product Name, and press Save.
In the Credentials tab, select the New credentials drop-down list, and choose OAuth client ID.
Under Application type, select Web application.
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
ref
Syntax
window.open (URL, windowName[, windowFeatures])
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