Azure AD B2C自定义策略中QR code URI正确但二维码不显示问题

背景 #

在Azure AD B2C自定义策略中实现TOTP多因素认证（MFA），生成的QR码URI（qrCodeContent）格式符合otpauth://totp/Test:user@example.com?secret=...&issuer=Test的规范，已通过claims bag、日志及二维码生成工具验证。

qrCodeContent示例

otpauth://totp/Test:steveTest@gmail.com?secret=evrg2znbpbyamdo3&issuer=Test&algorithm=SHA1&digits=6&period=30

问题现象 #

尽管qrCodeContent值完全正确，但在用户旅程的自断言表单上，二维码始终无法显示。

已执行的排查操作 #

• 确认claims bag中存在qrCodeContent声明，且值正确无误；
• 验证二维码对应的DisplayControl（totpQrCodeControl）已完成配置，并在技术配置文件中正确引用；
• 检查内容定义与页面布局，未发现异常；
• 浏览器控制台无JavaScript或网络错误；
• 重新上传并应用策略，排除缓存影响。

相关配置代码 #

ContentDefinition #

<ContentDefinition Id="api.selfasserted.totp">
    <LoadUri>~/tenant/templates/AzureBlue/selfasserted.cshtml</LoadUri>
    <RecoveryUri>~/common/default_page_error.html</RecoveryUri>
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:1.2.0</DataUri>
    <Metadata>
        <Item Key="DisplayName">TOTP Authenticator Setup</Item>
        <Item Key="IncludeErrorInResponse">true</Item>
    </Metadata>
</ContentDefinition>

Technical Profile #

<TechnicalProfile Id="EnableOTPAuthentication">
    <DisplayName>Enable Authenticator app</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.totp</Item>
        <Item Key="language.button_continue">Continue</Item>
    </Metadata>
    <CryptographicKeys>
        <Key Id="issuer_secret"
             StorageReferenceId="B2C_1A_TokenSigningKeyContainer" />
    </CryptographicKeys>
    <InputClaimsTransformations>
        <InputClaimsTransformation ReferenceId="CreateSecret" />
        <InputClaimsTransformation ReferenceId="SetTotpIssuer" />
        <InputClaimsTransformation ReferenceId="FormatTotpLabel" />
        <InputClaimsTransformation ReferenceId="CreateQrCodeUri" />
        <!-- same id, new logic -->
    </InputClaimsTransformations>
    <InputClaims>
        <InputClaim ClaimTypeReferenceId="QrCodeScanInstruction"
                    DefaultValue="Scan this QR code with your Authenticator app" />
    </InputClaims>
    <DisplayClaims>
        <DisplayClaim DisplayControlReferenceId="authenticatorAppIconControl" />
        <DisplayClaim ClaimTypeReferenceId="QrCodeScanInstruction" />
        <DisplayClaim DisplayControlReferenceId="totpQrCodeControl" />
        <!-- add this single line -->
        <DisplayClaim DisplayControlReferenceId="authenticatorInfoControl" />
    </DisplayClaims>
    <OutputClaims>
        <OutputClaim ClaimTypeReferenceId="objectId" />
        <OutputClaim ClaimTypeReferenceId="secretKey" />
        <!-- add this so the value is sent to the page -->
        <OutputClaim ClaimTypeReferenceId="qrCodeContent" />
    </OutputClaims>
    <UseTechnicalProfileForSessionManagement ReferenceId="SM-MFA-TOTP" />
</TechnicalProfile>

内容的提问来源于stack exchange，提问作者Ret 2