Search code examples
azure-ad-b2c-custom-policyazure-ad-b2c

Azure B2C Custom Policy - Email Verification using Azure AD SSPR Technical Profile fails to show Verify/Send buttons also the text box

I am using custom policy for the email verification and it's used with Azure AD SSPR technical profile and Self asserted technical profile.
Azure AD SSPR technical profile it is used as a validation technical profile as is suggested, in the Self Asserted technical profile.
With what it fails to show me is the Verify and Send button and also the text box to introduce the code received in the email. Only the Continue button it's showed and it can be pressed on. If it is pressed, an email will be send with the code.

<TechnicalProfiles>
    <!--Sample: Verify the Email Page-->
    <TechnicalProfile Id="VerifyEmailAddress">
      <DisplayName>Verify Email Address</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>
      <InputClaims>         
        <InputClaim ClaimTypeReferenceId="signInNames.emailAddress" />
      </InputClaims>
      <!--<DisplayClaims>
        <DisplayClaim DisplayControlReferenceId="emailVerificationControl" />
      </DisplayClaims>-->
      <OutputClaims>
        <OutputClaim ClaimTypeReferenceId="signInNames.emailAddress"/>
      </OutputClaims>
       <ValidationTechnicalProfiles>
         <ValidationTechnicalProfile ReferenceId="AadSspr-SendCode" ContinueOnError ="false" /> 
        <ValidationTechnicalProfile ReferenceId="AadSspr-VerifyCode" ContinueOnError ="false" />
      </ValidationTechnicalProfiles>
      <UseTechnicalProfileForSessionManagement ReferenceId="SM-Noop" />
    </TechnicalProfile>

Technical Profiles for AadSspr-SendCode and AadSspr-VerifyCode are taken from the microsoft page: Azure AD SSPR technical profile in an Azure AD B2C custom policy

<TechnicalProfiles>
  <TechnicalProfile Id="AadSspr-SendCode">
    <DisplayName>Send Code</DisplayName>
    <Protocol Name="Proprietary" Handler="Web.TPEngine.Providers.AadSsprProtocolProvider, Web.TPEngine, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null" />
    <Metadata>
      <Item Key="Operation">SendCode</Item>
    </Metadata>
    <InputClaims>
      <InputClaim ClaimTypeReferenceId="signInNames.emailAddress" PartnerClaimType="emailAddress"/>
    </InputClaims>
  </TechnicalProfile>
  <TechnicalProfile Id="AadSspr-VerifyCode">
    <DisplayName>Verify Code</DisplayName>
    <Protocol Name="Proprietary" Handler="Web.TPEngine.Providers.AadSsprProtocolProvider, Web.TPEngine, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null" />
    <Metadata>
      <Item Key="Operation">VerifyCode</Item>
    </Metadata>
    <InputClaims>
      <InputClaim ClaimTypeReferenceId="verificationCode" PartnerClaimType="verificationCode" />
      <InputClaim ClaimTypeReferenceId="signInNames.emailAddress" PartnerClaimType="emailAddress"/>
    </InputClaims>
  </TechnicalProfile>
</TechnicalProfiles>

Only works if it's used with the DisplayControl. So you can see I have DisplayClaims, which has a reference ID. DisplayControl was taken also from microsoft page: Display controls

<DisplayControls>
<DisplayControl Id="emailVerificationControl" UserInterfaceControlType="VerificationControl">
  <InputClaims>
    <InputClaim ClaimTypeReferenceId="signInNames.emailAddress" Required="true"/>
  </InputClaims>
  <DisplayClaims>
    <DisplayClaim ClaimTypeReferenceId="signInNames.emailAddress" Required="true" />
    <DisplayClaim ClaimTypeReferenceId="verificationCode" ControlClaimType="VerificationCode" Required="true" />
  </DisplayClaims>
  <Actions>
    <Action Id="SendCode">
      <ValidationClaimsExchange>
        <ValidationClaimsExchangeTechnicalProfile TechnicalProfileReferenceId="AadSspr-SendCode" />
      </ValidationClaimsExchange>
    </Action>
    <Action Id="VerifyCode">
      <ValidationClaimsExchange>
        <ValidationClaimsExchangeTechnicalProfile TechnicalProfileReferenceId="AadSspr-VerifyCode" />
      </ValidationClaimsExchange>
    </Action>
  </Actions>
</DisplayControl>

What am I missing ? regarding the issue that I encounter.

Solution

  • They can work with validation technical profiles, but the usage is different, as the doc states, since they do not have a UI. A displaycontrol provides an easy way to interact with these tech profiles on a single page, otherwise you’d have to use individual self asserted tech profiles, one to tell the user a code is about to be submitted on page submit, then a page to ask the user for the code, which would be validated on page submit.