Asp.net mvc 4 在ASP.NET MVC示例中将图形添加到OpenID登录按钮

我使用的是VS 2012 MVC4（razor）示例（几乎所有这些都是新的），我修改了AuthConfig.cs文件以允许Google和Yahoo都可以访问OpenID

        OAuthWebSecurity.RegisterGoogleClient();
        OAuthWebSecurity.RegisterYahooClient();

果不其然，这两个OpenID选项已经出现。我想修改此按钮，使其显示相应的徽标

DotNetOpenAuth是否有返回图像路径的方法？我在想，如果有，我可以修改ExternalLogin“页面”

@foreach（模型中的AuthenticationClientData p）
{
@p、 显示名
}

您可以这样做（抱歉，这是vb.net代码）：

在AuthConfig RegisterAuth方法中，创建一个字典并将图标路径添加到所需的图像

Dim MsExtraData As New Dictionary(Of String, Object)
MsExtraData.Add("Icon", VirtualPathUtility.ToAbsolute("~/Images/Microsoft.png"))

' Then pass it as extraData parameter to the register client method
OAuthWebSecurity.RegisterMicrosoftClient(
        clientId:="yourkey",
        clientSecret:="yoursecret",
        displayName:="Microsoft",
        extraData:=MsExtraData)

现在转到Views\Account文件夹中的view\u ExternalLoginsListPartial 并使用以下命令更改按钮生成代码：

<button type="submit" id="<%: p.DisplayName%>" name="provider" value="<%: p.AuthenticationClient.ProviderName%>" title="Login with <%: p.DisplayName %>"><%: p.DisplayName%>
            <img src="<%: p.ExtraData("Icon")%>" alt="Icon for <%: p.DisplayName%>" />
        </button>

“alt=”图标“/>

听起来不错。Twitter和Facebook签名需要一个额外的字段：displayName。

我刚刚在_ExternalLoginsListPartials视图中使用了字体awsome来完成这项任务，如下所示：

使用（Html.BeginForm（Model.Action，“Account”，new{ReturnUrl=Model.ReturnUrl}））
{
@Html.AntiForgeryToken（）

@foreach（loginProviders中的AuthenticationDescription p）
{
@p、 身份验证类型
}

}

为什么不将徽标保存为图像文件夹中的本地资源，并将其命名为每个OAuth提供程序的DisplayName。然后，您可以直接使用这些按钮本身，而不是直接使用dotnetopenauth的功能，它在下面用于按钮的行为。

<button type="submit" id="<%: p.DisplayName%>" name="provider" value="<%: p.AuthenticationClient.ProviderName%>" title="Login with <%: p.DisplayName %>"><%: p.DisplayName%>
            <img src="<%: p.ExtraData("Icon")%>" alt="Icon for <%: p.DisplayName%>" />
        </button>