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
app.UseTwitterAuthentication(
consumerKey: "x",
consumerSecret: "x");
app.UseFacebookAuthentication(
appId: "x",
appSecret: "x");
app.UseGoogleAuthentication();
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:
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(
"~/Content/bootstrap.css",
"~/Content/site.css",
"~/Content/zocial.css"
));
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
</a>
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():
With this simple change the login page will display the login buttons using the new style:
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():
<button
type="submit"
class="zocial @p.AuthenticationType.ToLower()"
id="@p.AuthenticationType" name="provider"
value="@p.AuthenticationType"
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:
0 comments:
Post a Comment
thanks for your comment!