Click here to Skip to main content
Click here to Skip to main content

Implement Facebook login with OpenID Selector

, 31 Aug 2012
Rate this:
Please Sign up or sign in to vote.
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<span class="code-none">: 'Facebook',
     url: 'javascript:FBLogin()<span class="code-none">;'
<span class="code-none">},</span></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:
  • 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.
  2. 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
                });
  3. Copy following JavaScript methods in Head section:
  4. /*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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

S Ravi Kumar-2012
Architect
India India
No Biography provided
Follow on   Google+

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web03 | 2.8.140827.1 | Last Updated 31 Aug 2012
Article Copyright 2012 by S Ravi Kumar-2012
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid