如何在Azure B2C自定义策略流中添加自定义页面并配置前置注册页？

一、如何在自定义策略流中添加自定义页面 #

• 1. 定义内容配置（ContentDefinition）
  在TrustFrameworkExtensions.xml的<BuildingBlocks>节点下添加<ContentDefinitions>，指定自定义页面的标识和加载地址：

  <ContentDefinitions>
    <ContentDefinition Id="api.selfasserted.custom">
      <LoadUri>https://your-domain.com/custom-page.html</LoadUri>
      <RecoveryUri>~/common/default_page_error.html</RecoveryUri>
      <DataUri>urn:com:microsoft:aad:b2c:elements:selfasserted:1.1.0</DataUri>
      <Metadata>
        <Item Key="DisplayName">Custom Page</Item>
      </Metadata>
    </ContentDefinition>
  </ContentDefinitions>
  

• 2. 编写自定义HTML页面
  页面需包含B2C交互所需的占位符和脚本引用，示例结构：

  <!DOCTYPE html>
  <html>
  <head>
    <title>Custom Page</title>
    <script src="https://your-tenant.b2clogin.com/your-tenant.onmicrosoft.com/b2c_1a_base/trustedframeworkscripts/js/selfasserted.js"></script>
  </head>
  <body>
    <div id="api"></div>
    <script>
      window.onload = function() {
        window.SelfAsserted.init();
      };
    </script>
  </body>
  </html>
  

  页面必须托管在HTTPS地址上，确保B2C能正常访问。
• 3. 添加用户旅程步骤
  在目标UserJourney的<OrchestrationSteps>中插入编排步骤，关联自定义页面的技术配置文件：

  <OrchestrationStep Order="1" Type="ClaimsExchange">
    <ClaimsExchanges>
      <ClaimsExchange Id="CustomPageExchange" TechnicalProfileReferenceId="SelfAsserted-CustomPage" />
    </ClaimsExchanges>
  </OrchestrationStep>
  

• 4. 配置技术配置文件（TechnicalProfile）
  定义对应自断言技术配置文件，关联内容配置和声明：

  <ClaimsProviders>
    <ClaimsProvider>
      <DisplayName>Custom Page Provider</DisplayName>
      <TechnicalProfiles>
        <TechnicalProfile Id="SelfAsserted-CustomPage">
          <DisplayName>Custom Page</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.custom</Item>
          </Metadata>
          <OutputClaims>
            <!-- 按需定义需要收集的声明 -->
          </OutputClaims>
        </TechnicalProfile>
      </TechnicalProfiles>
    </ClaimsProvider>
  </ClaimsProviders>
  

二、在注册页面前置带必填字段的自定义页面 #

完全可以实现，具体步骤如下：

• 1. 定义必填自定义声明
  在<BuildingBlocks>的<ClaimsSchema>中添加需要收集的必填字段声明：

  <ClaimsSchema>
    <ClaimType Id="customRequiredField">
      <DisplayName>必填信息</DisplayName>
      <DataType>string</DataType>
      <UserInputType>TextBox</UserInputType>
      <UserHelpText>请输入必填内容</UserHelpText>
      <Restriction>
        <Pattern RegularExpression="^.{1,}$" HelpText>此字段为必填项，不能为空</Pattern>
      </Restriction>
    </ClaimType>
  </ClaimsSchema>
  

• 2. 创建自断言技术配置文件
  配置一个自断言技术配置文件，关联自定义页面、必填声明，并设置Continue按钮文本：

  <TechnicalProfile Id="SelfAsserted-PreSignupPage">
    <DisplayName>Pre-Signup Custom Page</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.custom</Item>
      <Item Key="UserMessageIfClaimsNotProvided">请完成必填字段</Item>
    </Metadata>
    <OutputClaims>
      <OutputClaim ClaimTypeReferenceId="customRequiredField" Required="true" />
    </OutputClaims>
    <UserInterface>
      <UserInterfaceControl Id="Button.Submit">
        <DisplayName>Continue</DisplayName>
      </UserInterfaceControl>
    </UserInterface>
  </TechnicalProfile>
  

• 3. 在用户旅程中插入前置步骤
  在注册步骤（通常是api.localaccountsignup或api.signuporsignin）之前添加编排步骤，调用上述技术配置文件：

  <OrchestrationStep Order="1" Type="ClaimsExchange">
    <ClaimsExchanges>
      <ClaimsExchange Id="PreSignupExchange" TechnicalProfileReferenceId="SelfAsserted-PreSignupPage" />
    </ClaimsExchanges>
  </OrchestrationStep>
  <!-- 原注册步骤，例如： -->
  <OrchestrationStep Order="2" Type="ClaimsExchange">
    <ClaimsExchanges>
      <ClaimsExchange Id="SignUpExchange" TechnicalProfileReferenceId="LocalAccountSignUpWithLogonEmail" />
    </ClaimsExchanges>
  </OrchestrationStep>
  

• 4. 验证流程
  发布更新后的自定义策略，测试时会先显示带必填字段的自定义页面，用户填写并点击Continue后，才会跳转至常规注册页面。

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