Azure Active Directory B2C で JavaScript とページレイアウトのバージョンを有効にする

2025-05-05

重要

2025 年 5 月 1 日より、Azure AD B2C は新規のお客様向けに購入できなくなります。詳細については、FAQ を参照してください。

開始する前にこのページの上部にある ポリシーの種類 セレクターを使用して、設定するポリシーの種類を選択します。 Azure Active Directory B2C には、ユーザーがアプリケーションを操作する方法を定義する 2 つの方法 (定義済みのユーザーフローを使用する、または完全に構成可能なカスタムポリシーを使用する) があります。この記事で必要な手順は、方法ごとに異なります。

Azure Active Directory B2C (Azure AD B2C) HTML テンプレートを使用すると、ユーザーの ID エクスペリエンスを作成できます。 HTML テンプレートには、特定の HTML タグと属性のみを含めることができます。 <b>、<i>、<u>、<h1>、<hr などの基本的な HTML タグが許可されます>。セキュリティ上の理由から、<script>、<iframe などのより高度なタグは削除されますが><script>タグは<head> タグに追加する必要があります。 selfasserted ページレイアウトバージョン 2.1.21/unifiedssp バージョン 2.1.10/多要素バージョン 1.2.10 以降では、B2C は <body> タグへのスクリプトの追加をサポートしていません (クロスサイトスクリプティング攻撃のリスクが発生する可能性があります)。既存のスクリプトを <body> から <head> に移行するには、適切な作業のために既存のスクリプトを変更オブザーバーで書き換える必要がある場合があります。

<script> タグは、次の 2 つの方法で <head> タグに追加する必要があります。

defer属性を追加します。この属性は、スクリプトがページの解析と並行してダウンロードされることを指定します。その後、スクリプトはページの解析が完了した後に実行されます。
```
 <script src="my-script.js" defer></script>
```
スクリプト async ページの解析と並行してダウンロードされることを指定する属性を追加すると、(解析が完了する前に) 使用可能になるとすぐにスクリプトが実行されます。
```
 <script src="my-script.js" async></script>	
```

JavaScript を有効にし、HTML タグと属性を拡張するには:

ページレイアウトを選択する
Azure portal を使用してユーザーフローで有効にする
要求で b2clogin.com を使用する

ページレイアウトを選択する
カスタムポリシーに要素を追加する
要求で b2clogin.com を使用する

[前提条件]

ユーザーがサインアップしてアプリケーションにサインインできるように、ユーザーフローを作成します。
Web アプリケーションを登録します。

「Active Directory B2C でのカスタムポリシーの概要」の手順を完了してください。このチュートリアルでは、Azure AD B2C テナント構成を使用するようにカスタムポリシーファイルを更新する方法について説明します。
Web アプリケーションを登録します。

ページレイアウトバージョンの設定を開始する

JavaScript クライアント側コードを有効にする場合、JavaScript の基になる要素は不変である必要があります。変更できない場合は、変更によってユーザーページで予期しない動作が発生する可能性があります。これらの問題を回避するには、ページレイアウトの使用を強制し、ページレイアウトバージョンを指定して、JavaScript の基になっているコンテンツ定義が不変であることを確認します。 JavaScript を有効にする予定がない場合でも、ページのページレイアウトバージョンを指定できます。

ユーザーフローページのページレイアウトバージョンを指定するには:

Azure AD B2C テナントで、[ ユーザーフロー] を選択します。
ポリシー ("B2C_1_SignupSignin" など) を選択して開いてください。
[ページレイアウト] を選択します。 レイアウト名を選択し、[ページレイアウトバージョン] を選択します。

さまざまなページレイアウトバージョンの詳細については、ページレイアウトのバージョン変更ログを参照してください。

ページレイアウトバージョンのドロップダウンを表示するポータルのページレイアウト設定

カスタムポリシーページのページレイアウトバージョンを指定するには:

アプリケーションのユーザーインターフェイス要素のページレイアウトを選択します。
カスタムポリシー内のすべてのコンテンツ定義に対して、ページ contract バージョンを使用してページ レイアウトバージョンを定義します。値の形式には、contract: urn: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 を有効にする] 設定が強調表示されている [ユーザーフローのプロパティ] ページ

スクリプトの実行を有効にするには、 ScriptExecution 要素を RelyingParty 要素に追加します。

カスタムポリシーファイルを開きます。たとえば、 SignUpOrSignin.xmlします。

ScriptExecution 要素を RelyingParty 要素に追加します。

<RelyingParty>
  <DefaultUserJourney ReferenceId="SignUpOrSignIn" />
  <UserJourneyBehaviors>
    <ScriptExecution>Allow</ScriptExecution>
  </UserJourneyBehaviors>
  ...
</RelyingParty>

ファイルを保存してアップロードします。

JavaScript の使用に関するガイドライン

JavaScript を使用してアプリケーションのインターフェイスをカスタマイズする場合は、次のガイドラインに従います。

しないでください
- HTML 要素に対してクリックイベント <a> バインドします。
- Azure AD B2C のコードやコメントに依存するようにします。
- Azure AD B2C HTML 要素の順序または階層を変更します。 Azure AD B2C ポリシーを使用して、UI 要素の順序を制御します。
次の考慮事項を使用して、任意の RESTful サービスを呼び出すことができます。
- 場合によっては、クライアント側の HTTP 呼び出しを許可するように RESTful サービス CORS を設定する必要があります。
- RESTful サービスがセキュリティで保護されており、HTTPS プロトコルのみを使用していることを確認します。
- JavaScript を直接使用して Azure AD B2C エンドポイントを呼び出さないでください。
JavaScript を埋め込んだり、外部の JavaScript ファイルにリンクしたりできます。外部 JavaScript ファイルを使用する場合は、相対 URL ではなく絶対 URL を使用してください。
JavaScript フレームワーク:
- Azure AD B2C では、特定のバージョンの jQuery が使用されます。 jQuery の別のバージョンを含めないでください。同じページで複数のバージョンを使用すると、問題が発生します。
- RequireJS の使用はサポートされていません。
- ほとんどの JavaScript フレームワークは、Azure AD B2C ではサポートされていません。
Azure AD B2C 設定は、現在の UI 言語などの window.SETTINGS、 window.CONTENT オブジェクトを呼び出すことによって読み取ることができます。これらのオブジェクトの値は変更しないでください。
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 でアプリケーションのユーザーインターフェイスをカスタマイズする方法の詳細について説明します。

次の方法で共有

Azure Active Directory B2C で JavaScript とページ レイアウトのバージョンを有効にする