facebook
Facebook Authentication/Login Process: In Popup Or Not
February 17, 2011
0

With the Facebook introduction of Graph API, there are several ways of authenticating (logging in user) and displaying the permission request. Before we continue, let’s see an example of two of them:

Popup Authentication

This method spawns a new bowser window (as popup) containing the form:

Same Window Authentication

This methods opens a Facebook page containing the form in the same window as your application:

Here’s how to use each and the pro and cons:

1. Popup

The popup dialog method will be used when you use the FB.login() as described in: http://developers.facebook.com/docs/reference/javascript/fb.login/

FB.login(function(response)
{
  if (response.session)
  {
    // user successfully logged in
  }
  else
  {
    // user cancelled login
  }
}, {perms:'publish_stream'});

Similarly, using the <fb:login-botton> tag such as below also will spawn a popup:

<fb:login-button show-faces="false" perms="publish_stream"></fb:login-button>

Update: 12/16/2011:

  • response.session is now called response.authResponse
  • perms is now called scope.

So the above code should be changed to:

FB.login(function(response)
{
  if (response.authResponse)
  {
    // user successfully logged in
  }
  else
  {
    // user cancelled login
  }
}, {scope:'publish_stream'});
<fb:login-button show-faces="false" scope="publish_stream"></fb:login-button>

The perms (now called scope) is where you can request the permissions that you want, separated with comma. In the example, I requested just the publish_stream. If you have more than one permissions request, separate them by commas.

Pros:

  • Your application stays visible behind the popup.
  • You will receive callback after the authentication, while your app can still keep its other states.
  • Your application will not lose its state because it stays open during the process.

Cons:

  • Popup window might be blocked by user’s browser.
  • The position of the window is most often not centered, thus not aesthetically pleasing.
  • If you have a login button, user can potentially open more than one popup login window. (If you have clicked a Facebook login button multiple times, you know what I meant.)
  • The popup window might be obscured by other window(s).

2. Same Window

This is more complicated, but only slightly, and once you understand the mechanism, it’s just as easy as the other method.
Basically, open the https://graph.facebook.com/oauth/authorize in the top browser window, passing some query strings to identify your application. Below is an example of a function that you can call to login the user:

function logMeIn()
{
  var paramsLocation=window.location.toString().indexOf('?');
  var params="";
  if (paramsLocation>=0)
    params=window.location.toString().slice(paramsLocation);

  top.location = 'https://graph.facebook.com/oauth/authorize?
    client_id=APP_ID&scope=publish_stream&redirect_uri=http://www.example.com/url/'+params;
}
  • Line 8 and 9 should be one line (I put it in two lines for aesthetic).
  • client_id is the APP_ID of your application.
  • scope is where you can request the permissions that you want, separated with comma. In the example, I requested just the publish_streampermission. If you have more than one permissions request, separate them by commas. If your application does not require any permissions, leave out this variable.
  • redirect_uri is the URL where the user should be redirected to after the authentication process. Note that in this example, the query string (the portion after the ?) is extracted from the URL as params so that they can be passed back. The redirect_url will most likely be the current page URL ( window.location); however, if your application is going to be running on the Facebook site as an IFRAME application, this might not be the case, that’s the reason for the extra code to extract the query string.

Pros:

  • Cleaner look and no popup window. It looks more pleasing in general.
  • No need to worry abut popup blockers.

Cons:

  • User is taken out of your site on the same window, which may come as surprise, especially if your page checks for user status and prompts them without any user initiative. Possible mitigation: have a login button that user must click or have a pre-login message saying they’ll be taken to the authentication process.
  • May break the flow of your site.
  • You app will be refreshed after the authentication, so it is difficult to use this method if your app has a ‘delayed-login’ feature and wants to maintain states as your app is refreshed after the authentication. A possible workaround is to store states in the state parameter which is described in the Facecook docs as: “An opaque string used to maintain application state between the request and callback. When Facebook redirects the user back to your redirect_uri, this value will be included unchanged in the response..” If you do this, your application state will need to be very simple, or you need to save the huge chunk in a DB and pass the id as a state.
  • With some effort, this methid can spawn a popup. See: here.

Links

Now that you know what the options are, you can see which one works best for you. Note: I have read in some places that applications living in Facebook (IFrame applications) must use the Same Window method, but that was not my experience (the pupup dialog method still work). This might change in the future though.