Posts Tagged Facebook

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


Playing with OAuth and twitteroauth

As some of you might know, on August 16th 2010 (it was June 30th at first, but they moved it because of the World cup), Twitter will be shutting down its basic authorization in favor of OAuth. Well Facebook also announced that they would be soon using OAuth. Google and Yahoo! use it too. Looks like it is a good time to learn it.

OAuth, contrary to what some might say is not that easy of a process. It involves a couple more steps than basic authorization. But what it gains from that is trust. The user never has to enter its username and password on your site. My problem with it is that I find that it breaks the user experience because it usually redirects the user’s browser to the website of which you want to use the API, so that the user can input its credentials and that they can allow your application to use data from the API. If you are not familiar with OAuth, here is a great beginner’s guide.

Here is a picture of all the steps involved in the process:

OAuth process diagram

Now what I wanted to write about was the twitteroauth library for PHP by @abraham. I tried to try the other OAuth PHP library that is listed in the Twitter documentation but I couldn’t figure out anything; they talk about Two-Legged OAuth and Three-Legged OAuth, but I have never seen that anywhere. twitteroauth on the other hand is pretty simple to understand. By reading the documentation and starting with the example provided in the source code, I was able to implement what I wanted.

Now I wasn’t the one who created the application on Twitter (which you have to do before you get started with code), so there was a couple of settings that weren’t right at first. You can set if you want your application to be Read-only or Read  & Write. Obviously if you want to send Tweets using your application, you will need it to be set to Read & Write. Also in order to use this library you must set your application as a Browser application (as opposed to Client which will not work). I just thought it would be good to list those here so that others (and I) don’t spend the half hour I lost trying to figure this out.

Here is another really interesting tidbit: once you create an authorization token, Twitter will never destroy it. This is not the same for all APIs (I know Yahoo! will expire the token after some time). So once you lead the user through all of the OAuth steps, you can keep the token and use it forever so that the user don’t have to go through the steps again, which is very useful for mobile and desktop apps. It also opens up possibilities for other stuff too, which I will show you eventually, if my current project ever finishes.

Well that is is for now, there will be more on OAuth soon as my next project also connect to another API that uses OAuth.

, , , , , , ,

7 Comments


Why I like the Facebook like button

As you might know, Facebook changed how external sites interact with it. One of those changes is that external sites can now put like buttons on their site (Levi went a bit overboard with it). That is a huge change. Before, you could only use share buttons, but sharing and liking are two really different things. You only need one click to like, but you need at least 2 clicks to share, plus you need to check the text that you are going to share. That makes the implication necessary by the user smaller and it increases the probability that they will take action.

The Like Button

What does that mean for us, bloggers (or any content provider)? Well it means more traffic on our sites because more people will link our articles by liking them. Just as an example, I added the like button on this blog a days ago. I didn’t think it would do anything because my blog is very technical and is not something I thought one would share on a social media site like Facebook because it is more personal. But I am very surprised by the results. Some people are pressing the like buttons which results in traffic for the blog. Not much, but it is still great because it was so easy to add.

So yeah, I really like the like button. So much that I was looking for a like button to like the like button only to find none! Well no problem, I just did it myself with the new Facebook social plugins it only took 1 hours and I had a Facebook page for the like button and you can now like it and comment on it. So here you go show your love for the like button!

, , ,

10 Comments


Show Your Pride: Just Moo

I’m happy to announce that we just lanched today a campaign for the Dairy Farmers of Canada. My part in this was to do develop the microsite, but their was an entire team working on the facebook application, the banners, the widget. We worked really hard on this and I think this is going to be a sucessfull campaign. I went on again using PureMVC even if this was more a website than an application and I can say that I really don’t regret it. Even if we kept adding features, the project grew correctly and I could go back in the code in a month and I would still be a happy developper and understand where everything is. Here is a list of the features / libraries used in the project:

  • PureMVC
  • SWFObject from Google hosted libraries API
  • TubeLoc (I had a few problems using it at first, but I could do it way faster now)
  • The microsite resizes to fit smaller resolutions
  • TweenMax (I am going to use the colorMatrixFilters everywhere now)

One of the goal of the campaign is to get the most people clicking on a button on June 3rd to make a world record. You can click on the button from facebook, banners, the microsite and a widget like this one:

Congrats to the entire team at Twist Image who worked on this. So check it out: The Great Canadian Moo.

And I forgot on June 3rd, go back to the microsite and go beserk on the moo button!

, , , , , , ,

3 Comments