Things I learned writing a Facebook Canvas App

  • 11,575 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
11,575
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
0
Comments
0
Likes
13

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • - My name is Carl\n- Prog for 25 years :(\n- Defensio, security suite for the social web\n- first time in a long time i don’t talk about D\n- Working on a new project\n - FB app\n - Social Craigslist on Facebook\n - People interact and communicate around items for sale\n - Not ready to disclose more\n - Still testing a bunch of things before I call this a startup\n\n- While Defensio Defensio\n - Facebook app for protecting pages\n - Little exposure to the FB API\n - Just heard about it mostly\n\n- Been working on this new project for ~3 months\n- And one thing I found is that working with...\n
  • with Facebook API\n\n
  • IS A PAIN IN THE ASS\n- API constantly changes\n- API is slow\n- API breaks\n- API is buggy and they don’t care\n- etc\n\n
  • - However, the fact is that INTERNET LIFE IS FACEBOOK\n\n- 10 years ago, going on the Internet meant the blue E\n- Now it’s FB\n\n
  • The truth is\n- Most people visit few other websites \n- Spend hours/day on FB, more than on any other sites.\n- Probably more than every other sites combined\n- How people use it:\n - Photo sharing\n - Email\n - Chat\n - Romance\n - Bragging\n - Stalking\n\n- See why FB is very powerful\n\n- Dave McClure says that for a product to be successful, it has to: Make you famous, Get you laid or Make you rich\n - Facebook is all 3\n - Famous: bragging, showing off, self publicity\n - Laid: people hook on (and break up) on FB all the time\n - Rich: FB is the perfect medium for businesses to engage with their customers\n\n- I don’t know of any other platform that can do all 3 so well.\n- Anybody here ever got laid on Twitter? Yeah. I rest my case.\n\n- That’s why having your web presence inside of Facebook or at least well integrating with FB makes sense.\n - everybody’s there\n - Ppl don’t want to leave Facebook\n - Free eyeballs and traffic\n \nBut it’s a pain in the ass.\n\n\n
  • The project I’m working on is a CANVAS APP\n\nJust an iFrame\n\nThis is the biggest problem I’ve encountered, causing most of the issues\n\nBrowsers react differently\n\nVery few social interaction so far\n\n\n
  • - FB does this for security reasons, mainly to remove the http-referrer header\n- Very problematic for RESTful apps\n- Rails: HTTP verbs are meaningful\n- How many familiar with Rails?\n\n- Path will be useful later\n\n\n- Might be tempted to resort to all kinds of hacks\n- Solution is pretty simple.\n
  • - FB does this for security reasons, mainly to remove the http-referrer header\n- Very problematic for RESTful apps\n- Rails: HTTP verbs are meaningful\n- How many familiar with Rails?\n\n- Path will be useful later\n\n\n- Might be tempted to resort to all kinds of hacks\n- Solution is pretty simple.\n
  • - FB does this for security reasons, mainly to remove the http-referrer header\n- Very problematic for RESTful apps\n- Rails: HTTP verbs are meaningful\n- How many familiar with Rails?\n\n- Path will be useful later\n\n\n- Might be tempted to resort to all kinds of hacks\n- Solution is pretty simple.\n
  • - Ruby Gem\n- Takes POSTs and convert them to GETs for Rails\n- Also useful for authentication\n\n- My fork\n\n
  • - GEM also useful for\n - simplifying authentication\n - injecting facebook scripts\n
  • - When FB post to our app, a signed JSON data structure is sent to our app\n- every single time\n- This info contains info about authenticated user (on FB, and/or with your app)\n\n- but not if our links don’t have target = _top\n- url in url bar never changes\n\n\n
  • GEM CODE\n\nrack-facebook-signed-request gem exposes the signed_request to our Rails app\n\n- original in facebook.signed_request\n- decrypted in facebook.params\n\n
  • Explain code\n\n- facebook.params is a hash containing\n - fb uid\n - oauth_token\n - user full name\n - etc depending on permissions given by user\n\n- original in facebook.signed_request\n\nAlso use OmniAuth for FB permissions\n\n
  • - Can’t rely on cookies in iFrames\n--- click troll ----\n- Mostly on IE. Third-party cookies DISABLED for most users\n - Explain 3rd party cookies\n\n- Doesn’t seem to be the default, so don’t know why\n\n- Impossible to keep a client-based session open\n- Authentication becomes painful\n\n
  • - Another reason for no cookie in iframe: P3P\n- Again, IE\n\n
  • One of those things that will take you days to figure out if you’re not familiar with it\n\n
  • *autotroll*\n\n- Explain P3P (header, privacy related)\n- This is the thing Google and Facebook got in “trouble” for recently.\n- P3P such a stupid broken security mechanism that I personally have NO problem working around it. like most people do.\n\n- After writing a canvas app, you’ll hate IE at least 576% more. guaranteed.\n\n
  • - Sets the P3P header for every requests\n- Removes it on 304 Not Modified, and remove cookies\n\n- Used it for Defensio for a few years and it worked pretty well\n\n\n
  • - I do keep a session to make things easier when cookies are enabled\n\n\n\n\n\n---------- NO -----------\n- But when not I do:\n - redirect to apps.facebook.com/my-app \n - session in javascript variable\n \n
  • - I do keep a session to make things easier when cookies are enabled\n\n\n\n\n\n---------- NO -----------\n- But when not I do:\n - redirect to apps.facebook.com/my-app \n - session in javascript variable\n \n
  • - When no session and need to figure out who the user is\n\n- Redirecting to the iframe will cause Facebook to POST a signed request to our app\n\n- Very slow\n - reloads the iframe every time\n\n- The workaround for the workaround is to\n
  • Similar to PJAX (github)\n\n- Explain PJAX\n\nAjax requests won’t send session cookie if cookies are not enabled\n
  • The biggest hack in the history of mankind\n\nEncrypted session in javascript hash\n\nJust like Rails does CookieStore, but instead of passing the session around in a cookie, we pass it around with Javascript\n\nWhen a page loads, it has its cookie data in the <head> of the page\n\nThis is transparent for the server-side\n\n
  • The biggest hack in the history of mankind\n\nEncrypted session in javascript hash\n\nJust like Rails does CookieStore, but instead of passing the session around in a cookie, we pass it around with Javascript\n\nWhen a page loads, it has its cookie data in the <head> of the page\n\nThis is transparent for the server-side\n\n
  • - one of the most annoying problems\n- back button always goes back to previous page on FB\n- only way around that. AJAX! Use PushState\n- Explain pushstate\n- click troll --- Not supported in IE\n\n\n
  • - one of the most annoying problems\n- back button always goes back to previous page on FB\n- only way around that. AJAX! Use PushState\n- Explain pushstate\n- click troll --- Not supported in IE\n\n\n
  • \n
  • CJAX, as in Carl JAX :)\n\n- History.js and hash-bang urls are very broken in iframes and IE\n- Can’t really rely on that.\n- On IE, each CJAX link actually in window.top.location \n- Slower but works. Punishment for using a crappy browser.\n\n- To make this work, just add the .cjax class on A tags\n\n\n\n
  • - haven’t done much frontend development in the last few years\n- bug bite me in the ass\n- ie fails when developer toolbar is not open\n\n
  • DEMO\n
  • \n
  • firefox 11\n

Transcript

  • 1. Things I learned writing aFacebook Canvas App Carl Mercier @cmercier github.com/cmer
  • 2. Painful
  • 3. FACEBOOK IS TAKINGOVER THE INTERNET
  • 4. A CANVAS APP
  • 5. A CANVAS APP =APP IN AN IFRAME
  • 6. EVERY GET IS A POST
  • 7. EVERY GET IS A POSTGET http://apps.facebook.com/my-app becomes POST http://myapp.com/
  • 8. EVERY GET IS A POSTGET http://apps.facebook.com/my-app/foo becomes POST http://myapp.com/foo
  • 9. rack-facebook-signed-requestmy fork: github.com/cmer/rack-facebook-signed-request
  • 10. AUTHENTICATIONWITH SIGNED_REQUEST
  • 11. P3PPRIVACY PREFERENCES PROJECT
  • 12. Painful
  • 13. P3PPRIVACY PREFERENCES PROJECT
  • 14. P3PPRIVACY PREFERENCES PROJECT
  • 15. rack-p3pgithub.com/hoopla/rack-p3p
  • 16. HOW DO I KEEP A SESSION WITHOUT COOKIES?
  • 17. HOW DO I KEEP A SESSION WITHOUT COOKIES? YOU CAN’T SO YOU WORK AROUND IT.
  • 18. window.top.location = "http://apps.facebook.com/my-app/foo";
  • 19. AJAX EVERYTHING similar to PJAX http://pjax.heroku.com/
  • 20. BROKEN BACK BUTTON
  • 21. BROKEN BACK BUTTON
  • 22. History.js PJAXgithub.com/balupton/History.js github.com/defunkt/jquery-pjax• Very extensive • Very simple to implement• Fixes many browser bugs • Notmuch control on what happens• Complex to implement • No support for IE• Supports IE with hash-bang urls• Continuously improved
  • 23. Rolled out my own based on History.js but with a PJAX feel to it. CJAXSource at gist.github.com/2008643
  • 24. Beware of console.log Source at gist.github.com/2008671
  • 25. fb-canvas-rails github.com/cmer/fb-canvas-rails All the concepts from this presentation bundled in a demo app!See it in action at http://apps.facebook.com/fb-canvas-rails
  • 26. socialization github.com/cmer/socializationFollow, Like and Mention in a Gem
  • 27. Thanks!Carl Mercier c@cmer.me @cmercier