在 Azure Active Directory B2C 中启用 JavaScript 和页面布局版本

开始之前,请使用此页顶部的“选择策略类型”选择器来选择要设置的策略类型。 Azure Active Directory B2C 提供了两种定义用户如何与应用程序交互的方法:通过预定义的用户流,或者通过可完全配置的自定义策略。 对于每种方法,本文中所需的步骤都不同。

借助 Azure Active Directory B2C (Azure AD B2C) HTML 模板,可以创建用户的身份体验。 HTML 模板只能包含某些 HTML 标记和特性。 允许的基本 HTML 标记,例如 <b>、<i>、<u>、<h1> 和 <hr>。 出于安全原因,删除了更高级的标记(如 <script> 和 <iframe>),但 <head> 标记中应添加 <script> 该标记。 从自汇编页面布局版本 2.1.21 / unifiedssp 版本 2.1.10/ 多重版本 1.2.10 开始,B2C 不支持在 <body> 标记中添加脚本(因为这可能会给跨站点脚本攻击带来风险)。 将现有脚本从 <body> 迁移到 <head> 有时可能需要使用突变观察程序重写现有脚本才能正常工作。

应以两种方式在 <head> 标记中添加 <script> 标记:

  1. 添加 defer 属性,该属性指定在分析页面的同时下载脚本,然后在页面完成分析后执行该脚本:

     <script src="my-script.js" defer></script>
    
  2. 添加 async 属性,该属性指定在分析页面的同时下载脚本,然后脚本在可用后立即执行(在分析完成之前):

     <script src="my-script.js" async></script>	
    

启用 JavaScript 并推进 HTML 标记和属性:

先决条件

开始设置页面布局版本

如果打算启用 JavaScript 客户端代码,则 JavaScript 所基于的元素必须是不可变的。 如果它们不是不可变的,则任何更改都可能会导致用户页上出现意外行为。 为了防止这些问题,请强制使用页面布局,并指定页面布局版本,确保 JavaScript 所基于的内容定义是不可变的。 即使不打算启用 JavaScript,也可为页面指定页面布局版本。

为用户流页面指定页面布局版本:

  1. 在 Azure AD B2C 租户中,选择“用户流” 。
  2. 选择策略(例如,“B2C_1_SignupSignin”)将其打开。
  3. 选择“页面布局”。 选择“布局名称”,然后选择“页面布局版本”。

若要了解不同的页面布局版本,请参阅页面布局版本更改日志

门户中的页面布局设置,显示了页面布局版本下拉列表

若要为自定义策略页面指定页面布局版本,请执行以下操作:

  1. 为应用程序的用户界面元素选择页面布局
  2. 为自定义策略中的所有内容定义定义页面布局版本和页面contract版本。 值的格式必须包含单词 contracturn:com:microsoft:aad:b2c:elements:contract:page-name:version

以下示例显示了内容定义标识符以及对应的包含页面协定的 DataUri:

<ContentDefinitions>
  <ContentDefinition Id="api.error">
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:globalexception:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.idpselections">
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:providerselection:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.idpselections.signup">
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:providerselection:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.signuporsignin">
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:unifiedssp:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.selfasserted">
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.selfasserted.profileupdate">
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.localaccountsignup">
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.localaccountpasswordreset">
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.phonefactor">
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:multifactor:1.2.0</DataUri>
  </ContentDefinition>
</ContentDefinitions>

启用 JavaScript

在用户流属性中,可以启用 JavaScript。 启用 JavaScript 也会强制使用页面布局。 然后就可以设置用户流的页面布局版本,如下一部分所述。

用户流属性页面,突出显示了“启用 JavaScript”设置

通过向 RelyingParty元素添加 ScriptExecution 元素来启用脚本执行

  1. 打开自定义策略文件。 例如,SignUpOrSignin.xml

  2. ScriptExecution 元素添加到 RelyingParty 元素中:

    <RelyingParty>
      <DefaultUserJourney ReferenceId="SignUpOrSignIn" />
      <UserJourneyBehaviors>
        <ScriptExecution>Allow</ScriptExecution>
      </UserJourneyBehaviors>
      ...
    </RelyingParty>
    
  3. 保存并上传文件。

JavaScript 的使用准则

按照以下准则,使用 JavaScript 自定义应用程序的界面:

  • 禁止事项:
    • <a> HTML 元素上绑定单击事件。
    • 依赖 Azure AD B2C 代码或注释。
    • 更改 Azure AD B2C HTML 元素的顺序或层次结构。 使用 Azure AD B2C 策略控制 UI 元素的顺序。
  • 在调用 RESTful 服务时考虑到以下事项:
    • 可能需要设置 RESTful 服务 CORS 才能实现客户端 HTTP 调用。
    • 确保 RESTful 服务安全,且它仅使用 HTTPS 协议。
    • 不直接使用 JavaScript 来调用Azure AD B2C 终结点。
  • 可以嵌入 JavaScript,也可以链接到外部 JavaScript 文件。 如果是使用外部 JavaScript 文件,请确保使用 绝对 URL,而不是相对 URL。
  • JavaScript 框架:
    • Azure AD B2C 使用 jQuery 的特定版本。 不包括 jQuery 的其他版本。 在同一页面上使用多个版本会造成问题。
    • 不支持使用 RequireJS。
    • Azure AD B2C 不支持大多数 JavaScript 框架。
  • 可通过调用 window.SETTINGSwindow.CONTENT 对象读取 Azure AD B2C 设置,例如当前的 UI 语言。 勿更改这些对象的值。
  • 若要自定义 Azure AD B2C 错误消息,请在策略中使用本地化。
  • 如果可以通过策略实现一切操作,建议这样做。
  • 建议使用现有的 UI 控件(如按钮),而不是隐藏它们并在自己的 UI 控件上实现点击绑定。 此方法可确保即使在我们发布新的页面合同升级时,用户体验也能继续正常运行。

JavaScript 示例

显示或隐藏密码

帮助客户成功注册的一种常见的方式是:允许他们查看他们作为密码输入的内容。 该选项使用户能够根据需要轻松查看和更正密码,从而帮助用户登录。 任何密码类型的字段都有一个带有“显示密码”标签的复选框。 这使用户能够看到纯文本形式的密码。 使自断言页面的注册或登录模板中包括以下代码片段:

function makePwdToggler(pwd){
  // Create show-password checkbox
  var checkbox = document.createElement('input');
  checkbox.setAttribute('type', 'checkbox');
  var id = pwd.id + 'toggler';
  checkbox.setAttribute('id', id);

  var label = document.createElement('label');
  label.setAttribute('for', id);
  label.appendChild(document.createTextNode('show password'));

  var div = document.createElement('div');
  div.appendChild(checkbox);
  div.appendChild(label);

  // Add show-password checkbox under password input
  pwd.insertAdjacentElement('afterend', div);

  // Add toggle password callback
  function toggle(){
    if(pwd.type === 'password'){
      pwd.type = 'text';
    } else {
      pwd.type = 'password';
    }
  }
  checkbox.onclick = toggle;
  // For non-mouse usage
  checkbox.onkeydown = toggle;
}

function setupPwdTogglers(){
  var pwdInputs = document.querySelectorAll('input[type=password]');
  for (var i = 0; i < pwdInputs.length; i++) {
    makePwdToggler(pwdInputs[i]);
  }
}

setupPwdTogglers();

添加使用条款

使需要包含“使用条款”复选框的页面中含有以下代码。 本地帐户注册和社交帐户注册页面中通常需要该复选框。

function addTermsOfUseLink() {
    // find the terms of use label element
    var termsOfUseLabel = document.querySelector('#api label[for="termsOfUse"]');
    if (!termsOfUseLabel) {
        return;
    }

    // get the label text
    var termsLabelText = termsOfUseLabel.innerHTML;

    // create a new <a> element with the same inner text
    var termsOfUseUrl = 'https://learn.microsoft.com/legal/termsofuse';
    var termsOfUseLink = document.createElement('a');
    termsOfUseLink.setAttribute('href', termsOfUseUrl);
    termsOfUseLink.setAttribute('target', '_blank');
    termsOfUseLink.appendChild(document.createTextNode(termsLabelText));

    // replace the label text with the new element
    termsOfUseLabel.replaceChild(termsOfUseLink, termsOfUseLabel.firstChild);
}

在代码中,将 termsOfUseUrl 替换使用条款协议的链接。 对于你的目录,创建一个名为 termsOfUse 的新用户属性,然后包括 termsOfUse 作为用户属性。

或者,可以在自断言页面底部添加链接,而无需使用 JavaScript。 使用以下本地化:

<LocalizedResources Id="api.localaccountsignup.en">
  <LocalizedStrings>
    <!-- The following elements will display a link at the bottom of the page. -->
    <LocalizedString ElementType="UxElement" StringId="disclaimer_link_1_text">Terms of use</LocalizedString>
    <LocalizedString ElementType="UxElement" StringId="disclaimer_link_1_url">termsOfUseUrl</LocalizedString>
    </LocalizedStrings>
</LocalizedResources>

termsOfUseUrl 替换为组织隐私策略和使用条款的链接。

后续步骤

详细了解如何在 Azure Active Directory B2C 中自定义应用程序的用户界面