Authenticating with Facebook and Google Apps

OAuth2 Authentication for Facebook with Google Apps Script

Hi, here is a quick run-down on how I implemented OAuth 2.0 authentication via Facebook with my Google site using Apps script.  In the end it was all fairly straightforward and if anyone wants to see it in "action" you can visit my site at www.socialsamplr.com (shameless plug there).  

In the end, it was reasonably straightforward, so here goes.

Step 1 - Create your Facebook app

To do this just follow the basic guidelines at developer.facebook.com.  Note, to enable your facebook authentication to work for anyone using your site, your site will need to provide links to pages covering your privacy policy, contact details etc. about your site.  For developer testing you can run in a "sandbox" mode so won't need to provide these.  

Once done your Facebook app will look something like this.

This will then provide you with the Client ID and Client Secret you need for authentication.  Note the URLs you provide will need to match those for your site.

Step 2 - Create the authentication link in your site

To do this you need to create a Google Apps Script widget to embed in your site.  The simplest way is to create an anchor link with your client id and a unique session string which you will need to create.  This is to prevent other sites attempting to authenticate back to your site by using your session string.  In my case I create an encrypted string with some random characters appending to a date value set to the system time (and expire the string after 2 hours).  This is then stored in the script DB so when Facebook redirects back, I can use it to create the account.  The code is as follows:

The underlying Authentication.createFacebookSession() code is as follows.  Note this is the string that will be checked when it's redirect back to from Facebook on authentication.

Step 3 - Create the script for the redirection page on your site

Now that you've presented the link to the user on your site to authenticate via Facebook you need to create a widget for the page you've passed to Facebook as your redirection page (see in the link created in the anchor in step 2).  Note this gadget will need to accept the parameters passed in through the site page.  This is done through providing the arguments in the doGet() function for the page.  The first thing to process is the state parameter (the same one you created in step 2) so that you know the redirect is a valid one from your site.  Once you have these you just cycle through the parameters to get back the necessary access token from Facebook if the user has approved the request and then the user details.  Code is as follows.

Getting the parameters passed back in through the page.

Amendment to screenshot below - the following line (sorry the code was edited slightly to make it more readable and I introduced the error - doh!):

var facebookUserName=getFacebookUserName(facebookUser);

should read:


var facebookUserName=getFacebookUserName(facebookUserDetails);

And the functions being called are as follows.

And that's pretty much it.  Enough details there to get OAuth2.0 for Facebook working on your Google sites.  One note is to say the pages you have this access on will need to be under the https://sites.google.com domain (not a custom domain).  For my site I've just put most of my site under the custom domain and these specific pages in the sites.google.com domain and the feedback from most people so far is pretty positive.  There is an outstanding issue around custom domains for websites (546) to track if there's any changes here.

Any other questions, just contact me on Google +.

Cheers.

Daniel

Footnote

Just a quick note - apparently issue 546 is now fixed which is great news.  This means the authentication should be able to take place with the custom domain and not site.google.com....  I'll test this week and confirm it works.