Login using Google Javascript API [Sample Code]

Latest Google Javascript API allow users to fetch their google profile information, circle details. Javscript API is not just limited to this, but it allow us to fetch and upload Google Drive file. Read more

In this tutorial we are utilizing Google+ Javascript API to fetch user Google+ Profile Details and Email address. It is purely OAuth2 Compatible login method and its secure.

Demo | Download

Workflow is simple

1. User Clicks on Login with Google Button on XYZ Website
2. Google OAuth2 Popup opens and ask the user login to google account first.
3. If Logged in, it shows the permissions that this website is requesting, then user accept this by pressing button Allow.
4. Now the website receives the user information which are requested by the XYZ Website ( Login Scope )

Before you begin this tutorial, you actually need to setup a Project through Google Developer Console. You can follow google docs here.

Step 1: Create Project

Step 2: Set the Consent Screen details

Step 3: Create Web application Client Key and Secret

Now Client Key and Secret key successfully created.

Note: For javascript based login, we dont use Secret key, only Client Key is enough.

How to Google+ Javascript Login 

Add Google+ Javascript API Javascript Header

  <script type="text/javascript">
  (function() {
    var po = document.createElement('script');
    po.type = 'text/javascript'; po.async = true;
    po.src = 'https://plus.google.com/js/client:plusone.js';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(po, s);
  })();
  </script>

Add JQuery & Bootstrap for styling

    <!-- Bootstrap core CSS -->
  <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
  <link href="http://getbootstrap.com/examples/signin/signin.css" rel="stylesheet">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>

Complete HTML Body code for the Form and Google+ Button

   <div class="container">

      <form class="form-signin" role="form">
            <div id="status"></div>
        <h2 class="form-signin-heading">User Registration</h2>
        
        <label for="inputFname" class="sr-only">First Name</label>
            <input type="text" id="inputFullname" class="form-control" placeholder="First Name" required autofocus>
            
        <label for="inputEmail" class="sr-only">Email address</label>
        <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required >
        
        <label for="inputPassword" class="sr-only">Password</label>
        <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
        
        <div class="row"> 
            <div class="col-md-6">
                <button class="btn btn-sm btn-primary btn-block" type="submit">Sign Up</button>
            </div>
            <div class="col-md-6">
                <button class="g-signin " 
                    data-scope="https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/userinfo.email"
                    data-requestvisibleactions="http://schemas.google.com/AddActivity"
                    data-clientId="1049178870057-usbfluijl3qtq3nijmucnsksr9gvkag4.apps.googleusercontent.com"
                    data-accesstype="offline"
                    data-callback="mycoddeSignIn"
                    data-theme="dark"
                    data-cookiepolicy="single_host_origin">
                </button>
            </div>
        </div>
         

      </form>

    </div> <!-- /container -->

Javascript Code for the Google+ API and Fetching User Details, Email from Google Profile

    <script type="text/javascript">
    var gpclass = (function(){
    
    //Defining Class Variables here
    var response = undefined;
    return {
        //Class functions / Objects
        
        mycoddeSignIn:function(response){
            // The user is signed in
            if (response['access_token']) {
            
                //Get User Info from Google Plus API
                gapi.client.load('plus','v1',this.getUserInformation);
                
            } else if (response['error']) {
                // There was an error, which means the user is not signed in.
                //alert('There was an error: ' + authResult['error']);
            }
        },
        
        getUserInformation: function(){
            var request = gapi.client.plus.people.get( {'userId' : 'me'} );
            request.execute( function(profile) {
                var email = profile['emails'].filter(function(v) {
                    return v.type === 'account'; // Filter out the primary email
                })[0].value;
                var fName = profile.displayName;
                $("#inputFullname").val(fName);
                $("#inputEmail").val(email);
            });
        }
    
    }; //End of Return
    })();
    
    function mycoddeSignIn(gpSignInResponse){
        gpclass.mycoddeSignIn(gpSignInResponse);
    }
    </script>

If you click on the Google+ Login Button it will show a popup like below. This means your configuration in google developer console is right.

Login using Google Popup 

Thats it.