用于 Azure Active Directory B2C 中的 JavaScript 示例JavaScript samples for use in Azure Active Directory B2C

Note

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

可以向 Azure Active Directory B2C (Azure AD B2C) 应用程序添加自己的 JavaScript 客户端代码。You can add your own JavaScript client-side code to your Azure Active Directory B2C (Azure AD B2C) applications.

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

本文介绍如何更改自定义策略以启用脚本执行。This article describes how you can change your custom policy to enable script execution.

Note

如果要为用户流启用 JavaScript,请参阅 Azure Active Directory B2C 中的 JavaScript 和页面布局版本If you want to enable JavaScript for user flows, see JavaScript and page layout versions in Azure Active Directory B2C.

必备条件Prerequisites

选择页面布局Select a page layout

  • 为应用程序的用户界面元素选择页面布局Select a page layout for the user interface elements of your application.

    如果打算使用 JavaScript,则需要为自定义策略中的所有内容定义定义页面布局版本和页面contract版本 。If you intend to use JavaScript, you need to define a page layout version with page contract version for all of the content definitions in your custom policy.

添加 ScriptExecution 元素Add the ScriptExecution element

通过向 RelyingParty元素添加 ScriptExecution 元素来启用脚本执行 。You enable script execution by adding the ScriptExecution element to the RelyingParty element.

  1. 打开自定义策略文件。Open your custom policy file. 例如,SignUpOrSignin.xml 。For example, SignUpOrSignin.xml.

  2. 向 RelyingParty 的 UserJourneyBehaviors 元素添加 ScriptExecution 元素 :Add the ScriptExecution element to the UserJourneyBehaviors element of RelyingParty:

    <RelyingParty>
      <DefaultUserJourney ReferenceId="B2CSignUpOrSignInWithPassword" />
      <UserJourneyBehaviors>
        <ScriptExecution>Allow</ScriptExecution>
      </UserJourneyBehaviors>
      ...
    </RelyingParty>
    
  3. 保存并上传文件。Save and upload the file.

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.

JavaScript 示例JavaScript samples

显示或隐藏密码Show or hide a password

帮助客户成功注册的一种常见的方式是:允许他们查看他们作为密码输入的内容。A common way to help your customers with their sign-up success is to allow them to see what they’ve entered as their password. 该选项使用户能够根据需要轻松查看和更正密码,从而帮助用户登录。This option helps users sign up by enabling them to easily see and make corrections to their password if needed. 任何密码类型的字段都有一个带有“显示密码”标签的复选框 。Any field of type password has a checkbox with a Show password label. 这使用户能够看到纯文本形式的密码。This enables the user to see the password in plain text. 使自断言页面的注册或登录模板中包括以下代码片段:Include this code snippet into your sign-up or sign-in template for a self-asserted page:

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();

添加使用条款Add terms of use

使需要包含“使用条款”复选框的页面中含有以下代码 。Include the following code into your page where you want to include a Terms of Use checkbox. 本地帐户注册和社交帐户注册页面中通常需要该复选框。This checkbox is typically needed in your local account sign-up and social account sign-up pages.

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://docs.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 替换使用条款协议的链接。In the code, replace termsOfUseUrl with the link to your terms of use agreement. 对于你的目录,创建一个名为 termsOfUse 的新用户属性,然后包括 termsOfUse 作为用户属性。For your directory, create a new user attribute called termsOfUse and then include termsOfUse as a user attribute.