javascript - B2C 注册页面 - 电子邮件验证后显示断言字段

Question

在某种程度上，这个问题已经被问过: Azure B2C sign-up. Hide password fields until verification code entered?

但是，在提出问题时，该功能 (JavaScript) 不可用。就是现在。

• 我们正在使用自定义政策
• 我们已经为注册页面提供了自定义 UI(静态 HTML+CSS)

但是，我不确定如何最好地实现我想要的结果。对成功验证使用react的最佳方式是什么？我目前不确定如何 catch 该事件。

这些示例相当少，并且没有显示任何有关对 B2C(内部？)事件(例如验证)使用react的内容。

https://learn.microsoft.com/en-us/azure/active-directory-b2c/javascript-samples

• Don't bind a click event on HTML elements.
• Don’t take a dependency on Azure AD B2C code or comments.

Answer 1

如果可能的话，推荐的方法是不使用 JavaScript 来实现这一点。一旦您更多地了解了政策的运作方式，这就会很容易。

基本思想:根据您想要展示的声明，将技术简介分为两部分。

    <ClaimsProvider>
      <DisplayName>Local Account</DisplayName>
      <TechnicalProfiles>
        <!-- First page of signup containing only email verification -->
        <TechnicalProfile Id="LocalAccountSignUpWithLogonEmail_Custom">
          <DisplayName>Email signup</DisplayName>
          <Protocol Name="Proprietary" Handler="Web.TPEngine.Providers.SelfAssertedAttributeProvider, Web.TPEngine, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null" />
          <Metadata>
            <Item Key="IpAddressClaimReferenceId">IpAddress</Item>
            <Item Key="ContentDefinitionReferenceId">api.localaccountsignup</Item>
            <Item Key="language.button_continue">Create</Item>
          </Metadata>
          <CryptographicKeys>
            <Key Id="issuer_secret" StorageReferenceId="B2C_1A_TokenSigningKeyContainer" />
          </CryptographicKeys>
          <InputClaims>
            <InputClaim ClaimTypeReferenceId="email" />
          </InputClaims>
          <OutputClaims>
            <OutputClaim ClaimTypeReferenceId="email" PartnerClaimType="Verified.Email" Required="true" />
          </OutputClaims>
        </TechnicalProfile>
        <!-- Second page of signup after email verification -->
        <TechnicalProfile Id="LocalAccountSignUpWithLogonEmail_Custom2">
          <DisplayName>Email signup</DisplayName>
          <Protocol Name="Proprietary" Handler="Web.TPEngine.Providers.SelfAssertedAttributeProvider, Web.TPEngine, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null" />
          <Metadata>
            <Item Key="IpAddressClaimReferenceId">IpAddress</Item>
            <Item Key="ContentDefinitionReferenceId">api.localaccountsignup</Item>
            <Item Key="language.button_continue">Create</Item>
          </Metadata>
          <CryptographicKeys>
            <Key Id="issuer_secret" StorageReferenceId="B2C_1A_TokenSigningKeyContainer" />
          </CryptographicKeys>
          <InputClaims>
            <InputClaim ClaimTypeReferenceId="email" />
          </InputClaims>
          <OutputClaims>
            <OutputClaim ClaimTypeReferenceId="objectId" />
            <OutputClaim ClaimTypeReferenceId="email" PartnerClaimType="Verified.Email" Required="true" />
            <OutputClaim ClaimTypeReferenceId="newPassword" Required="true" />
            <OutputClaim ClaimTypeReferenceId="reenterPassword" Required="true" />
            <OutputClaim ClaimTypeReferenceId="executed-SelfAsserted-Input" DefaultValue="true" />
            <OutputClaim ClaimTypeReferenceId="authenticationSource" />
            <OutputClaim ClaimTypeReferenceId="newUser" />
            <OutputClaim ClaimTypeReferenceId="displayName" Required="true" />
          </OutputClaims>
          <ValidationTechnicalProfiles>
            <ValidationTechnicalProfile ReferenceId="AAD-UserWriteUsingLogonEmail" />
          </ValidationTechnicalProfiles>
          <UseTechnicalProfileForSessionManagement ReferenceId="SM-AAD" />
        </TechnicalProfile>
      </TechnicalProfiles>
    </ClaimsProvider>

第二:将您的用户分成两个步骤，引用技术配置文件。

        <OrchestrationStep Order="2" Type="ClaimsExchange">
          <ClaimsExchanges>
            <ClaimsExchange Id="SignUpWithLogonEmailExchange" TechnicalProfileReferenceId="LocalAccountSignUpWithLogonEmail_Custom" />
          </ClaimsExchanges>
        </OrchestrationStep>
        <OrchestrationStep Order="3" Type="ClaimsExchange">
          <ClaimsExchanges>
            <ClaimsExchange Id="SignUpWithLogonEmailExchange2" TechnicalProfileReferenceId="LocalAccountSignUpWithLogonEmail_Custom2" />
          </ClaimsExchanges>
        </OrchestrationStep>