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

September 3, 2012 comment , , , , , , , ,

ASP.NET 4.5 & MVC 4: Customize oAuth Login UI

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

In this quick post, we will see how to customize, oAuth Login UI in ASP.NET 4.5 and MVC 4. For more detail on setting up facebook & twitter login with MVC 4, you can refer my previous post. One of the common requirements with oAuth login is that displaying respective provider’s logo or image.

ASP.NET MVC 4 oAuth Login UI

In ASP.NET 4.5 and MVC 4, we can register oAuth provider in App_Start/AuthConfig.cs file and here we can also pass additional data to oAuth provider if any. We can use this extra data dictionary to pass oAuth provider’s image url to view and based on it we can display image for respective provider.

Register oAuth provider in MVC 4

As we can see in above code snippet that we are passing Icon url with extra data. So we can now access this Icon url from view. Open Views/Account/_ExternalLoginsListPartial.cshtml and replace the classic button markup with below code snippet.

Login UI view

Now run the application by pressing F5 and wow we have brand new login UI for oAuth provider.

Points to keep in mind

  • Make sure you pass extra data for all providers you are registering. Otherwise exception “The given key was not present in the dictionary.” will be thrown when accessing it from view.
  • Carefully notice both code snippets provided above, we are passing image url starting with / but not ~ because in view we are using HTML input type image and not HTML helper so HTML input type image will not understand ~.

You can read more on how to setup facebook and twitter application to use with MVC 4. In next post we will see how to request additional information from oAuth provider.

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