Azure B2C custom Sign up not displaying input fields

Question

So I am trying to build a custom sign up page, and I need the first name, last name and phone number.

I am building out a proof of concept first so I am using one of the templates to see if i can push it to our API.

In the Extensions I have this technical profile.

<TechnicalProfile Id="LocalAccountSignUpWithLogonEmailCustom">
          <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="ContentDefinitionReferenceId">api.localaccountsignup</Item>
            <Item Key="language.button_continue">Create</Item>
          </Metadata>
          <CryptographicKeys>
            <Key Id="issuer_secret" StorageReferenceId="B2C_1A_TokenSigningKeyContainer" />
          </CryptographicKeys>
          <InputClaimsTransformations>
            <InputClaimsTransformation ReferenceId="GetCurrentDateTime" />
          </InputClaimsTransformations>
          <InputClaims>
            <InputClaim ClaimTypeReferenceId="extension_termsOfUseConsentChoice" DefaultValue="AgreeToTermsOfUseConsentNo" />
          </InputClaims>
          <OutputClaims>
            <OutputClaim ClaimTypeReferenceId="objectId" />
            <OutputClaim ClaimTypeReferenceId="email" PartnerClaimType="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" />
            <!-- Optional claims, to be collected from the user -->
            <OutputClaim ClaimTypeReferenceId="givenName" PartnerClaimType="FirstName" />
            <OutputClaim ClaimTypeReferenceId="surName" PartnerClaimType="LastName" />
            <OutputClaim ClaimTypeReferenceId="extension_termsOfUseConsentChoice" Required="true" />
          </OutputClaims>
          <ValidationTechnicalProfiles>
            <ValidationTechnicalProfile ReferenceId="AAD-UserWriteUsingLogonEmail" />
          </ValidationTechnicalProfiles>
        </TechnicalProfile>
        <!-- During sign up, write the current time of consent, and version -->
        <TechnicalProfile Id="AAD-UserWriteUsingLogonEmail">
          <PersistedClaims>
            <PersistedClaim ClaimTypeReferenceId="currentTime" PartnerClaimType="extension_termsOfUseConsentDateTime" />
            <PersistedClaim ClaimTypeReferenceId="extension_termsOfUseConsentChoice" />
            <PersistedClaim ClaimTypeReferenceId="extension_termsOfUseConsentVersion" DefaultValue="V1" />
          </PersistedClaims>
        </TechnicalProfile>

This profile seems to work fine.

I see all the fields thats are in the output claims which is givenName and Surname and obviously the email and password.

But I want to add phone number and zip code.

When i add the following claims.

<OutputClaim ClaimTypeReferenceId="extension_phonenumber" PartnerClaimType="phonenumber" />
<OutputClaim ClaimTypeReferenceId="postalCode" PartnerClaimType="zipcode" />

I get this issue when i try to render the sign up page.

The page cannot be displayed because an internal server error has occurred.

I have made sure in my base file this is in the input claim

  <InputClaim ClaimTypeReferenceId="postalCode" />

Im kind of at a loss for how to collect this user information..

Answer 1

I am using similar technical profile. I just added one more ValidationTechnicalProfile to make a call to rest api to validate the email address. When this new ValidationTechnicalProfile is added, email textbox from signup page gone missing. Below are the technical profiles. When I remove Business-Validation-Api from ValidationTechnicalProfile, signup page gets normal with email address field.

<TechnicalProfile Id="Business-Validation-Api">
    <DisplayName>Validate business and return company name</DisplayName>
    <Protocol Name="Proprietary"
        Handler="Web.TPEngine.Providers.RestfulProvider, Web.TPEngine, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null" />
    <Metadata>
        <Item Key="ServiceUrl">
            https://webhook.site/4a32025d-8fff-47e3-b355-56fd3a339e05/business/email/{email}</Item>
        <Item Key="AuthenticationType">Basic</Item>
        <Item Key="SendClaimsIn">Url</Item>
        <Item Key="DefaultUserMessageIfRequestFailed">Failed to validate the business</Item>
    </Metadata>
    <CryptographicKeys>
        <Key Id="BasicAuthenticationUsername" StorageReferenceId="B2C_1A_B2cMuleClientId" />
        <Key Id="BasicAuthenticationPassword" StorageReferenceId="B2C_1A_B2cMuleClientSecret" />
    </CryptographicKeys>
    <InputClaims>
        <InputClaim ClaimTypeReferenceId="email" />
    </InputClaims>
    <OutputClaims>
        <OutputClaim ClaimTypeReferenceId="extension_CompanyName" PartnerClaimType="company-name" />
        <OutputClaim ClaimTypeReferenceId="email" />
        <OutputClaim ClaimTypeReferenceId="extension_CompanyId" PartnerClaimType="company-id" />
    </OutputClaims>
</TechnicalProfile>

<TechnicalProfile Id="LocalAccountSignUpWithLogonEmailCustom">
    <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="ContentDefinitionReferenceId">api.localaccountsignup</Item>
        <Item Key="language.button_continue">Create</Item>
        <Item Key="EnforceEmailVerification">false</Item>
    </Metadata>
    <CryptographicKeys>
        <Key Id="issuer_secret" StorageReferenceId="B2C_1A_TokenSigningKeyContainer" />
    </CryptographicKeys>
    <InputClaimsTransformations>
        <InputClaimsTransformation ReferenceId="GetCurrentDateTime" />
    </InputClaimsTransformations>
    <InputClaims>
        <InputClaim ClaimTypeReferenceId="extension_termsOfUseConsentChoice"
            DefaultValue="AgreeToTermsOfUseConsentNo" />
    </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" />
        <!-- Optional claims, to be collected from the user -->
        <OutputClaim ClaimTypeReferenceId="givenName" />
        <OutputClaim ClaimTypeReferenceId="surName" />
        <OutputClaim ClaimTypeReferenceId="extension_termsOfUseConsentChoice" Required="true" />
        <OutputClaim ClaimTypeReferenceId="termsOfUseConsentRequired" DefaultValue="false"
            AlwaysUseDefaultValue="true" />
    </OutputClaims>
    <ValidationTechnicalProfiles>
        <ValidationTechnicalProfile ReferenceId="Business-Validation-Api" />
        <ValidationTechnicalProfile ReferenceId="AAD-UserWriteUsingLogonEmail" />
    </ValidationTechnicalProfiles>
</TechnicalProfile>

Signup page looks like below now.

Answer 2

They shouldn’t have partnerclaimtypes. And make sure the claim definition of each output claim has a userInputType defined.