B2C Signup Page - Show assertion fields after email verification

1
votes

To a certain degree, this question was already asked: Azure B2C sign-up. Hide password fields until verification code entered?

However, at the time of the question the feature (JavaScript) was not available. It is now.

  • We are using custom policies
  • We already have a custom UI (static HTML+CSS) for the signup page

However, I am unsure of how to best achieve my desired result. What would be the best way to react to a successful verification? I am currently unsure as to how to catch the event.

The examples are rather minimal and don't show anything about reacting to B2C (internal?) events like the verification.

https://docs.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.
2
javascriptazureazure-ad-b2c
Hi @Alex AIT: As an alternative to using a custom page script for this, have you considered splitting the sign-up page UI into 2 -- one for the email address with verification and another for the profile fields? – Chris Padgett
@ChrisPadgett thank you for this great idea. By chance, do you have any examples for custom policies where the email verification and the password entry was put on different pages? – Alex AIT

2 Answers

0
votes

Right now this feature is not available in B2C sign up page using JS. You can add it in support request if you think ,this is required feature in forum.Please make sure to implement custom policy if the request can be fulfilled using policies and it 's a recommend way too.

Here is the guideline for using javascript in B2C sign up page

Guidelines for using JavaScript

Follow these guidelines when you customize the interface of your application using JavaScript: • Don't bind a click event on HTML elements.

• Don’t take a dependency on Azure AD B2C code or comments.

• Don't change the order or hierarchy of Azure AD B2C HTML elements. Use an Azure AD B2C policy to control the order of the UI elements.

• You can call any RESTful service with these considerations:

o You may need to set your RESTful service CORS to allow client-side HTTP calls.

o Make sure your RESTful service is secure and uses only the HTTPS protocol.

o Don't use JavaScript directly to call Azure AD B2C endpoints.

• You can embed your JavaScript or you can link to external JavaScript files. When using an external JavaScript file, make sure to use the absolute URL and not a relative URL.

• JavaScript frameworks:

o Azure AD B2C uses a specific version of jQuery. Don’t include another version of jQuery. Using more than one version on the same page causes issues.

o Using RequireJS isn't supported.

o Most JavaScript frameworks are not supported by Azure AD B2C.

• Azure AD B2C settings can be read by calling window.SETTINGS, window.CONTENT objects, such as the current UI language. Don’t change the value of these objects.

• To customize the Azure AD B2C error message, use localization in a policy.

• If anything can be achieved by using a policy, generally it's the recommended way.

0
votes

The recommended way is to implement this without JavaScript if at all possible. This is quite easy once you understand a bit more about how the policies work.

Basic idea: Split the technical profiles into two, based on the claims you want to show.

    <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>

Second: Split your user yourney into two steps, referencing the technical profiles.

        <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>