Email
Like
Liked ×
Save
Private Content
Embed
Loading embed code…
We have emailed the verification/download link to "".
Login to your email and click the link to download the file directly.

To request the link at a different email address, update it here. Close
Validation messages. Success message. Fail message.

Check your bulk/spam folders if you can't find our mail.
Loading

+ Follow

Things I learned writing a Facebook Canvas App

by Carl Mercier

4,505 views

Accessibility

View text version

Upload Details

Uploaded via SlideShare as Apple Keynote

Usage Rights

File a copyright complaint

1 Embed 2

http://www.hanrss.com

Statistics

Likes: 11
Downloads: 0
Comments: 0
Embed Views: 2
Views on SlideShare: 4,503
Total Views: 4,505

- 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 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 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

11 Likes

Marco Dela Torre at Coastal Training Technologies 1 month ago
Simone Cociancich, Developer at CubeYou 1 month ago
Utente Faccia at Top Consulting & Services srl 1 month ago
Igor Kapkov, Web-developer at OSCompany 3 months ago
Jayesh Mori, Software engineer at Home Sport Rehab, Inc. 3 months ago
Danilo Resende at CERCOMP UFG Tags facebook 6 months ago
Tony Amoyal, Senior Web Application Developer at Self Tags facebook-canvas 6 months ago
MatchFWD at MatchFWD 6 months ago
Tadashi Sawada, CTO at Life2Bits Tags facebook 9 months ago
Shaliko Usubov, Managing Director at H2 Russia 9 months ago

Things I learned writing a Facebook Canvas App Presentation Transcript

Things I learned writing aFacebook Canvas App Carl Mercier @cmercier github.com/cmer
Painful
FACEBOOK IS TAKINGOVER THE INTERNET
A CANVAS APP
A CANVAS APP =APP IN AN IFRAME
EVERY GET IS A POST
EVERY GET IS A POSTGET http://apps.facebook.com/my-app becomes POST http://myapp.com/
EVERY GET IS A POSTGET http://apps.facebook.com/my-app/foo becomes POST http://myapp.com/foo
rack-facebook-signed-requestmy fork: github.com/cmer/rack-facebook-signed-request
AUTHENTICATIONWITH SIGNED_REQUEST
P3PPRIVACY PREFERENCES PROJECT
Painful
P3PPRIVACY PREFERENCES PROJECT
P3PPRIVACY PREFERENCES PROJECT
rack-p3pgithub.com/hoopla/rack-p3p
HOW DO I KEEP A SESSION WITHOUT COOKIES?
HOW DO I KEEP A SESSION WITHOUT COOKIES? YOU CAN’T SO YOU WORK AROUND IT.
window.top.location = "http://apps.facebook.com/my-app/foo";
AJAX EVERYTHING similar to PJAX http://pjax.heroku.com/
BROKEN BACK BUTTON
BROKEN BACK BUTTON
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
Rolled out my own based on History.js but with a PJAX feel to it. CJAXSource at gist.github.com/2008643
Beware of console.log Source at gist.github.com/2008671
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
socialization github.com/cmer/socializationFollow, Like and Mention in a Gem
Thanks!Carl Mercier c@cmer.me @cmercier

Things I learned writing a Facebook Canvas App

by Carl Mercier

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 2

Statistics

Things I learned writing a Facebook Canvas App Presentation Transcript