Azure B2C自助服务页面添加自定义链接跳转至子旅程的问询

你当前用ClaimsProviderSelector的思路不对，这个组件是用来让用户选择身份提供商的，不是用来添加自定义操作链接的。下面是无需大量JS的配置方案：

方案一：用DisplayControl配置自定义跳转链接 #

通过B2C原生的DisplayControl功能，在资料页添加自定义链接，触发子旅程跳转，全程靠配置实现。

1. 声明必要的Claim类型 #

在策略的<ClaimsSchema>节点下添加两个声明，用来标识链接文本和子旅程触发标识：

<ClaimsSchema>
  <!-- 保留你已有的姓名、邮箱等声明 -->
  <ClaimType Id="CustomSubjourneyLink">
    <DisplayName>进入自定义子旅程</DisplayName>
    <DataType>string</DataType>
    <UserHelpText>点击此处访问专属子旅程</UserHelpText>
  </ClaimType>
  <ClaimType Id="executesubjourney">
    <DisplayName>执行子旅程</DisplayName>
    <DataType>string</DataType>
    <AdminHelpText>标记需要触发的子旅程ID</AdminHelpText>
  </ClaimType>
</ClaimsSchema>

2. 定义DisplayControl组件 #

在策略的<DisplayControls>节点下添加自定义链接控件，绑定跳转动作：

<DisplayControls>
  <DisplayControl Id="CustomLinkControl" UserInterfaceControlType="Link">
    <DisplayClaims>
      <DisplayClaim ClaimTypeReferenceId="CustomSubjourneyLink" />
    </DisplayClaims>
    <OutputClaims>
      <OutputClaim ClaimTypeReferenceId="executesubjourney" DefaultValue="MyCustomSubjourney" />
    </OutputClaims>
    <Actions>
      <Action Id="Navigate">
        <ValidationClaimsExchange>
          <ValidationClaimsExchangeTechnicalProfile TechnicalProfileReferenceId="TriggerSubjourney" />
        </ValidationClaimsExchange>
      </Action>
    </Actions>
  </DisplayControl>
</DisplayControls>

3. 配置触发子旅程的技术配置 #

添加一个技术配置，用来触发子旅程的执行：

<TechnicalProfiles>
  <!-- 保留你已有的SelfAsserted-ProfileUpdate等配置 -->
  <TechnicalProfile Id="TriggerSubjourney">
    <DisplayName>触发自定义子旅程</DisplayName>
    <Protocol Name="Proprietary" Handler="Web.TPEngine.Providers.SelfAssertedAttributeProvider, Web.TPEngine, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null" />
    <Metadata>
      <Item Key="ContentDefinitionReferenceId">api.selfasserted</Item>
    </Metadata>
    <OutputClaims>
      <OutputClaim ClaimTypeReferenceId="executesubjourney" />
    </OutputClaims>
    <UseTechnicalProfileForSessionManagement ReferenceId="SM-Noop" />
  </TechnicalProfile>

  <!-- 定义子旅程引用的技术配置 -->
  <TechnicalProfile Id="MyCustomSubjourneyProfile">
    <DisplayName>自定义子旅程</DisplayName>
    <Protocol Name="Proprietary" Handler="Web.TPEngine.Providers.SubjourneyHandler, Web.TPEngine, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null" />
    <Metadata>
      <Item Key="SubjourneyReferenceId">MyCustomSubjourney</Item>
    </Metadata>
  </TechnicalProfile>
</TechnicalProfiles>

4. 修改SelfAsserted-ProfileUpdate技术配置 #

把自定义链接控件添加到资料页的显示声明中：

<TechnicalProfile Id="SelfAsserted-ProfileUpdate">
  <!-- 保留你已有的InputClaims、OutputClaims等配置 -->
  <DisplayClaims>
    <DisplayClaim ClaimTypeReferenceId="givenName" Required="true" />
    <DisplayClaim ClaimTypeReferenceId="surname" Required="true" />
    <DisplayClaim ClaimTypeReferenceId="email" Required="true" />
    <!-- 添加自定义链接控件 -->
    <DisplayClaim ClaimTypeReferenceId="CustomSubjourneyLink" DisplayControlReferenceId="CustomLinkControl" />
  </DisplayClaims>
</TechnicalProfile>

5. 调整编排步骤 #

在现有编排流程中添加判断步骤，当检测到executesubjourney声明时，跳转到子旅程：

<!-- 保留你已有的编排步骤，在合适位置添加以下步骤 -->
<OrchestrationStep Order="4" Type="ClaimsExchange">
  <Preconditions>
    <Precondition Type="ClaimEquals" ExecuteActionsIf="false">
      <Value>executesubjourney</Value>
      <Value>MyCustomSubjourney</Value>
      <Action>SkipThisOrchestrationStep</Action>
    </Precondition>
  </Preconditions>
  <ClaimsExchanges>
    <ClaimsExchange Id="SubjourneyExchange" TechnicalProfileReferenceId="MyCustomSubjourneyProfile" />
  </ClaimsExchanges>
</OrchestrationStep>

方案二：极简JS实现（可选） #

如果觉得配置太繁琐，也可以用几行JS在自定义UI模板中添加跳转按钮，无需复杂逻辑：

<button id="subjourneyBtn" class="button button-secondary">进入自定义子旅程</button>
<script>
document.getElementById('subjourneyBtn').addEventListener('click', () => {
  const csrfToken = document.querySelector('input[name=__RequestVerificationToken]').value;
  const redirectUrl = `${window.location.origin}/tfp/你的租户ID/你的策略ID/你的子旅程端点?csrf_token=${csrfToken}`;
  window.location.href = redirectUrl;
});
</script>

注意替换代码中的租户ID、策略ID和子旅程端点为实际值。

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