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.

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.

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.

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.