Monday, March 25, 2013

Adding Google+ Sign-In to a Web Site

I just added Google+ sign in to the Copasetic Flows ham radio license exam practice site[2].  Unlike friend connect from Google which ultimately disappeared, it was pretty easy!  I used the instructions at Google Plus Daily[1].  The instructions there outline in a very  nice and very complete way how to get sign-in up and working using only JavaScript.  They also demonstrate how to access user information using JavaScript.  The insructions worked very well for me with a few notable exceptions that I'm cataloging here before I forget:

1.  In step 2, adding a sign-in button, I had to add a span around the button html with an id of 'signinButton' to get the button to properly disappear upon login.

2.  The last line of the disconnect code had to be commented out since revokeButton didn't exist in my html.

3.  The profile information code didn't quite work for me.  It's not that it's necessarily bad code so much as it employed bits of Javascript that I'm not comfortable with yet, and therefore couldn't get to work.  I replaced it with code that looks like the following


function setup_gprofile(){
  var request = gapi.client.plus.people.get( {'userId' : 'me'} );
  request.execute(function(profile){
    $('gprofile').innerHTML = '';
    login_user = profile.id;
    login_name = profile.displayName; 
  });
  }

and called it from the library load code for the google plus api load


function signinCallback(authResult) {
   if (authResult['access_token']) {
     // Successfully authorized
     document.getElementById('signinButton').setAttribute('style', 'display: none');
        document.getElementById('fblogin').innerHTML = '';
     gapi.client.load('plus','v1', function(){ 
      // once we get this call back, gapi.client.plus.* will exist
      setup_gprofile();
      });
     

   } else if (authResult['error']) {
     // There was an error.
     // Possible error codes:
     //   "access_denied" - User denied access to your app
     //   "immediate_failed" - Could not automatially log in the user
     // console.log('There was an error: ' + authResult['error']);
   }
 }


After making these modifications, everything worked like a champ!

References:
1.  Google Plus Daily post on adding Google Plus sign-in via JavaScript:
http://www.googleplusdaily.com/2013/03/add-google-sign-in-in-6-easy-steps.html

2.  Copasetic Flows ham radio practice exams
http://copaseticflows.appspot.com/hamtest

No comments: