Bug in self-asserted page layout version 2.1.2

sgdesmet commented 3 years ago

Some error messages for display controls are not shown in version 2.1.2. The culprit seems to be an unknown variable isMessageSafe in the B2C Javascript handling display control state:

PS: if there is a more appropriate location to report these kinds of issues, please let me know!

Document Details

⚠ Do not edit this section. It is required for docs.microsoft.com ➟ GitHub issue linking.

ID: c4272fbd-ad3d-6099-39bc-966320101b03
Version Independent ID: ac21035f-4145-b309-d45c-3c38e965301d
Content: Page layout versions - Azure AD B2C
Content Source: articles/active-directory-b2c/page-layout.md
Service: active-directory
Sub-service: b2c
GitHub Login: @msmimart
Microsoft Alias: mimart

JamesTran-MSFT commented 3 years ago

@sgdesmet Thanks for your feedback! We will investigate and update as appropriate.

JamesTran-MSFT commented 3 years ago

@sgdesmet Thank you for pointing this out! I've reached out to our engineering team regarding this and will update as soon as possible.

JamesTran-MSFT commented 3 years ago

@sgdesmet Thank you for your time and patience!

When it comes to this potential bug can you share some more details so we can gain a better understanding of your issue/environment.

What documentation/steps did you follow/take to set this up?
Can you share the repro steps so we can try reproducing this issue on our end?
For the error message, are you able to share a screenshot of it? Or the share the full error message?

Any additional details or screenshots would be much appreciated.

If you have any other questions, please let me know. Thank you!

sgdesmet commented 3 years ago

Hello @JamesTran-MSFT, we have a custom DisplayControl to do email verification. This DisplayControl has an additional ValidationClaimsExchangeTechnicalProfile which validates that the email is not yet in use. It does so by combining an AAD Technical Profile and a AssertStringClaimsAreEqual output claims transformation, similar to what is done here: link. This is as a workaround for AAD technical profiles not supporting RaiseErrorIfClaimsPrincipalAlreadyExists for read operations.

The display control looks something like this:

<DisplayControl Id="emailVerificationControl-CreateMailadres" UserInterfaceControlType="VerificationControl">
    <DisplayClaims>
      <DisplayClaim ClaimTypeReferenceId="email" Required="true" />
      <DisplayClaim ClaimTypeReferenceId="verificationCode" ControlClaimType="VerificationCode" Required="true" />
    </DisplayClaims>
    <OutputClaims>
      <OutputClaim ClaimTypeReferenceId="email" />
    </OutputClaims>
    <Actions>
      <Action Id="SendCode">
        <ValidationClaimsExchange>
          <ValidationClaimsExchangeTechnicalProfile TechnicalProfileReferenceId="AAD-UserReadUsingEmailAddress-RaiseIfExists" ContinueOnError="true"/>
          <ValidationClaimsExchangeTechnicalProfile TechnicalProfileReferenceId="GenerateOtp" />
          <ValidationClaimsExchangeTechnicalProfile TechnicalProfileReferenceId="SendOtp">
            <Preconditions>
              <Precondition Type="ClaimEquals" ExecuteActionsIf="false">
                <Value>existingObjectId</Value>
                <Value>NOTFOUND</Value>
                <Action>SkipThisValidationTechnicalProfile</Action>
              </Precondition>
            </Preconditions>
          </ValidationClaimsExchangeTechnicalProfile>
        </ValidationClaimsExchange>
      </Action>
      <Action Id="VerifyCode">
        <ValidationClaimsExchange>
          <ValidationClaimsExchangeTechnicalProfile TechnicalProfileReferenceId="VerifyOtp" />
        </ValidationClaimsExchange>
      </Action>
    </Actions>
  </DisplayControl>

AAD Profile:

<TechnicalProfile Id="AAD-UserReadUsingEmailAddress-RaiseIfExists">
      <Metadata>
        <Item Key="Operation">Read</Item>
        <Item Key="RaiseErrorIfClaimsPrincipalDoesNotExist">false</Item>
        <Item Key="UserMessageIfClaimsTransformationStringsAreNotEqual">The email address is already in use.</Item>
      </Metadata>
      <IncludeInSso>false</IncludeInSso>
      <InputClaims>
        <InputClaim ClaimTypeReferenceId="email" PartnerClaimType="signInNames.emailAddress" />
      </InputClaims>
      <OutputClaims>
        <!-- Required claims -->
        <OutputClaim ClaimTypeReferenceId="existingObjectId" PartnerClaimType="objectId" DefaultValue="NOTFOUND" />
        <OutputClaim ClaimTypeReferenceId="objectIdNotFound" DefaultValue="NOTFOUND" AlwaysUseDefaultValue="true" />
      </OutputClaims>
      <OutputClaimsTransformations>
        <OutputClaimsTransformation ReferenceId="AssertObjectIdObjectIdNotFoundAreEqual" />
      </OutputClaimsTransformations>
      <IncludeTechnicalProfile ReferenceId="AAD-Common" />
    </TechnicalProfile>

UserMessageIfClaimsTransformationStringsAreNotEqual is localized as well:

<LocalizedString ElementType="ErrorMessage" StringId="UserMessageIfClaimsTransformationStringsAreNotEqual">Er bestaat reeds een account met het opgegeven e-mailadres. Kies een nieuw adres.</LocalizedString>

When using contract urn:com:microsoft:aad:b2c:elements:contract:selfasserted:2.1.2, we encounter the bug described above when entering an email adress already in use, and the UserMessageIfClaimsTransformationStringsAreNotEqual would be shown. The error message is instead not shown and the buttons for de Display Control disappear. The issue is not encountered in versions 2.1.0 and 2.1.1

The error message:

However, other info or error messages are shown, e.g. UserMessageIfInvalidCode or success_send_code_msg

I don't know if it is relevant, but JavaScript has been enabled in the user flow, and some javascript is used on the selfasserted page to apply some styling which was not possible using CSS alone.

JamesTran-MSFT commented 3 years ago

@sgdesmet Thank you for the quick and detailed response! I'll pass this info along to our engineering team and update as soon as possible.

JamesTran-MSFT commented 3 years ago

@sgdesmet Thank you for your time and patience on throughout this issue. I received an update from our engineering team and will post it below.

Update: Can you try the latest page layout version 2.1.4 and confirm if the issue still persists? 2.1.4 uses latest jQuery version. For more info - https://docs.microsoft.com/en-us/azure/active-directory-b2c/page-layout

stevenxzhou-zz commented 3 years ago

Same issue may apply to 2.1.4 as well. Will fix it in version selfasserted-2.1.5. WIP

JamesTran-MSFT commented 3 years ago

@sgdesmet I just wanted to check in and see if you had any other questions or if you had a chance to see if version 2.1.4 will work for your environment?

sgdesmet commented 3 years ago

@JamesTran-MSFT I just tested version 2.1.4, and as @stevenxzhou already suspected, the issue was not solved yet.

JamesTran-MSFT commented 3 years ago

@sgdesmet Thank you for the quick follow up!

Since @stevenxzhou is part of our PG team, it sounds like they'll "fix it in version selfasserted-2.1.5. WIP". I'll also update my team on this and see if there's anything else we can do from our end.

JamesTran-MSFT commented 3 years ago

@sgdesmet Thank you for your time and patience on throughout this issue.

As mentioned by @stevenxzhou, we'll fix this issue in version selfasserted-2.1.5. WIP. The only workaround for now is you can choose to override our method "changeVerificationControlState" with the typo corrected using custom JS.

Since our engineering team is aware of this issue and will be working on a fix, I'll go ahead and close out this issue. Thank you again for your time and patience throughout this whole process!

MicrosoftDocs / azure-docs

Bug in self-asserted page layout version 2.1.2 #72247

Document Details