5

使用 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);

然后在您的视图中像这样显示它们：

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

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

如何使用 ASP.NET Identity（控制器和视图）实现相同的目标？

4

2 回答 2

7

另一种方法：

获取了这个博客中的一些内容（使用 zocial 图标，但我发现这些图标太过分了 - 请参阅 css 文件，你就会明白我的意思）： http ://www.beabigrockstar.com/pretty-social-login-buttons -for-asp-net-mvc-5/

并这样做：

Startup.Auth.cs（没有多余的东西，只是来自 MVC 5 应用程序的标准默认内容）

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>

在上面的其他解决方案/答案中使用类而不是不太优雅的样式属性。

于 2013-11-06T12:21:11.100 回答
4

您仍然可以做类似的事情，基本上在 Startup.Auth.cs 中，当您启用身份验证提供程序时，您需要向 AuthenticationDescription 添加额外数据：

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

然后在按钮中使用 @p.Properties["Img"]，就像您之前在 _ExternalLoginListPartial 视图中所做的那样

        <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>
于 2013-11-04T21:11:33.083 回答