Sunday, February 28, 2010

Super-simple authentication using Google Friend Connect

I've been following Google friend Connect since it came out, since it's a very interesting API.

For me, what's interesting about it has always been that it takes care of the authentication for a site owner. This is not the basic use-case, mind you. The basic use cases seems to be the simple addition of site-separate, rich, social widgets.

This is by no mean bad, but the first thing I wanted to do with GFC was to just put up the first, simple 'join this site' widget, and then use the magic to let anyone who had a Google. Yahoo, AIM, OpenID, et.c. account just log in to my site, using a unique user id  provided by Google.

This proved quite hard in the beginning, especially since you basically had to learn a lot of OpenSocial APIs just to do something non-trivial. Since a couple of months back, the GFC APIs has become richer and also simpler.  The meaning of this blog post is to show you in a simple way how to leverage GFC for your own authentication, without breaking a sweat.

What you need to do is the following;


  1. Register your site with GFC
  2. Copy-paste in the HTML/Script code for the member gadget into your index.html page (This is done by selecting that gadget and choose to let the GFC page render the code including your site id in a copy-paste box. not terribly hard either).
  3. Do nothing in particular, since the cookie will be send as part of each request to your server (even Ajax ones).
  4. In your server, receive the cookie (looking like this: 'fcauth19038466278488110'), and call GFC from the server, suing the cookie, to get some info about the user.


Using the following code, I make sure that the opensocial API is loaded and that I get a callback when it feels ready. It's not really necessary, but might be of use if you need to access viewer or owner info in your page before or without talking to the server.


   google.load('friendconnect', '0.8');



google.friendconnect.container.loadOpenSocialApi(
{ 
      site: 'xxxxxxxxxxxxxxxxxxxx',
      onload: function() 
     { 
    var fcauth = dojo.cookie("fcauthxxxxxxxxxxxxxxxxxxxx");
    console.log("gfc onload fcauth cookie was '"+fcauth+"'");
    if(fcauth && fcauth != "undefined")
    {                    
        try
        {                  
            dojo.publish("ab_cookie", [fcauth]);          
        }
        catch(e)
        {
            console.log("ERROR in opensocial access.."+e);
        }
    }
}
});



Naturally, you can use an Ajax call inside the callback function directly. I've put all of my logic inside a custom Dojo widget, and if you're not using Dojo, you can do whatever you want.

On the server, which I've coded using node.js and fab, my handler function look like this;

Game.prototype.getUserInfo = function(fcauth, id, cb)
{
    // http://www.google.com/friendconnect/api/people/@owner/@self?fcauth=<your fcauth>
    log.info("getUserInfo called with fcauth='"+fcauth+"' and id='"+id+"'");
    if(!fcauth || fcauth == "undefined")
    {
        log.debug("Skipping null/unathorized request");    
    }
    else
    {
    
    var google = http.createClient(80, "www.google.com");
    var request = google.request("GET", "/friendconnect/api/people/@me/@self?fcauth="+fcauth, {"host": "www.google.com"});
    request.finish(function (response) 
    {        
        response.setBodyEncoding("utf8");
        response.addListener("body", function (chunk) 
        {
            sys.puts("BODY: " + chunk);
            var echunk = eval("("+chunk+")");
            if(cb) cb(echunk);
        });
    })
    }
}


You might choose Python or PHP on the server-side, but I hope that the code is fairly simple to understand. I have the specific code that extract the variables somewhere else, but the function is called with a couple of parameters, where one is 'cfauth'. This is the contents of the cookie set by GFC in the page before.
What the function does is call the GFC server with the cookie, using a special URL which gives back user information about the person just signed in using the cookie. We get back stuff that look like this;

{"entry":{"isViewer":true,"id":"16646299100122442145","thumbnailUrl":"http://www.google.com/friendconnect/profile/picture/9aOJATlcddBMuphbZq6wdLLqvyJr39BwuR60j67nPGv6LO8O_V3xho7gIoeH2juRoEm7jAOdl6_4RK4QAv5aFqD0zzg3TUxVAAZehjEoaEVTjeML9zwRyDFklaql_MxAznquk-Yhm63-ihZtryfA_T3tAwhWv4Szl12A1tZ3xfAa1jAdrE3it5Tx-fAbBW_qPZ3EE4DfALqLKmWC9hqXoXy9wI3rqzoS67CkgsTcU3CJM70ua9Z6OkIpFx7zi3dIXfIFawbodmOhKQ5A7_LeGA","photos":[{"value":"http://www.google.com/friendconnect/profile/picture/9aOJATlcddBMuphbZq6wdLLqvyJr39BwuR60j67nPGv6LNGCV3xho7gIoeH2juRoEm7jAOdl6_4RK11H5aFqDmikrg3TUxVAAZehjEoaEVTjeML9zwRyDFklaql_MxAznquk-Yhm63-ihZtryfA_T3tAwhWv4Szl12A1tZ3xfAa1jAdrE3it5Tx-fAbBW_qPZ3EE4DfALqLKmWC9hqcx0XswI3rqzoS67CkgsTcU3CJM70ua9Z6OkIpFuyzi3dIXfIFawbodmOhKQ5A7_LeGA","type":"thumbnail"}],"displayName":"psvensson"}}

I hope this helps someone, and apologies for not giving out all of my code, which is in a bit of flux.

Thursday, February 11, 2010

[Swedish] rabatt till GTUG Stockholm medlemmar till Scandinavian Web Developer Conference 2010


?ui=2&view=att&th=12660e94d18e470d&attid=0.1&disp=attd&realattid=ii_12660e94d18e470d&zw  

Den 2 och 3 Juni går SWDC2010 av stapeln på Skandia-teatern på Drottninggatan i Stockholm. 

Konferensen för dig som vill lära dig det absolut senaste inom webb och mobilutveckling.

[Detta information har tidigare gåt ut till GTUG medlemmar, men är nu uppdaterat med mer rabatt och enklare biljettprocess]

De främsta internationella experterna inom Front-end utveckling, Mobil utveckling och JavaScript delar med sig av sina kunskaper.







DAG 1: Fokuserar på front-end utveckling och JavaScript
DAG 2: Fokuserar på programmering och utveckling av mobiltelefonapplikationer till framör allt iPhone och Android.

Du som har kommit på minst ett GTUG Stockholm möte får 875:- (25%) i rabatt på konferenspriset på 3500:- (ex.moms), alltså bara 2625:- för båda dagarna!

Erbjudandet gäller fram till den 15 Mars. För att använda dig av erbjudandet behöver du skicka ett mail från den epost-adress som är registrerad hos GTUG Stockholm till register@swdc-central.com
Som svar kommer du att få en engångskod som du använder under fältet "Coupons" på betalningstjänsten Stage HQ, som vi har länkat till från vår hemsida.

Mer information om konferensen finns att hämta på http://www.swdc-central.com

Bland våra 15 talare:

?ui=2&view=att&th=12660c45c7a9ce97&attid=0.1&disp=attd&realattid=ii_12660c45c7a9ce97&zw
Tom Hughes-Croucher - Technical Evangelist/Innovation Lead på Yahoo! och expert på Accesibilitet och Web standarder.
Talar om : Mobile Data: How to avoid the latency trap when using web services.


?ui=2&view=att&th=12660c5ca6b2152e&attid=0.1&disp=attd&realattid=ii_12660c5ca6b2152e&zw
Tom Blackmore har arbetat med geospatiell data hos hitta.se, varit projektledare för hitta.se's 3D-kartor, och håller en kurs i GIS på Mälardalens Unviersitet.
Talar om:  Handling spatial data on the web.


?ui=2&view=att&th=1266a6542dfcda0e&attid=0.1&disp=attd&realattid=ii_1266a6542dfcda0e&zw

Stefan Pettersson är konsult på Netlight AB som JavaScript/Front-End expert och har arbetat på några av Sveriges största sajter, bl.a. Aftonbladet.se.
Talar om: Developing Large-Scale JavaScript Websites.

Se http://www.swdc-central.com för en komplett lista över talare!

Monday, February 1, 2010

GTUG Meeting January 2010


The January meeting got out of hand early on, as I got a semingly inocuous email message from a GTUG member asking if anyone from Google would be there to show the recently unveiled Nexus One phones.

I asnwered that I thought it unlikely, but that I would give it a shot, and then forward the request to Tommy at Google Sweden.

Not many minutes passed before I got a reply where he positively guaranteed that he or someone else would be present at the meeting, just the next week.

When people got to know about this, we had a deluge of registrations, and for the nth time I became really tired with LinkedIn's feature-lack of limits for the otherwise hadny events that I used to use for GTUGs. In all, 93 people registered on the double machine check-in me and Ottoboni provided for the evening.

First out was Ingemar Resare who talked about Google Apps integration, then came Tommy and Serge from the Google Office and totally winged an imprompty Nexus One presentation using their personal ones and answered hudnerds of questions.

I had to break somewhere in the possible middle of the question train since people started getting restless, eyehing the sandwhich trays (OK, so I was hungry, sue me :)

The food break was on the other hand a natural time for people to get to thold and try out the Nexus One themselves, with a Sandwhich or beer in the other, possibly both.

To the left here is Tommy describing the Nexus one's features.

For our last number, we got Peter Sönnergren who did an outstanding App Engine + Java talk which led to a lot of questions and I think perhaps the first real walkthrough for many present.

He was promptly talked to by the arranger of JFokus (which was due the very next week) and it turned out that he not only appeared on stage (together with Patrick Chanezon, I think) and also took over a Groove on App Engine session, sicne the Groovy guy had falled unexpectedly sick at the day of the talk. Talk about pivoting!

Gotta keep this short, but now you know what was going on.  And actually, the next GTUG meeting is this Thursday - completely packed as well, since we will both host Spotify's Anders Bond who will talk about their Android development process, and as a little extra number..

An Actual Android Developer Codelab with breakout coding sessions and everything led by Reto and Billy from the Google Developer Advocate Android team. Check out their schedule here. Sweden is just part of the big show that's going down right now.

But we'll have a meeting in March as well - at the Google Sweden Office (allegedly).


Cheers,
PS