JavaScript samples for use in Azure Active Directory B2C

Note

Custom policies are in public preview.

Custom policies are designed primarily to address complex scenarios. For most scenarios, we recommend that you use Azure Active Directory B2C built-in policies. Built-in policies are easier to set up for your configuration.

You can add your own JavaScript client-side code to your Azure Active Directory (Azure AD) B2C applications. This article describes how you can change your user flow or custom policy to enable script execution.

Prerequisites

Select a page contract for the user interface elements of your application. If you intend to use JavaScript, you need to define a page contract version for all of your content definitions in your user flow or custom policy.

Add the ScriptExecution element

You enable script execution by adding the ScriptExecution element to the RelyingParty element.

  1. Open your custom policy file. For example, SignUpOrSignin.xml.

  2. 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.

Guidelines for using JavaScript

Follow these guidelines when you customize the interface of your application using JavaScript:

  • Don't bind a click event on <a> HTML elements.
  • Don’t take a dependency on Azure AD B2C code or comments.
  • Don't change the order or hierarchy of Azure AD B2C HTML elements. Use an Azure AD B2C policy to control the order of the UI elements.
  • You can call any RESTful service with these considerations:
    • You may need to set your RESTful service CORS to allow client-side HTTP calls.
    • Make sure your RESTful service is secure and uses only the HTTPS protocol.
    • Don't use JavaScript directly to call Azure AD B2C endpoints.
  • You can embed your JavaScript or you can link to external JavaScript files. When using an external JavaScript file, make sure to use the absolute URL and not a relative URL.
  • JavaScript frameworks:
    • Azure AD B2C uses a specific version of jQuery. Don’t include another version of jQuery. Using more than one version on the same page causes issues.
    • Using RequireJS isn't supported.
    • Most JavaScript frameworks are not supported by Azure AD B2C.
  • 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.
  • 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 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);
}

In the code, replace terms-of-use-url with the link to your terms of use agreement. For your directory, create a new user attribute called termsOfUse and then include termsOfUse as a user attribute for your user flow.

Next steps

Find more information about how you can customize the user interface of your applications in Customize the user interface of your application using a custom policy in Azure Active Directory B2C.