Script.Require("jQuery").AtHead()

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 <ProjectDirectory>/Views/Account/_ExternalLoginListPartial.cshtml:

   1: <div id="socialLoginList">
   2:                 <p>
   3:                     @foreach (AuthenticationDescription p in loginProviders) {
   4:                         <button type="submit" class="btn btn-default" id="@p.AuthenticationType" name="provider" value="@p.AuthenticationType" title="Log in using your @p.Caption account">@p.AuthenticationType</button>
   5:                     }
   6:                 </p>
   7:             </div>

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.
    bootstrap-social.css
    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 StyleBundle in BundleConfig.cs.

    Once these have been added, we can modify the socialLoginList div in _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 Caption property of the AuthenticationDescription by 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:

  •    1: // Use the Caption property to create CSS classes for the button &; icon
       2: string buttonClass = "btn-" + p.Caption.ToLower();
       3: string faClass = "fa-" + p.Caption.ToLower();
       4:  
       5: // The Microsoft font awesome icon is 'fa-windows'...
       6: if (p.Caption.ToLower() == "microsoft")
       7: {
       8:     faClass = "fa-windows";
       9: }
    Note the if statement regarding the Microsoft icon, where the Font Awesome class is fa-windows, not 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.

Once we have the class names, these are injected into the <button> tag with bog-standard Razor:

   1: <button type="submit" class="btn btn-lg @buttonClass" id="@p.AuthenticationType" name="provider" value="@p.AuthenticationType" title="Log in using your @p.Caption account.">
   2:     <i class="fa @faClass"></i>
   3:     @p.AuthenticationType
   4: </button>

The full code for the socialLoginList div is as follows. You’ll note that I’ve replaced <p> with <div class="btn-group-vertical"> to stack the buttons neatly:

   1: <div id="socialLoginList">
   2:     <div class="btn-group-vertical" aria-label="Login Providers">
   3:         @foreach (AuthenticationDescription p in loginProviders)
   4:         {
   5:             // Use the Caption property to create CSS classes for the button & icon
   6:             string buttonClass = "btn-" + p.Caption.ToLower();
   7:             string faClass = "fa-" + p.Caption.ToLower();
   8:  
   9:             // The Microsoft Font Awesome icon is 'fa-windows'...
  10:             if (p.Caption.ToLower() == "microsoft")
  11:             {
  12:                 faClass = "fa-windows";
  13:             }
  14:  
  15:             <button type="submit" class="btn btn-lg @buttonClass" id="@p.AuthenticationType" name="provider" value="@p.AuthenticationType" aria-label="@p.Caption" title="Log in using your @p.Caption account.">
  16:                 <i class="fa @faClass"></i>
  17:                     @p.AuthenticationType
  18:                 </button>
  19:         }
  20:     </div>
  21: </div>

This will produce the following stack of buttons on your login page:

pretty-buttons


Comments