Integrate Gmail Login to your App in Grails Using JQuery

Hi,

    This post is helpful to all add social media logins to your application. in this, i will explain gmail authentication using jquery in grails.

step 1:

create sample project.

place this code in viewing page

<!-- Google Authentication -->
   <!-- Bootstrap core CSS -->
  <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>
   <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>
  <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;
                alert(email)
            });
        }
 
    }; //End of Return
    })();
 
    function mycoddeSignIn(gpSignInResponse){
        gpclass.mycoddeSignIn(gpSignInResponse);
    }
    </script>
    <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="362704162729-bic73va5mnq3i1jenihaaut9qsab9c4h.apps.googleusercontent.com"
                    data-accesstype="offline"
                    data-callback="mycoddeSignIn"
                    data-theme="dark"
                    data-cookiepolicy="single_host_origin">Gmail</button>
  <!-- Google Authentication -->

step 2:

register application in gmail apps : https://console.developers.google.com/
login into the gmail. you will navigate to dashboard.

Dashboard

step 3: click on create project

give project name and then create. your project is created

step 4:

goto Enable and manage APIs. you will navigate to below page.

step 5:

in social api's, click on Google + API. then you will navigate to this page

step 6:

click on Enable API. the API is enabled.

step 7:

click on credentials and goto OAuth consent screen

give project name and then save.

step 8:

goto credentials and click on client id

fill the details the following way

and then create, it shows the client id

step 9:

     place client id in step 1 ( in button attribute ). now run the project it show like this.

step 10:

    click on gmail. it will show login panel.

login into your account. 

click on allow. it will redirect to as you given location. in response of authentication is json. in this we find out email, name and so on.

refferences:

http://mycodde.blogspot.in/2014/12/login-using-google-javascript-api.html

http://www.jqueryrain.com/?EiMyCkSQ

http://hayageek.com/login-with-google-plus-javascript-api/

http://www.oauthlogin.com/