Azure Active Directory B2C 中的 JavaScript 和页面布局版本JavaScript and page layout versions in Azure Active Directory B2C

备注

此功能目前以公共预览版提供。This feature is in public preview.

Azure AD B2C 提供一组打包的内容,其中包含的 HTML、CSS 和 JavaScript 适用于用户流中的用户界面元素和自定义策略。Azure AD B2C provides a set of packaged content containing HTML, CSS, and JavaScript for the user interface elements in your user flows and custom policies.

若要为应用程序启用 JavaScript,请执行以下操作:To enable JavaScript for your applications:

如果打算启用 JavaScript 客户端代码,则 JavaScript 所基于的元素必须是不可变的。If you intend to enable JavaScript client-side code, the elements you base your JavaScript on must be immutable. 如果它们不是不可变的,则任何更改都可能会导致用户页上出现意外行为。If they're not immutable, any changes could cause unexpected behavior on your user pages. 为了防止这些问题,请强制使用页面布局,并指定页面布局版本,确保 JavaScript 所基于的内容定义是不可变的。To prevent these issues, enforce the use of a page layout and specify a page layout version to ensure the content definitions you’ve based your JavaScript on are immutable. 即使不打算启用 JavaScript,也可为页面指定页面布局版本。Even if you don’t intend to enable JavaScript, you can specify a page layout version for your pages.

启用 JavaScriptEnable JavaScript

在用户流属性中,可以启用 JavaScript。In the user flow Properties, you can enable JavaScript. 启用 JavaScript 也会强制使用页面布局。Enabling JavaScript also enforces the use of a page layout. 然后就可以设置用户流的页面布局版本,如下一部分所述。You can then set the page layout version for the user flow as described in the next section.

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

选择页面布局版本Select a page layout version

不管是否在用户流的属性中启用 JavaScript,都可以为用户流页面指定页面布局版本。Whether or not you enable JavaScript in your user flow's properties, you can specify a page layout version for your user flow pages. 打开用户流,然后选择“页面布局” 。Open the user flow and select Page layouts. 在“布局名称”下选择一个用户流页面,然后选择“页面布局版本(预览版)”。 Under Layout name, select a user flow page and choose the Page Layout Version (Preview).

若要了解不同的页面布局版本,请参阅页面布局版本更改日志For information about the different page layout versions, see the Page layout version change log.

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

JavaScript 的使用准则Guidelines for using JavaScript

按照以下准则,使用 JavaScript 自定义应用程序的界面:Follow these guidelines when you customize the interface of your application using JavaScript:

  • 不对 <a> HTML 元素绑定单击事件。Don't bind a click event on <a> HTML elements.
  • 不依赖 Azure AD B2C 代码或注释。Don’t take a dependency on Azure AD B2C code or comments.
  • 不更改 Azure AD B2C HTML 元素的顺序或层次结构。Don't change the order or hierarchy of Azure AD B2C HTML elements. 使用 Azure AD B2C 策略控制 UI 元素的顺序。Use an Azure AD B2C policy to control the order of the UI elements.
  • 在调用 RESTful 服务时考虑到以下事项:You can call any RESTful service with these considerations:
    • 可能需要设置 RESTful 服务 CORS 才能实现客户端 HTTP 调用。You may need to set your RESTful service CORS to allow client-side HTTP calls.
    • 确保 RESTful 服务安全,且它仅使用 HTTPS 协议。Make sure your RESTful service is secure and uses only the HTTPS protocol.
    • 不直接使用 JavaScript 来调用Azure AD B2C 终结点。Don't use JavaScript directly to call Azure AD B2C endpoints.
  • 可以嵌入 JavaScript,也可以链接到外部 JavaScript 文件。You can embed your JavaScript or you can link to external JavaScript files. 如果是使用外部 JavaScript 文件,请确保使用 绝对 URL,而不是相对 URL。When using an external JavaScript file, make sure to use the absolute URL and not a relative URL.
  • JavaScript 框架:JavaScript frameworks:
    • Azure AD B2C 使用 jQuery 的特定版本。Azure AD B2C uses a specific version of jQuery. 不包括 jQuery 的其他版本。Don’t include another version of jQuery. 在同一页面上使用多个版本会造成问题。Using more than one version on the same page causes issues.
    • 不支持使用 RequireJS。Using RequireJS isn't supported.
    • Azure AD B2C 不支持大多数 JavaScript 框架。Most JavaScript frameworks are not supported by Azure AD B2C.
  • 可通过调用 window.SETTINGSwindow.CONTENT 对象读取 Azure AD B2C 设置,例如当前的 UI 语言。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.
  • 若要自定义 Azure AD B2C 错误消息,请在策略中使用本地化。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.

后续步骤Next steps

有关 JavaScript 使用的示例,可参阅在 Azure Active Directory B2C 中使用的 JavaScript 示例You can find examples of JavaScript usage in JavaScript samples for use in Azure Active Directory B2C.