ASP.NET Identity external authentication provider custom icon

Question

With SimpleMembership you can add an icon to the external authentication provider buttons like this:

SimpleMembership:

Dictionary<string, object> FacebooksocialData = new Dictionary<string, object>();
FacebooksocialData.Add("Icon", "/content/images/gui/loginFacebook.png");
OAuthWebSecurity.RegisterFacebookClient(
    appId: "x",
    appSecret: "x",
    displayName: "Facebook",
    extraData: FacebooksocialData);

And then display them like this in your view:

@foreach (AuthenticationClientData p in Model)
{
    <button class="externalLoginService" style="cursor:pointer;color:transparent;border:none;background:url(@p.ExtraData["Icon"]);width:94px;height:93px;margin-right:20px;" type="submit" name="provider" value="@p.AuthenticationClient.ProviderName" title="Log in with @p.DisplayName">@p.DisplayName</button>
}

ASP.NET Identity(?):

app.UseFacebookAuthentication(
   appId: "x",
   appSecret: "x");

How to achieve the same thing using ASP.NET Identity (controller and view)?

Bridle

Answer 1

Another way of doing it:

Took some of what is in this blog (uses zocial icons but I found those to be overkill - see css file and you'll know what I mean): http://www.beabigrockstar.com/pretty-social-login-buttons-for-asp-net-mvc-5/

And did it like this:

Startup.Auth.cs (no extra nothing, just the standard default stuff from an MVC 5 app)

app.UseFacebookAuthentication(appId: "x", appSecret: "x");
app.UseGoogleAuthentication();

CSS:

.socialLoginButton {
    cursor:pointer;color:transparent;border:none;width:94px;height:93px;margin-right:20px;
}

.socialLoginButton.facebook {
    background:url(/content/images/gui/loginFacebook.png);
}
.socialLoginButton.google {
    background:url(/content/images/gui/loginGoogle.png);
}

View:

<button type="submit" class="externalLoginService socialLoginButton @p.AuthenticationType.ToLower()" id="@p.AuthenticationType" name="provider" value="@p.AuthenticationType" title="Log in with @p.Caption">@p.AuthenticationType</button>

Using classes instead of the not so elegant style attribute in the other solution/answer above.

Bridle

This one is more elegant imo but see Hao Kungs answer for alternative solution with more good info. I actually used the other approach first but then I wanted to use class attribute instead of style so I went for that. – Bridle

Answer 2

You can still do something similar, basically in Startup.Auth.cs you will need to add extra data to the AuthenticationDescription when you enable the auth provider:

        var desc = new AuthenticationDescription();
        desc.Caption = "Google";
        desc.AuthenticationType = "Google";
        desc.Properties["Img"] = "<img>";
        app.UseGoogleAuthentication(new GoogleAuthenticationOptions() { Description = desc });

And then use the @p.Properties["Img"] in your button like you were doing before inside of the _ExternalLoginListPartial view

        <legend>Use another service to log in.</legend>
        <p>
        @foreach (AuthenticationDescription p in loginProviders) {
            <button type="submit" class="btn" id="@p.AuthenticationType" name="provider" value="@p.AuthenticationType" title="Log in using your @p.Caption account">@p.AuthenticationType</button>
        }
        </p>

Johnathon

When using var desc = new AuthenticationDescription()... the submit button stops to work.. can't seem to figure out what could be causing this? If I use <img src="@p.Properties["Img"]" /> the image gets displayed but when using it in the button tag it does not work. I've probably just missed something obvious. Tried this exact code in a default mvc5 webapp btw. – Bridle

Had to add desc.AuthenticationType = "Google"; then it works. How to do this properly without having to explicitely specify "Google", "Facebook" or "Twitter"? @p.AuthenticationType is null in view if you do not specify desc.AuthenticationType. – Bridle

You need to specify the authentication type when you register the auth provider, that's how the middleware knows how to route the challenge (i.e. what external identity are you trying to login to) – Johnathon

And I do that by hardcoding(!) the auth providers using a non-strongly typed string ex.desc.AuthenticationType = "Facebook" ? Is there a more elegant/type-safe way using an enum or something similar ex. desc.AuthenticationType = AuthenticationTypeEnum.Facebook? – Bridle

So the providers don't care what authentication type you use, they just have to match, so you can call Facebook "fb", and as long as you later challenge using that Authentication type "fb", it will route that to the matching provider. So you are free to manage the constants however you like. – Johnathon

Ok, sounds good. Saw that you updated code snippet, exellent. Marked as answered. Thanks! :) – Bridle