Sunday, November 06, 2011

Night of the living programmer - Facebook login in Java web application

It is a sunny Saturday, not often in autumn of Seattle. For quite a while, I've been waited for such a chance to walk peacefully in Olympic Sculpture Park. On the other side, I also always wanted to add a "Login with Facebook" button to my new website to attract users as the popularity of the website just about to reach all time low. So the plan is, finishing the login button before afternoon, have peaceful walk during sunset, which would be nice, and watch a relaxing DVD before sleep.

With this guide, adding a button with popup login window wasn't difficult. Out of box, div element with class fb-login-button is decorated as long as Facebook Javascript SDK is included.  The script snippet in tutorial is mostly to enable Javascript SDK in an asynchronous fashion for performance gain. The only gotcha is that the URL of page with button must be under a registered domain of application. I did local testing by modifying my /etc/hosts and mapping local.mydomain.com to 127.0.0.1.

However from this tutorial it isn't clear how the data that application asks user the access for, is accessed or passed over to application? In my first attempt, the pop up window asked for login information, permission to access a few fields, then closed as if it has nothing to do with the Java code running on the server side of application. My guess is that the access token used to make "/me" call should be passed as a parameter to a given URL under mydomain.com, but the tutorial doesn't say anything about it, it doesn't even say how the redirect URL is configured.

Reading further in authentication concept, I realized I could do a three-step authentication all by myself without Javascript SDK or fb-login-button class. It'd give me decent chance to smoothly embed my Java page into the process and get access token, which of course, requires a little bit of work. But then I wonder what's the purpose of the nice fb-login-button class button.

After playing for a while, it turns out in the simple fb-login-button approach, after authentication is done and window is closed, the useful access token that I expected is left in a cookie named fbs_<app-id>. I can totally redirect to an empty page that picks up this cookie after login window is closed. Follow this direction, my application ends up with:

<div  class="fb-login-button" data-perms="email"
        onlogin="location.href='/do_land_facebook.html"
        title="You may sign in right away if you have a facebook account">
    Login with Facebook</div> 

The do_land_facebook.html is back'ed with following Java code that picks up cookie and call "/me" api.

String cookieName = "fbs_" + config.getFacebookAppId();
Cookie fbCookie = null;
for ( Cookie cookie : request.getCookies() )
{
    if ( cookie.getName().equals( cookieName ) )
    {
        fbCookie = cookie;
        break;
    }
}
if ( fbCookie == null )
{    // This could happen when user clicks cancel button
    // The onlogin event is triggered no matter user clicks Login or Cancel
    return "redirect:/login_failed.html"; // It happens to be a SpringMVC based application
}
    // The cookie value is the exact query string required to call facebook API
InputStream in = new URL( "https://graph.facebook.com/me?" + fbCookie.getValue() ).openStream();
try
{
    String content = IOUtils.toString( in );
    LOG.info( "Received facebook response: " + content );
    JSONObject me = new JSONObject( content );
    loginWithFacebook(request, me); // Do my own login code logic with given JSON object graph
    return "redirect:/index.html";
}
finally 
{
    IOUtils.closeQuitely( in );
}

Finally everything starts working. I'm still debating with myself whether to do the three step authentication without Javascript SDK, or leave it as is. Maybe I will make this decision tomorrow with a dice.

Another thing I just realized, sunset is gone now and it's pitch black outside. Time went so fast and it's already the time to watch relaxing horror movie. What a Saturday.
Post a Comment