JS Facebook Auth - Google Sheets Backend

About a month ago, a friend of my tweeted about a guy named @levelsio and his live streaming of himself building a js/php Web App called hoodmaps. I was utterly glued to the videos he made and it inspired me to build something of my own. Then more recently, another friend of mine was discussing how he could have a whole group of users update a Google Spreadsheet without being able to interfere with each others data. Perhaps this was something I could build!?

The Use Case Essentially, friend #2 was trying to find a way of tracking which players were available for each round of the Cricket season. For example; Joe is going to a wedding in November and won’t be able to play week 2 of round 4. Mike is away the whole of January skiing in Japan. The reason this is important is planning and knowing where the gaps are going to be in a season. With 4 teams and 60 or so players, it is important to plan ahead.

The Problem We use a system known as MyCricket for tracking Registration and Player stats. Unfortunately, this system doesn’t expose an API to any of their information so our source of truth is limited to a csv export. We do however use a private Facebook Group to communicate with our players.

How can we track this information in a shared Google Spreadsheet without players screwing around with anyone elses info and only updating their “row” in the sheet?

The Solution Facebook js API for authentication, Google Sheets php API for data storage!

How it works Both Facebook and Google have awesome documentation and example on how to their API’s. They really just need to be understood and then tweaked for your specific use case.

1) User clicks on the link to the App via the Facebook Group (Authentication) 2) API checks that they are an authenticated Facebook user, then if they have allowed the App to access their Public Profile (Authorisation). 3) Once they have allowed the App to view their Public Profile, the FB.api does a callback to your page with a