Thursday, August 30, 2012

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();'

           },


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 'submit' method, so that its doesn't invoke the demo alert:

           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).

This is how control will look if it is added to large buttons section:
And this when it is added to small buttons section:

 Changes in 'demo.html':

1) Initialize the Facebook API in the page by copying following code in '$(document).ready' function
      of 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:
/*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/



2 comments:

  1. In C# code How did you handle membership etc when implementing both openid and facebook?

    ReplyDelete
    Replies
    1. For that you will have to map the result properties you get back from OpenID or Facebook with your memebrship class properties and then use it as you use in case of regular application.

      Delete