Posts Tagged JavaScript

Facebook, the Open Graph and OAuth 2.0

So after playing with Twitter OAuth, I played with Yahoo!’s and now Facebook. So seems like OAuth is the new cool kid in town.

Using the OAuth AS3 library

When you are dealing with OAuth 1.0 (Twitter, Yahoo!), there is this pretty nifty library for ActionScript 3 simply called oauth-as3. There is not much documentation on how to use it but if found this pretty good example for using it in conjunction with AIR. The user flow is a bit different when you are integrating OAuth in a website so you have to tweak it a bit, but in the end it, does the heavy lifting for you. The things you have to consider for a website, is that the user has to go, in some way, to the website of the API you are going to be using to authenticate (input his user name and password) and to authorize(say that your application has the right to access the user’s data) your application. That is the part that always bugged me about OAuth, it kinda get the user out of your experience. I gave it a lot of thoughts and I really liked the Facebook Connect way (at some point in time) where it was using an iFrame pop-in. That was the neatest because you didn’t have to care about the Pop-Up blockers and it looked pretty good. The thing is, it kinda defeat the purpose of OAuth. Since in an iFrame pop-in you don’t see the url in a location bar (as opposed to a full fledged pop-up), you could basically reproduce graphically the interface of whatever service you are using and just steal the usernames and password. That is why you have to rely on Javascript and pop-ups. This part of the user flow is not covered in the oauth-as3 library because it is not ActionScript.

While playing with Yahoo!’s OAuth and Facebook’s, I kinda merged two ways of managing the Javascript part. Yahoo! provided code that was pretty good at creating the pop-up but it wasn’t that great at getting back the information from the service. So I edited it and I think I ended up with something that is pretty solid. Here is my Javascript file and my callback page.

OAuthScripts

Also, the oauth-as3 library is relying on the class mx.utils.UIDUtil to generate a unique identifier as a parameter for one of the request. As you can see from the mx prefix, this requires that you compile the Flex framework with your project. Which is kinda a bummer since it is the only dependency to Flex. I found this class on the RGBBlog that provide the same functionality but without requiring Flex. I had to tweak it a bit because it is not really made as a library (it doesn’t have a package and extends Sprite) and I have made it available for download here.

GUID.as

Facebook and OAuth 2.0

So during April 2010, Facebook announced the Open Graph and with it a whole new API but also a new way to authenticate and authorize. It was to use OAuth 2.0, which is a version of OAuth that is still a draft. Well all we learned before (OAuth 1.0) kinda doesn’t work here anymore. But OAuth 2.0 is a bit simpler, supposedly requires less exchanges. This is all cool and all, but Facebook sticks to its guns and provide shitty documentation about the process; well half shitty, they provide good documentation for half of the process but for the other part it is as if the guy was tired of writing documentation and wrapped it up very quickly, leaving us without enough clear information to implement it.

Anyway, it all good, this guy, Jozef Chúťka, figured it all up. His code is pretty good and the example gives you everything you need to get started. The only part that I don’t like is how he manages the pop-up (he writes the Javascript inside of the ActionScript, I don’t know it doesn’t feel right, plus it doesn’t manage placement of the pop-up (x and y)), so I used the same as before. But his callback html page was pretty good. So basically when you have your access token you can call any of the Open Graph API urls and it will work. You have to be careful, for some of the urls that returns images, Facebook does a redirect, so you might have to deal with some cross domain issues. Here is how I resolved mine.

//This makes sure that the crossdomain policy is read and you can access the profile picture
Security.loadPolicyFile("http://profile.ak.fbcdn.net/crossdomain.xml");

Also know that if you add that line of code twice, you are going to crash the Flash Player. For this library to work your application in Facebook must absolutely be set as a desktop application.

So that pretty much sums up what I have been doing with OAuth.

, , , , , , , , , , , ,

1 Comment


Why Flash is not disappearing

All the debate about Apple vs Adobe really got me thinking lately. Last night , I woke up at 4 in the morning with the idea for this post. It suddenly hit me. Most of the latest trends on the web happened because it was allowed by Flash. If you think about 3D, Augmented Reality and ChatRoulette; all of those could not have happened if Flash didn’t exist and are currently not possible to implement using HTML5.

3D

3D really picked up when Papervision3D ported there library from ActionScript 2 to ActionScript 3. ActionScript 3 made it faster so you could actually do some interesting 3D without automatically killing the user’s CPU. Right after that we saw a wave of Flash website all using 3D in them. I’m not saying that was good; plenty of sites used the 3D for no reason at all except for the fact that it was cool. Now that the hype on 3D as dimmed down, we see better uses of the library. My point is that Flash opened up new possibilities. There are now a few more libraries for 3D (Away3D, Sandy3D, Five3D, etc) and I don’t think those would be possible with the current state of javascript. Right now everybody speaks about HTML5 and the Canvas but, boy, JavaScript is so not on par with ActionScript 3. jQuery makes it better but still. Here is a good example of a site that uses 3D.

3D models in Flash

Augmented Reality

AR was all the buzz last year and 3D is what really made it possible in the browser. AR is a concept that has been around since the 90s but it never picked up until it came to Flash because it made it accessible. For AR you mostly need 3D and a camera. The webcam is easily accessible in Flash and since Flash is so ubiquitous. Now video is possible with HTML5 but webcam won’t happen; maybe HTML6. So as AR evolve we will see tons of new applications coming our way.

GE augmented reality

ChatRoulette

Now ChatRoulette is really interesting. I don’t know if it is going to last or if it is going to disappear or change, but it definitely showed an interesting facet of the internet ( not talking about the impressing number of male exhibitionists out there). ChatRoulette could use the webcam and a media streaming server, but that is not what is happening here. Already all that is not possible in HTML5. What ChatRoulette is using is the new P2P service Stratus by Adobe integrated FlashPlayer 10. That is a new feature in the Flash player that most people are not aware of. What it does is that it connects users directly to send the video without going through the server ( in this case the ChatRoulette server) so it save a lot of money in bandwidth. Is this a cool feature? fuck yeah. Is this close to being included in HTML5? Not in years.

Chatroulette interface

The general conception is tying Flash to video, but that is not all that Flash does right. 3D, AR, and P2P are just some examples I took to illustrate the fact that Flash is pushing the web forward; I can easily think of many more: microphone access, Pixel Bender, ActionScript 3 (so much more fun to work with than JavaScript), AIR, etc. And that is just what is available right now in Flash Player 10. I can’t wait to see what will be available in the future.

, , , , , , , , , , ,

4 Comments