@Blog.Author(Nandip Makwana) .LearningExperience(ASP.NET, ASP.NET MVC, IIS, jQuery & Technology Surrounding it...)

August 19, 2012 comment , , , , , , , , ,

MVC 4: facebook twitter login with oAuth

This post is part of ASP.NET MVC 4 Article Series.

Yup Microsoft announced MVC 4 RTM before few days and one of the cool new inclusions from MVC 4 RC is that enabling login from facebook and other sites using OAuth and OpenID. MVC 4 uses DotNetOpenAuth library for OAuth and OpenID authentication. In this post we will see how we can configure MVC 4 application to use facebook and twitter. Apart from configuring MVC 4 application we will also take a quick glance at how to configure facebook and twitter application to obtain appId / consumerKey etc.

One can download and install MVC 4 RTM from here. Once you have installed MVC 4 RTM, create new internet project in MVC 4. In following sub sequent sections we will see how to configure facebook and twitter to obtain appId / consumerKey.

Configure facebook app for MVC 4 authentication

Go to facebook developer site https://developers.facebook.com/apps

Click on Create New App button. It will open popup where you can specify App Name and other detail. Click on continue button after providing App Name.

It might ask you for captcha validation if it is then validate captcha and go ahead. In the next page you can configure facebook app that how your facebook app will integrate / communicate with other app (here MVC 4 application).

Click on Website with Facebook Login and provide your domain name here. If you are using your local machine for testing purpose then you can use http://localhost:2345. Do not forget to change port number to your local machine port number. Here you can also enable sandbox mode so only admin can use this facebook app. Click on Save Changes.

Copy App ID & App Secret and save it for reference.

Configure twitter app for MVC 4 authentication

Go to twitter developer site https://dev.twitter.com/ and click on Create an app link.

It will ask for application details, provide necessary detail. Along with application detail it will also ask for website name and callback URL.

For testing on local machine you need to enter local loopback IP (127.0.0.1) because twitter might not accept localhost as a website name. Here you can also specify callback URL on which twitter will redirect once authentication completed successfully. After filling all detail and accepting terms click on Create your twitter application button.

Again go to application you created recently and on Details tab, scroll down to OAuth settings section.

Copy Consumer key & Consumer secret for future reference.

Configure MVC 4 application to use facebook and twitter login

Create new MVC 4 internet project and open App_Start/AuthConfig.cs file. Here you can specify your facebook and twitter key as you can see in below image.

That’s it! We are done. Go to login page of MVC 4 application, Voila! In right side bar you can see option to login from facebook and twitter.

Click on facebook button to login with facebook in MVC 4 application and it will redirect you to facebook permission page for granting permission.

Click on Go to App button and it will ask to register authenticated facebook user with your application i.e. MVC 4 application. Here you can map your MVC 4 local user to authenticated facebook user.

Similar way we can Login with twitter and other oAuth services. You can read my article on how to customize oAuth Login UI in ASP.NET 4.5 and MVC 4 application Hope this would be helpful.

comments powered by Disqus

Featured Content

Resources & Tools

About Nandip Makwana

Nandip Makwana is passionate about digital world and web. He completed his Masters in Computer Application in June 2011. Currently he is working as a Software Engineer. He has shown great promise and command over ASP.NET and technologies surrounding it during his academic years and professorial life...continue reading