Question

I maintain an old web app written in C++ & javascript. I have been asked to add Facebook, Google and Twitter login authentication.

The Facebook bit went well. I found some simple javascript code on Facebook’s developer site http://developers.facebook.com/docs/reference/javascript/ which I added to my login page. I then altered the C++ login cgi program to recognise callbacks from Facebook, and to log the user in using their email address (which is already held on file).

I’m stuck with the Google bit. At first I thrashed around on the Google site, but I couldn’t find any simple examples. I was directed to the libopkele C++ library, but I can’t find any instructions on how to use it (and I suspect it is not what I need). Then I found something called Google Friend Connect http://code.google.com/apis/friendconnect/docs/code.html (which, unfortunately, says it is depreciated). That contained a nice javascript example, which I put into my website. It provides a button that says “Sign in”, and when you click it, it pops up a window asking for your email address. You fill in the address, it says “Connecting to your IDP”, then “Redirecting to your IDP”, then my post-login page appears in the pop-up window.

Obviously I don’t want that – I want it to appear in the original window where they clicked the “Sign in” button.

Here is my javascript from the login page:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/googleapis/0.0.4/googleapis.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/jsapi"></script>
<script type="text/javascript">
  google.load("identitytoolkit", "1", {packages: ["ac"], language:"en"});
</script>
<script type="text/javascript">
  $(function() {
    window.google.identitytoolkit.setConfig({
        developerKey: "<I put my developer key here>",
        companyName: "<I put my company name here>",
        callbackUrl: "http://www.mywebsite.com/cgi-bin/login.cgi",
        realm: "",
        userStatusUrl: "http://http://www.mywebsite.com/cgi-bin/loginstatus.cgi",
        loginUrl: "http://http://www.mywebsite.com/cgi-bin/login.cgi",
        signupUrl: "http://http://www.mywebsite.com/cgi-bin/login.cgi",
        homeUrl: "http://www.mywebsite.com",
        logoutUrl: "http://http://www.mywebsite.com/cgi-bin/logout.cgi",
        idps: ["Gmail", "GoogleApps", "Yahoo"],
        tryFederatedFirst: true,
        useCachedUserStatus: false
    });
    $("#navbar").accountChooser();
  });
</script>
<div id="navbar"></div>

I find my userStatusUrl is never called. The callbackUrl is called, but I am not sure what to return from it. It seems whatever I return is merely displayed on the page. I saw a passing reference somewhere to returning a json item containing {“registered” : true}, but that didn’t work either (here is the exact text I returned from my cgi script):

Content-Type: application/json
Content-Length: 20

{"registered" : true}

Any help, or pointers to a nice simple implementation appreciated. (A PHP script that uses external libraries would not be much help!)

Answer 1

In the end, I used rpxnow.com, which provides easy to use login via a selection of providers using a single, simple, well-documented interface.