<c:choose> <c:when test="${user.likes}"> Share this with your friends </c:when> <c:otherwise> Send me feedback. </c:otherwise> <:choose>
Part 8: Facebook Authentication (Canvas + Web Application)
If you're a curious developer, as I suppose you are, then you probably are always on a quest for new APIs and new ways of making your work easier to accomplish. Facebook has a platform to publish your work and expose it to millions of potential users. It provides a range of options from low-level (low-level for an experienced developer like you) badges and widgets like those you can find scattered around this blog post to full-fledged database persistence, JSON-based web services, and the like (pun intended ;D).
In this part of the tutorial i'll try to explain my <adjective related to pain here> experience in hopes of preventing others from falling in the same pits. When i started working on the integration of a website with the Facebook platform, the process of authentication and app authorization was in the process of change. My experience was not the greatest because of all the rapid changes happening to the authentication and authorization flow needed for your application to communicate with the Facebook servers to request user info and do all the nice things you probably have in mind to provide a great user experience.
There are 3 ways of integrating with the Facebook platform: as a canvas app, as a web application, or as a standalone application (a.k.a. desktop app). I was integrating a website so the 3rd option would be left for a future development cycle, if at all. After going through the documentation provided by Facebook I was wondering where to find an Aramaic translator, it's understandable (NOT) that they didn't have a stable design at the time as they were going through the authentication process change (they were changing to OAuth2.0). So I decided to go with the flow and work the Facebook way (trial and error until something works). I took the little that could be salvaged of the documentation and started coding according to their explanation of what needed to be done, and all the interaction between the different actors.
After a couple of days working with the code I got to an acceptable solution, involving a filter, a servlet and a jsp. I decided (more like deciphered, amirite?) the phase in the authentication process in the filter, did the heavy-lifting in the servlet and then provided the view in the jsp. As time went by the solution broke with all the changes going on on the FB side of the process so i decided to go through the documentation again and to design a solution flexible enough to withstand the changes and that provided for future tweaking as it evolved. Always keep that in mind in your designs, evolution and change.
The final solution involved just a filter which does all the heavy-lifting and would act as a Facebook client. Now the part you're looking for is how to organize the workflow. After reading the documentation again I noticed it had changed and it now provided a few hints to common pitfalls (some I found along the way) and I decided to dissect it. A user arrives and it can view your website through the FB canvas or through the regular Internet. The way to know which version the user is currently viewing is to look for the Signed Request parameter. After you know the version then you know how to request for authorization from the user to access their information. In the canvas version you can't simply redirect the user to the authorization screen because the screen is going to be inside an iframe and a bug (hopefully in the future it'll be solved) prevents the auth prompt from showing up, so I decided to do an ol' "window.top.location=" to redirect the user to the relevant location. This introduces an issue, you need to pass a redirect_uri for the auth prompt to redirect the user after he/she has made the choice to allow us to access (or not) their information. I solved this by appending a "source" parameter at the end of the redirect_uri: source=canvas or source=site.
In the next section we'll continue dissecting and solving the small parts involved in integrating a website with the Facebook platform.
If you have any suggestions, ideas for full blown system integration (sb) or comments, leave a message below.
No comments:
Post a Comment