Implement Facebook login with OpenID Selector

OpenID selector (Get from here) created by Google is a very good control to implement OpenID in your application, but extending that control to use Facebook login is quite tricky as the documentation given there for it is quite confusing. So I will provide you step by step guide here on how to implement Facebook login in OpenID selector, we will be updating the OpenID selector sample HTML ('demo.html' file) itself.

First we have to include the Facbook button with it's logo in the openid selector large buttons, to do that we will have to change 'openid-en.js' and 'openid-jquery.js' file present in 'js' folder.

Changes in  'openid-en.js'

This file contains two enumeration variables 'providers_large' for displaying larger buttons and 'providers_small' for displaying smaller buttons. Depending upon your choice where you want to display the Facebook button add the following code in any of the provider enumerator.

facebook : {
     name: 'Facebook',
     url: 'javascript:FBLogin()<span class="code-none">;'
<span class="code-none">},</span></span>

This change will make sure that when user clicks on Facebook icon, it will invoke the 'FBLogin' JavaScript code which we will write in 'demo.html' file.

Changes in  'openid-jquery.js'

This file is responsible for the whole working of OpenId control. Following are the changes required  in this file in order to implement Facebook button.

• Currently the demo uses one large single image file (openid-providers-en.png in 'images folder') for displaying the buttons present in control. We will have to change the code to create the control using individual images present in 'images.large' and 'images.small' folders. For that change the value of 'no_sprite' from 'false' to 'true'
• Comment the following code block in '' method, so that its doesn't invoke the demo alert:
JavaScript

if (openid.demo) {
    alert(openid.demo_text + "\r\n" + 
                    document.getElementById(openid.input_id).value);
    return false;
}

After doing these changes if you open the 'demo.html' you will be able to see the Facebook button in large and small section (wherever you have implemented the change).

Changes in 'demo.html'

1. Initialize the Facebook API in the page by copying following code in '$(document).ready' function of JavaScript.
JavaScript

FB.init({
                appId: 'YOUR_APP_ID', // App ID
                channelUrl: '//' + window.location.hostname + '/channel', // Path to your Channel File
                scope: 'id,name,first_name,last_name,gender,email',
                status: true, // check login status
                cookie: true, // enable cookies to allow the server to access the session
                xfbml: true  // parse XFBML
            });

2. Copy following JavaScript methods in Head section:
JavaScript

/*This Method will be invoked on lick on Facebook button*/
function FBLogin() {
        FB.login(FBCallBack);
}

//Call back method to display results
function FBCallBack(response) {
        if (response.authResponse) {
            // user has auth'd your app and is logged into Facebook
            FB.api('/me?fields=id,name,first_name,last_name,gender,email,birthday', function (userDetail) {
                if (userDetail.name) {  
     var vMessage = 'Hi ' + userDetail.name + ' Your Facebook ID is ' + 
         userDetail.id + ' , Your Birthday is ' + userDetail.birthday + 
         ' and email is ' + userDetail.email;
     alert (vMessage);
                }
            });
        }
}

In order to test this code you must deploy this on any web server and register your website in Facebook (See the first section of my this blog).

Download code from here

References

• http://code.google.com/p/openid-selector/