如何从Blazor应用向B2C自定义策略声明传参以定制登录UI？

核心思路 #

可以通过MsalAuthentication的ExtraQueryParameters属性传递自定义参数，在B2C自定义策略中捕获这些参数并映射为声明，最终用该声明定制登录页UI。

具体实现步骤 #

1. 在Blazor应用中配置MsalAuthentication传递参数 #

在Program.cs的认证配置中，直接添加自定义查询参数：

builder.Services.AddMsalAuthentication(options =>
{
    builder.Configuration.Bind("AzureAdB2C", options.ProviderOptions.Authentication);
    options.ProviderOptions.DefaultAccessTokenScopes.Add("https://yourtenant.onmicrosoft.com/api/scope");
    // 添加用于UI定制的参数，示例为深色模式标识
    options.ProviderOptions.ExtraQueryParameters.Add("ui_theme", "dark");
});

如果需要在会话过期时动态传递参数，可在Timer回调的登录逻辑中传入参数：

private async Task HandleSessionExpiry()
{
    var authService = ScopedServices.GetRequiredService<IAuthenticationService>();
    var customParams = new Dictionary<string, string>
    {
        { "ui_theme", "dark" }
    };
    await authService.SignOutAsync();
    await authService.SignInAsync(customParams);
}

2. 在B2C自定义策略中捕获参数并映射为声明 #

步骤2.1 定义声明类型

在自定义策略XML的<ClaimsSchema>节点下添加声明：

<ClaimType Id="ui_theme">
  <DisplayName>UI Theme Parameter</DisplayName>
  <DataType>string</DataType>
  <UserHelpText>Parameter from Blazor app to set login page theme</UserHelpText>
</ClaimType>

步骤2.2 从查询参数提取值到声明

找到负责登录页的技术配置文件（如SelfAsserted-LocalAccountSignin），在<InputClaims>节点添加：

<InputClaim ClaimTypeReferenceId="ui_theme" DefaultValue="{OAUTH-KV:ui_theme}" AlwaysUseDefaultValue="true" />

{OAUTH-KV:ui_theme}会自动从请求URL的查询参数中提取对应值，赋值给ui_theme声明。

3. 在B2C登录页UI中使用声明定制外观 #

在自定义登录页的HTML中，用Liquid模板语法引用声明值，动态调整UI：

{% if claims.ui_theme == "dark" %}
    <link rel="stylesheet" href="/css/dark-theme.css">
{% else %}
    <link rel="stylesheet" href="/css/light-theme.css">
{% endif %}

也可以控制元素显示：

{% if claims.ui_theme == "dark" %}
    <div class="dark-mode-badge">深色模式</div>
{% endif %}

注意事项 #

• 避免使用B2C保留关键字作为参数名，比如client_id、redirect_uri。
• 若参数为可选，需在策略中处理空值情况，防止UI渲染异常。
• 注意URL长度限制，不要传递过大的参数内容。

内容的提问来源于stack exchange，提问作者Peasoon