Using Facebook Login to Registger

Registration is VERY important part of function in all web services.  ASP.Net come with great and easy way to register and manage registered users accounts.  Yet, using third party authentication system like Facebook, Twitter, Microsoft, Google, Linkedin accounts can even make the registration process easier.

Facebook has about 1.5 billion monthly active users (http://newsroom.fb.com/company-info/) as of Sep 2015, what would be the reason to not use such popular web service’s authentication system.

When you create project in ASP.Net in Visual Studio, and choose “individual authentication”, you get a set of code there to easily implement Facebook login.   You can refer to this document on how to to turn on Facebook, Twitter, Microsoft, Google login integration. http://www.asp.net/mvc/overview/security/create-an-aspnet-mvc-5-app-with-facebook-and-google-oauth2-and-openid-sign-on.

The built in third party authentication logic is OK, but I want to make it better (for me), fetch profile information and put that into my own table.

Just so I understand how pre-installed code works;

/Views/Account/Login.cshtm, refers to /Views/Account/ExternalLoginListPartial.chtml, which seems to generate buttons for list of social logins that are enabled.

The form is calling /Controllers/Account/ExternalLogin class, like below;

This action basically redirect user to authentication page of third party service, in this case Facebook.

Then after the authentication is complete, the call back url / class is called, which is like below;

Whatever they retrieve from Facebook seem to be stored into loginInfo which is ExternalLoginInfo type, that is;

ClaimsIdentity type is in System.Security.Claims,  reference to https://msdn.microsoft.com/en-us/library/system.security.claims(v=vs.110).aspx, and it is a class for ASP.Net Identity to obtain identity within.  UserLoginInfo type just have two string which is LoginProvider and ProviderKey.  So it looks like pre-install code fetch only user name and email address.

My ideal logic is; A user visit the site first time,

  1. The user then comes to registration page, and click on register with Facebook account.
  2. The user is redirected to the Facebook side of authentication page and click – OK, and authenticated at Facebook side.
  3. The user comes back to my page, profile information is already pre-filled from Facebook profile information that  I am allowed to see, then fill in profile information then click – register – then registered as a happy user.

1 and 2 and part of 3 is already covered with pre-installed code, so I ll need to add some code to handle this.

Full extension of permissions to Facebook is (as of 2015/01/10, for the most update version refer to https://developers.facebook.com/docs/facebook-login/permissions)

  • public_profile
  • user_friends
  • email
  • user_about_me
  • user_actions.books
  • user_actions.fitness
  • user_actions.music
  • user_actions.news
  • user_actions.video
  • user_actions:{app_namespace}
  • user_birthday
  • user_education_history
  • user_events
  • user_games_activity
  • user_hometown
  • user_likes
  • user_location
  • user_managed_groups
  • user_photos
  • user_posts
  • user_relationships
  • user_relationship_details
  • user_religion_politics
  • user_tagged_places
  • user_videos
  • user_website
  • user_work_history
  • read_custom_friendlists
  • read_insights
  • read_audience_network_insights
  • read_page_mailboxes
  • manage_pages
  • publish_pages
  • publish_actions
  • rsvp_event
  • pages_show_list
  • pages_manage_cta
  • ads_read
  • ads_management

From my Facebook developer page, I see that I am currently permitted to  get email, public profile and user friends.

011016_091734_PM

When the system call for the authentication to Facebook, either /Account/ExtermalLoginConfirmation or /Account/ExternalLoginCallback is called. ExternalLoginCallback is called from third party (in this case Facebook), then if the use first time   ExternalLogin if the account is already associated to the app.

In this case, the user is first time to register with my service, so I want to fetch Facebook information when ExternalLoginConfirmation is called, which work with models ExternalLoginConfirmationViewModel and IdentityUser, and I make modification to these two, to accept additional information.

email is simply a string but public_profile and user_friends are complex types, but I will make this flat for ease of use. Since you made change to the model don’t forget to migrate before execute this. (see http://go.microsoft.com/fwlink/?LinkId=238269)

and now,  /Controllers/AccountControllers and ExternalLoginConfirmation to work with additional information.

From this code, this line seem to be mapping values to type ExternalLoginInfo type.

GetExternalLoginInforAsync is

I looked in more but doesn’t look like I have a good (at least easy) ways to catch all information from Facebook from the ExternalLogin related classes.  I do see Email property reserved and always getting null even after I made my email address share level to public.    Well, I m switching my gear to use call Faebook separately and try to map that on to text boxes at view of ExternalLoginConfirmation.

 

Leave a Reply