Azure B2C SMS OTP Verification with Custom Display Control - azure-ad-b2c

Question

I'm currently working through a couple of situations here...
Where the current OTP functionality for SMS that I have does not auto submit the verification code when using an IPhone (paste functionality). I'm trying to add a "Verify" button on that screen to enable the users to be able to submit, liberating this lack in functionality.
using a custom display control to only show the US country code.
I am still seeing the default of all country codes and there is no button populating... I'm not sure what I'm missing here.
please find the components of the policy below...
<ClaimType Id="countryCode">
<DisplayName>Country</DisplayName>
<DataType>string</DataType>
<UserHelpText>Enter Country</UserHelpText>
<UserInputType>DropdownSingleSelect</UserInputType>
<Restriction>
<Enumeration Text="United States (+1)" Value="US" />
</Restriction>
</ClaimType>
<DisplayControl Id="phoneVerificationControl-Custom" UserInterfaceControlType="VerificationControl">
<InputClaims>
<InputClaim ClaimTypeReferenceId="Verified.strongAuthenticationPhoneNumber" />
<InputClaim ClaimTypeReferenceId="countryCode" />
</InputClaims>
<DisplayClaims>
<DisplayClaim ClaimTypeReferenceId="countryCode" ControlClaimType="CountryCode" Required="true" />
<DisplayClaim ClaimTypeReferenceId="Verified.strongAuthenticationPhoneNumber" ControlClaimType="Phone" Required="true" />
<DisplayClaim ClaimTypeReferenceId="verificationCode" ControlClaimType="VerificationCode" Required="true" />
</DisplayClaims>
<Actions>
<Action Id="SendCode">
<ValidationClaimsExchange>
<ValidationClaimsExchangeTechnicalProfile TechnicalProfileReferenceId="CombineCountryCodeAndNationalNumber" />
<ValidationClaimsExchangeTechnicalProfile TechnicalProfileReferenceId="AzureMfa-SendSms" />
</ValidationClaimsExchange>
</Action>
<Action Id="VerifyCode">
<ValidationClaimsExchange>
<ValidationClaimsExchangeTechnicalProfile TechnicalProfileReferenceId="CombineCountryCodeAndNationalNumber" />
<ValidationClaimsExchangeTechnicalProfile TechnicalProfileReferenceId="AzureMfa-VerifySms" />
</ValidationClaimsExchange>
</Action>
</Actions>
</DisplayControl>
<TechnicalProfile Id="PhoneFactor-InputOrVerify">
<DisplayName>PhoneFactor</DisplayName>
<Protocol Name="Proprietary" Handler="Web.TPEngine.Providers.PhoneFactorProtocolProvider, Web.TPEngine, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null" />
<Metadata>
<Item Key="ContentDefinitionReferenceId">api.phonefactor</Item>
<Item Key="ManualPhoneNumberEntryAllowed">true</Item>
<!-- This would be the verification button element -->
<Item Key="Operation">VerifyCode</Item>
</Metadata>
<CryptographicKeys>
<Key Id="issuer_secret" StorageReferenceId="B2C_1A_TokenSigningKeyContainer" />
</CryptographicKeys>
<InputClaimsTransformations>
<InputClaimsTransformation ReferenceId="CreateUserIdForMFA" />
</InputClaimsTransformations>
<InputClaims>
<InputClaim ClaimTypeReferenceId="userIdForMFA" PartnerClaimType="UserId" />
<InputClaim ClaimTypeReferenceId="Verified.strongAuthenticationPhoneNumber" />
</InputClaims>
<DisplayClaims>
<DisplayClaim DisplayControlReferenceId="phoneVerificationControl-Custom" />
</DisplayClaims>
<OutputClaims>
<!-- Although 'Verified.OfficePhone' here makes no sense... it has to be that way. -->
<OutputClaim ClaimTypeReferenceId="Verified.strongAuthenticationPhoneNumber" PartnerClaimType="Verified.OfficePhone" />
<OutputClaim ClaimTypeReferenceId="newPhoneNumberEntered" PartnerClaimType="newPhoneNumberEntered" />
<OutputClaim ClaimTypeReferenceId="extension_mfaPhoneContactInformation" />
</OutputClaims>
<UseTechnicalProfileForSessionManagement ReferenceId="SM-MFA-Phone" />
</TechnicalProfile>
<SubJourney Id="phone-flow" Type="Call">
<OrchestrationSteps>
<OrchestrationStep Order="1" Type="ClaimsExchange">
<ClaimsExchanges>
<ClaimsExchange Id="PhoneFactor-Verify" TechnicalProfileReferenceId="PhoneFactor-InputOrVerify" />
</ClaimsExchanges>
</OrchestrationStep>
<OrchestrationStep Order="2" Type="ClaimsExchange">
<ClaimsExchanges>
<ClaimsExchange Id="CopyVerifiedPhoneIntoExtension" TechnicalProfileReferenceId="CopyVerifiedPhoneIntoExtension" />
</ClaimsExchanges>
</OrchestrationStep>
<OrchestrationStep Order="3" Type="ClaimsExchange">
<ClaimsExchanges>
<ClaimsExchange Id="AADUserReadWithObjectId" TechnicalProfileReferenceId="AAD-UserReadUsingObjectId" />
</ClaimsExchanges>
</OrchestrationStep>
<!-- Save MFA phone number -->
<OrchestrationStep Order="4" Type="ClaimsExchange">
<Preconditions>
<Precondition Type="ClaimsExist" ExecuteActionsIf="false">
<Value>newPhoneNumberEntered</Value>
<Action>SkipThisOrchestrationStep</Action>
</Precondition>
</Preconditions>
<ClaimsExchanges>
<ClaimsExchange Id="AADUserWriteWithObjectId" TechnicalProfileReferenceId="AAD-UserWritePhoneNumberUsingObjectId" />
</ClaimsExchanges>
</OrchestrationStep>
</OrchestrationSteps>
</SubJourney>

Answer 1

For the verify button to show up, update the version in DataUri property of ContentDefinition.
<ContentDefinition Id="api.phonefactor">
...
<DataUri>urn:com:microsoft:aad:b2c:elements:contract:multifactor:1.2.5</DataUri>
...
</ContentDefinition>
If you are planning to use display controls instead, I believe you need to use a Self Asserted technical profile instead of PhoneFactor one. Ensure you use a new version of selfAsserted page (Update DataUri in ContentDefinition). eg: 2.1.6.