Skip to main content

ASP.NET Video Starter Kit - Facebook Login / Signup

Implementing facebook login within your website allow user to automatically login or signup via facebook user data without passing through registration and user activation process within website.

Facebook implementation will help increasing website registered users trememdeously by allowing direct auto registration via facebook and it become a popular source for login now a days.

We implemented facebook login integration in all of our products which exist in the form of script including

Facebook Login Overview

Facebook login has bee imlemented in products mentioned above and work as follows.

  • Facebook Login Integration: User will click on facebook login, once clicked facebook authorization process will start. Once user accept authorization access. Facebook authorize our website to access user required data
  • Signup / Login Process: In next step script will automatically check user status in website based on facebook data whether user already have account. If not script will automatically create account based on user data. If user already have account, script will automatically login users within website.
  • Authorization:User will be authorized in same fashion as authorized via normal login procedure.
  • User Account: User will have same type of public channel / private account for managing content and other activities.

Implementation Example

You can easily integrated facebook login in your website to automatically signup, authorize users. Here is some simple steps

i: Create Faceook Link

<a rel="nofollow" class="btn" href="#" onclick="fb_login('" + _rooturl + "','" + RedirectUrl + "');" title="Login through facebook">Facebook</a>
                             

ii: Create javascript function

 
function fb_login(u, redirect) {
    FB.login(function (response) {
        if (response.authResponse) {
             Process_Login(u, redirect);
        } else {
             console.log('User cancelled login or did not fully authorize.');
        }
    }, { scope: 'email,user_birthday,user_hometown,publish_stream' });
}
function Process_Login(u, redirect) {
     // build loading section
     // optional for loading modal popup, adjust with your requirements
     loadingtext('#ft_dialog');
     $('#ft_dialog').modal({ show: true });
     // core function for processing facebook login request
     FB.api('/me', function (response) {
          var fb_data = "uid=" + response.id + "&fn=" + response.first_name + "&ln=" + response.last_name + "&gn=" + response.gender + "&bt=" + response.birthday + "&eml=" + response.email;
          if (response.hometown != undefined)
              fb_data = fb_data + "&loc=" + response.hometown.name;
          if (response.username != undefined)
              fb_data = fb_data + "&uname=" + response.username;
          // ajax callback, here asp.net generic handler file called, in php you must create php handler for login processing
          $.ajax({
             type: 'GET',
             url: u + "handlers/signup.ashx",
             data: fb_data,
             success: function (msg) {
             switch (msg) {
                  case "nouid":
                  document.location = u + "facebook/error.aspx?status=nouid";
                  break;
             case "emailexist":
                  document.location = u + "facebook/error.aspx?status=emailexist";
                  break;
             case "ucsuccess":
                  document.location = u + "myaccount/Default.aspx?status=success";
                  break;
             case "csuccess":
                  document.location = u + "myaccount/Default.aspx?status=success&clg=true";
                  break;
             case "nologinname":
                  document.location = u + "facebook/error.aspx?status=nologinname";
                  break;
             case "ipblocked":
                  document.location = u + "IPBlocked.aspx";
                  break;
             case "success":
                  if (redirect != "") {
                     document.location = redirect;>
                  }
                  else
                     document.location = u + "myaccount/Default.aspx";
                  break;
              }
        }
        }); // ajax call close
     }); // FB API close
} // function close

iii: Sample Generic Handler Code

Sample parameters to be received by generic handler, rest you will process these parameters according to your own requirements to authorize user or perform auto signup.

private string fb_uid = ""; // UID fetched from user facebook account private string name = ""; // Facebook Name private string fb_username = ""; // Facebook UserName private string fname = ""; private string lname = ""; private string gender = ""; private string user_birthday = ""; private string email = ""; private string picture = ""; private string location = ""; private string redirect_url = ""; private string ElementID = ""; // div element id where you want to load box with close link public void ProcessRequest (HttpContext context) { if (context.Request.Params["uid"] != null) this.fb_uid = context.Request.Params["uid"].ToString(); if (context.Request.Params["uname"] != null) this.fb_username = context.Request.Params["uname"].ToString(); if (context.Request.Params["nm"] != null) this.name = context.Request.Params["nm"].ToString(); if (context.Request.Params["fn"] != null) this.fname = context.Request.Params["fn"].ToString(); if (context.Request.Params["ln"] != null) this.lname = context.Request.Params["ln"].ToString(); if (context.Request.Params["gn"] != null) this.gender = context.Request.Params["gn"].ToString(); if (context.Request.Params["bt"] != null) this.user_birthday = context.Request.Params["bt"]; if (context.Request.Params["eml"] != null) this.email = context.Request.Params["eml"]; if (context.Request.Params["loc"] != null) this.location = context.Request.Params["loc"]; if (context.Request.Params["pic"] != null) this.picture = context.Request.Params["pic"]; if (context.Request.Params["redirect_url"] != null) this.redirect_url = context.Request.Params["redirect_url"]; if (context.Request.Params["elid"] != null) this.ElementID = context.Request.Params["elid"].ToString(); // core function for processing all data received through various parameters above string output = Process(context); context.Response.Write(output); }