Azure Active Directory B2C における JavaScript とページ レイアウトのバージョンJavaScript and page layout versions in Azure Active Directory B2C

"開始する前に" 、上記のセレクターを使用して、構成するポリシーの種類を選択してください。Before you begin, use the selector above to choose the type of policy you’re configuring. Azure AD B2C には、ユーザーがアプリケーションを操作する方法を定義する 2 つの方法 (定義済みのユーザー フローを使用する、または完全に構成可能なカスタム ポリシーを使用する) があります。Azure AD B2C offers two methods of defining how users interact with your applications: through predefined user flows, or through fully configurable custom policies. この記事で必要な手順は、方法ごとに異なります。The steps required in this article are different for each method.

注意

Azure Active Directory B2C で、カスタム ポリシーは、主に、複雑なシナリオに取り組む用途向けに設計されています。In Azure Active Directory B2C, custom policies are designed primarily to address complex scenarios. ほとんどのシナリオで、組み込みユーザー フローを使用することをお勧めします。For most scenarios, we recommend that you use built-in user flows.

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:

前提条件Prerequisites

ページ レイアウトのバージョンを選択するSelect a page layout version

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.

ユーザー フロー ページのページ レイアウト バージョンを指定するには、次のようにします。To specify a page layout version for your user flow pages:

  1. Azure AD B2C テナントで、 [ユーザー フロー] を選択します。In your Azure AD B2C tenant, select User flows.
  2. ポリシー ("B2C_1_SignupSignin" など) を選択して開きます。Select your policy (for example, "B2C_1_SignupSignin") to open it.
  3. [Page layouts](ページ レイアウト) を選択します。Select Page layouts. [レイアウト名] を選択し、 [ページ レイアウト バージョン (プレビュー)] を選択します。Choose a Layout name, and then choose the Page Layout Version (Preview).

さまざまなページ レイアウトのバージョンの詳細については、ページ レイアウトのバージョン変更ログに関する記事を参照してください。For information about the different page layout versions, see the Page layout version change log.

ポータルでのページ レイアウト設定でページ レイアウトのバージョンのドロップダウン リストを表示した状態

アプリケーションのユーザー インターフェイスの要素にページ レイアウトを選択します。Select a page layout for the user interface elements of your application.

カスタム ポリシーのコンテンツ定義の "すべて" に対して、ページ contract バージョンを使用して ページ レイアウト バージョンを定義します。Define a page layout version with page contract version for all of the content definitions in your custom policy. 値の形式には、次のように contract という語が含まれている必要があります: urn:com:microsoft:aad:b2c:elements:contract:page-name:versionThe format of the value must contain the word contract: urn:com:microsoft:aad:b2c:elements:contract:page-name:version. ページ バージョンでページ レイアウトに移行する方法について説明します。Learn how to Migrating to page layout with page version.

次の例は、コンテンツ定義識別子と、対応する DataUri をページ コントラクトと共に示しています。The following example shows the content definition identifiers and the corresponding DataUri with page contract:

<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 を有効にするEnable 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 の有効化設定を強調したユーザー フローのプロパティ ページ

ScriptExecution 要素を RelyingParty 要素に追加することで、スクリプトの実行を有効にします。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 要素に ScriptExecution 要素を追加します。Add the ScriptExecution element to the RelyingParty element:

    <RelyingParty>
      <DefaultUserJourney ReferenceId="SignUpOrSignIn" />
      <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. UI 要素の順序を制御するには、Azure AD B2C のポリシーを使用します。Use an Azure AD B2C policy to control the order of the UI elements.
  • 任意の RESTful サービスを呼び出すことができますが、次の考慮事項があります。You can call any RESTful service with these considerations:
    • クライアント側の HTTP 呼び出しを許可するために、RESTful サービス CORS を設定することが必要な場合があります。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.
    • ほとんどの JavaScript フレームワークは、Azure AD B2C ではサポートされていません。Most JavaScript frameworks are not supported by Azure AD B2C.
  • window.SETTINGSwindow.CONTENT オブジェクト (現在の UI 言語など) を呼び出すことによって、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.
  • 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.

次のステップNext steps

Azure Active Directory B2C でのアプリケーションのユーザー インターフェイスのカスタマイズに関する記事を参照して、アプリケーションのユーザー インターフェイスをカスタマイズする方法の詳細を確認します。Find more information about how you can customize the user interface of your applications in Customize the user interface of your application in Azure Active Directory B2C.