ASP.NET身份外部身份验证提供自定义图标 [英] ASP.NET Identity external authentication provider custom icon

问题描述

使用SimpleMembership您可以添加一个图标到外部身份验证提供按钮是这样的：

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

SimpleMembership：

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身份（？）：

ASP.NET Identity(?):

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

如何使用ASP.NET标识（​​控制器和视图）？来达到同样的事

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

推荐答案

这样做的另一种方式：

把些什么，在这个博客（使用zocial图标，但我发现那些会矫枉过正 - 见css文件，你就会明白我的意思）：
HTTP：//www.beabigrockstar .COM / pretty - 社会 - 登录 - 按钮换ASP净MVC-5 /

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/

和做的是这样的：

Startup.Auth.cs （没有额外的什么，只是从MVC应用5标准默认的东西）

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);
}

查看：

<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.

这篇关于ASP.NET身份外部身份验证提供自定义图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！