In this quick guide, we will see how to customize, oAuth Login UI in ASP.NET 4.5 and MVC 4. 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 Remember
- 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 ~