Using Google FriendConnect for Authentication

The idea of this article is how to let user sign in to your site by using Google Friend Connect. This is a summarize steps to integrate the JS API to a Grails app and based on instruction for "Give users an option of logging in with Friend Connect".




1. Register your site with Google Friend Connect . You must register your site with Google Friend Connect to get your site ID. We will need the site ID to use with the Friend Connect API.


2. Include Friend Connect library
Refer to this page for the full outlines of the Javascript API.
  google.load('friendconnect', '0.8');

4. Render Login Button.
google.friendconnect.renderSignInButton({ 'id': 'target-id', 'text' : 'Click here to join ', 'style': 'standard' });

5. Using OpenSocialApi to detect if user already login.

google.friendconnect.container.loadOpenSocialApi({
  site: 'XXXXXXXXXXXXXXXXXXXX',
  onload: function() {
    if (!window.timesloaded) {
      window.timesloaded = 1;
    } else {
      window.timesloaded++;
    }
    if (window.timesloaded > 1) {

      // no need to handle this for now
      //window.top.location.href = "/authenticate.html";
    }
  }
});

6. Get user ID.

To obtain the login user, first initiate a data request for "VIEWER".

   var req = opensocial.newDataRequest();
    req.add(req.newFetchPersonRequest("VIEWER"), "viewer_data");
    req.send(onData);

The request will run the callback "onData" when it receive data back from the server.

Next we need to handle the callback from the request for the "VIEWER" information.

   function onData(data) {
      if (!data.get("viewer_data").hadError()) {
         var owner_data = data.get("viewer_data").getData();
         var name = owner_data.getDisplayName();
         var id = owner_data.getId();
         window.location.href = "/auth/checkfriendconnect?id=" + id;
       }
    }

The owner ID is unique to the person and will be used for us to tied in to the user in our system.

The next line, "window.location.href = "/auth/checkfriendconnect?id=" + id;" we are actually redirecting the browser to another page for the Friend Connect ID check by using the ID as a params.

7. Back in the server, query the user for Friend Connect ID with the ID specified and perform the usual login processing once the ID is matched to a user.