Apr 20, 2014

Posted in , , ,

ASP.NET MVC FREE UK Hosting - HostForLIFE.eu :: Social Login Buttons for ASP.NET MVC 5

Register OAuth providers
We start of by creating a new with ASP.NET MVC 5 application & hosting and enabling the various OAuth providers we would like to use in the App_Start\Startup.Auth.cs

    consumerKey: "x",
    consumerSecret: "x");
    appId: "x",
    appSecret: "x");

Add Social Buttons CSS
The next step is to get a set of good looking social login buttons.  I decided to use the Zocial CSS social buttons which you can grab directly from the Github repository available at http://github.com/samcollins/css-social-buttons/. Add them to the project by copying the CSS file and the font files into the Content folder of your project. Next we need to add the CSS file to your CSS bundle, by updating the relevant lines in the App_Code\BundleConfig.cs file as follows:
bundles.Add(new StyleBundle("~/Content/css").Include(
To use the Zocial CSS social buttons you can use any HTML such as a, div, span, button etc. and add a CSS class of “zocial” as well as the class for the service that you want to style the button for.  For example the HTML code
<a href="#"
    class="zocial facebook">
    Sign in with Facebook
will render the button


Customizing ASP.NET MVC Output
The final step required is to customize the output of the partial view which was created by the ASP.NET MVC Internet project template.  Microsoft changed the standard template a bit from the way it worked in MVC 4, so this time around we only need to edit the _ExternalLoginsListPartial.cshtml file which is found under Views\Account.
_ExternalLoginsListPartial.cshtml and is used to display the list of available logins on the Login page as well as the Account Management page.  We alter this view by rendering the correct CSS class which will allow the Zocial CSS classed to render the button correctly.  We are lucky in that the provider names in ASP.NET MVC corresponds to the correct CSS classes in Zocial, but remember that CSS is case sensitive, so we force the provider name to lower case using AuthenticationType.ToLower():

   class="zocial @p.AuthenticationType.ToLower()"
   id="@p.AuthenticationType" name="provider"
   title="Log in using your @p.Caption account">@p.AuthenticationType</button>

With this simple change the login page will display the login buttons using the new style:


Post a Comment

thanks for your comment!