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/



15 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
  2. wonderful information This is just the kind of information that i had been looking from so many days thanks for posting this blog.
    Oracle Fusion HCM Technical Online Training

    ReplyDelete
  3. All given info was wonderful and it's very helpful for everyone. It's impressive that you are getting thoughts from this Blog..............Visit our Erptree Website for Oracle Fusion Financials Training details.

    ReplyDelete
  4. This professional hacker is absolutely reliable and I strongly recommend him for any type of hack you require. I know this because I have hired him severally for various hacks and he has never disappointed me nor any of my friends who have hired him too, he can help you with any of the following hacks:

    -Phone hacks (remotely)
    -Credit repair
    -Bitcoin recovery (any cryptocurrency)
    -Make money from home (USA only)
    -Social media hacks
    -Website hacks
    -Erase criminal records (USA & Canada only)
    -Grade change
    -funds recovery

    Email: onlineghosthacker247@ gmail .com

    ReplyDelete
  5. Hey! Amazing work. If you are searching for genuine Quickbooks Customer Support Number dial 1-855-756-1077 for immediate help.

    ReplyDelete
  6. Different between SEO and ASO by Ygoseo.
    What is App Store Optimization (ASO)
    App store optimization is the process of optimizing mobile apps to rank higher in an app store’s search results. The higher your app ranks in an app store’s search results, the more visible it is to potential customers.

    That the Ygoseo is increased visibility tends to translate into more traffic to your app’s page in the app store.

    What is going into SEO
    To recognize the actual that means of SEO, let's smash that definition down and have a take a observe the parts:
    Quality of site visitors. You can appeal to all of the site visitors with inside the world, however, if they are coming in your web website online due to the fact Google tells them you are an aid for Apple computer systems whilst sincerely you are a farmer promoting apples, that isn't always pleasant site visitors. Instead, you need to draw site visitors who're surely inquisitive about the merchandise which you offer. Quantity of site visitors. Once you've got got the proper humans clicking thru from the ones seek engine outcomes pages (SERPs), greater site visitors is better.Organic outcomes. Ads make up a big part of many SERPs. Organic site visitors is any site visitors that you do not ought to pay for.

    both are different are SEO and ASO By Ygoseo
    For more information about it visit our
    website https://ygoseo.com/
    email= info@ygoseo.com

    ReplyDelete
  7. Web Hosting Tech Guru Host Domain Name EMail Marketing By techguru
    TechGuru Host Has Everything you need to build your own business
    in one place - Web Hosting, Domain Name,snd Much More At an Affordable
    Price and We provide quick, secure, and safe cloud hosting for websites
    For more detail visit
    https://www.techguru.host/
    Address : Konark Darshan B, PN-53, Zaver Rd, Mulund West, Mumbai, Maharashtra 400080
    +91 9768686898 , 91 9867660596
    support@techguru.host
    sales@techguru.host

    ReplyDelete
  8. Airborne Private Jets helps you to enjoy the comfort and convenience of private jets hiring travel at affordable prices. We intend to reframe the perception of private jet-aviation as a forum that has been established to provide the exclusive privilege of services. Explore entirely customizable experiences, with an effective payment process that is hassle-free. The entire process of hiring a charter flights is so simple and easy, Simply tell us where you are going, and we will take care of the rest. You deserve to fly in comfort and style more https://airborneprivatejet.com/

    ReplyDelete
  9. Good Valuable blog,Get the most suitable solutions for QuickBooks on Quickbooks Phone Number 1833-244-5865.
    Quickbooks Phone Number

    ReplyDelete
  10. Great Information Thanks For sharing if you are facing any issue with QuickBooks get Solution contact at at

    QuickBooks Customer Service

    ReplyDelete
  11. This is so helpful Information for me thanks for sharing with us . you can also get Solution of Quicickbook issue at QuickBooks Customer Service

    ReplyDelete
  12. very informative information Thanks For Sharing With us Are You struggling with QuickBooks issue then contact at

    QuickBooks Customer Service

    ReplyDelete
  13. This is quite a .good blog. Keep sharing. I love them Are you also searching for nursing paper writing service ? we are the best solution for you. We are best known for delivering nursing paper writing services to students without having to break the bank.

    ReplyDelete
  14. Your blogs are great.Are you also searching for Nursing assignment writers ? we are the best solution for you. We are best known for delivering great nursing assignments.

    ReplyDelete