Pretty social login buttons for ASP.Net web apps using Identity.
Anyone who has used ASP.Net will know about Identity, the system for handling website authentication and authorisation. If you select Individual User Accounts when creating your project, the included code will enable your web app to leverage third-party authentication, allowing users to create accounts using their login details from Microsoft, Google, Facebook and Twitter, among others. All you have to do is uncomment some code and fill in the required API keys, which you get when you sign up to services as a developer.
It’s safe to say, however, that the default buttons are somewhat bland, being literally Bootstrap
btn-default buttons. The code to create the buttons is in this fragment of code from
All it does is loop through the list of login providers, outputting a button for each one.
Luckily there’s a way of getting prettier buttons, and it’s not that difficult.
Social Buttons for Bootstrap from Danish developer Lipis is a GitHub repository of social media buttons created in CSS using Bootstrap and Font Awesome. This is perfect for our needs, because we can create buttons with the correct colours and icons with just a little bit of C#.
To use the buttons, you’ll need to add the following to your project:
- Font Awesome
- This can be found in Nuget.
- This can be found on GitHub. I put it with the rest of the CSS files in the Content folder, and added a reference to it in the
Once these have been added, we can modify the
_ExternalLoginListPartial.cs. Social Buttons works entirely through CSS classes, so to dynamically create buttons, we need to create those classes on the fly. This we can do from the
Captionproperty of the
AuthenticationDescriptionby converting it to lower case and adding a prefix –
btn-for the button itself, and
fa-for the icon. In C# Razor, this looks like:
fa-microsoft. So far, I’ve only used Google, Twitter, Facebook and Microsoft, so it could be that there are more mapping issues with other providers. Note the if statement regarding the Microsoft icon, where the Font Awesome class is
Once we have the class names, these are injected into the
<button> tag with bog-standard Razor:
The full code for the
div is as follows. You’ll note that I’ve replaced
to stack the buttons neatly:
This will produce the following stack of buttons on your login page: