Wednesday, June 6, 2012

Secure Facebook Apps on Google App Engine

A few weeks ago, I asked a friend of mine if he'd mind testing a Facebook app, (MapMyFriends) that I was working on. It's a simple little app that maps the locations of your Faceboook friends on a Google Earth plugin. the app has grown and now it will fly you through a global tour of all your friend's photos displaying them on the globe where they were taken... But I digress.

My buddy came back with the rather unexpected response that my app wasn't setup for secure browsing on Facebook and he couldn't see it at all. This led me into a few days of work to make the app secure. I've included my notes below in case you run into the same issues I did.



First: It's not difficult
You'll find lots of documentation on OAuth 2.0 and user authentication, but at the end of the day you probably don't need it. You've already setup account login however you want it in Facebook right? If all you want is an application that communicates back to the Google App Engine Servers over a secure connection, all you need is to add the following lines to your app.yaml file for each address that you would like to serve over a secure connection.

- url: /fbapps/stechtest
  script: main.py
  secure: always

I made a separate address for my secure connections just so the unsecured application wouldn't consume the resources necessary for SSL unnecessarily. Within my main.py file, both the normal and the ssl addresses are routed to the same handler like this.

                                          ('/fbapps/techtest', FBTester),
                                          ('/fbapps/stechtest', FBTester),


This is important: The handler wasn't modified at all. All of the SSL work is handled outside of your handler. That's it, you're done! Except for making sure the scripts you call in are also secure.

Securing Javascript Libraries
When I converted my app, I performed all the above steps, set my Facebook account to secure browsing and went back to my site. Upon arriving I received the message "This page has insecure content". I selected the recommended choice of not loading the insecure content and found that the Google Earth plugin and the Google Adsense ads didn't load. Fixing the plugin was easy. I just referenced the secure version of www.google.com/jsapi, so:

http://www.google.com/jsapi?key=

became

https://www.google.com/jsapi?key= The map reappeared on my next load.

For now your Google AdSense code will always show up as insecure. You can read more about it at:
http://support.google.com/adsense/bin/answer.py?hl=en&answer=10528

If you're using Google Maps instead of Google Earth check out the following link for the path to the secure libraries:

http://googlegeodevelopers.blogspot.com/2011/03/maps-apis-over-ssl-now-available-to-all.html
Picture of the Day
From 6/6/12

No comments: