Azure Active Directory B2C で HTML テンプレートを使用してユーザーインターフェイスをカスタマイズする

2025-05-08

重要

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

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

Azure Active Directory B2C (Azure AD B2C) が顧客に表示するユーザーインターフェイスのブランド化とカスタマイズは、アプリケーションでシームレスなユーザーエクスペリエンスを提供するのに役立ちます。これらのエクスペリエンスには、サインアップ、サインイン、プロファイル編集、パスワードのリセットが含まれます。この記事では、ユーザーインターフェイス (UI) のカスタマイズ方法について説明します。

ヒント

ユーザーフローページのバナーロゴ、背景画像、背景色のみを変更する場合は、会社のブランド化機能を試すことができます。

カスタム HTML と CSS の概要

Azure AD B2C は、クロスオリジンリソース共有 (CORS) を使用して、顧客のブラウザーでコードを実行します。実行時に、ユーザーフローまたはカスタムポリシーで指定した URL からコンテンツが読み込まれます。ユーザーエクスペリエンスの各ページは、そのページに指定した URL からコンテンツを読み込みます。コンテンツが URL から読み込まれた後、Azure AD B2C によって挿入された HTML フラグメントとマージされ、ページが顧客に表示されます。

カスタムページコンテンツの余白

カスタム HTML ページのコンテンツ

独自のブランドを使用して HTML ページを作成し、カスタムページコンテンツを提供します。このページには、静的な *.html ページや、.NET、Node.js、PHP などの動的ページを使用できますが、Azure B2C ではビューエンジンはサポートされません。動的ページのサーバー側レンダリングは、専用の Web アプリケーションによって実行する必要があります。

カスタムページコンテンツには、CSS や JavaScript を含む HTML 要素を含めることができますが、iframe のような安全でない要素を含めることはできません。唯一必要な要素は、 id が apiに設定された div 要素です(HTML ページ内の <div id="api"></div> など)。

<!DOCTYPE html>
<html>
<head>
    <title>My Product Brand Name</title>
</head>
<body>
    <div id="api"></div>
</body>
</html>

既定の Azure AD B2C ページをカスタマイズする

カスタムページコンテンツをゼロから作成する代わりに、Azure AD B2C の既定のページコンテンツをカスタマイズできます。

次の表に、Azure AD B2C によって提供される既定のページコンテンツを示します。ファイルをダウンロードし、独自のカスタムページを作成するための開始点として使用します。サンプルテンプレートをダウンロードして使用する方法については、サンプルテンプレートを参照してください。

ページ	説明	テンプレート
統合サインアップ・ログイン	このページでは、ユーザーのサインアップとサインインのプロセスを処理します。ユーザーは、エンタープライズ ID プロバイダー、Facebook、Microsoft アカウント、ローカルアカウントなどのソーシャル ID プロバイダーを使用できます。	クラシック、オーシャンブルー、スレートグレー。
サインイン (のみ)	サインインページは、 ID プロバイダーの選択とも呼ばれます。ローカルアカウントまたはフェデレーション ID プロバイダーを使用してユーザーのサインインを処理します。このページを使用して、サインアップする機能を持たないサインインを許可します。たとえば、ユーザーが自分のプロファイルを編集する前などです。	クラシック、オーシャンブルー、スレートグレー。
セルフアサート	ユーザーが入力を提供することが期待される Azure AD B2C でのほとんどの対話は、セルフアサートされます。たとえば、サインアップページ、サインインページ、パスワードリセットページなどです。このテンプレートは、ソーシャルアカウントサインアップページ、ローカルアカウントサインアップページ、ローカルアカウントサインインページ、パスワードリセット、プロファイルの編集、ブロックページなどのカスタムページコンテンツとして使用します。セルフアサートページには、テキスト入力ボックス、パスワード入力ボックス、ラジオボタン、単一選択ドロップダウンボックス、複数選択チェックボックスなど、さまざまな入力コントロールを含めることができます。	クラシック、オーシャンブルー、スレートグレー。
多要素認証	このページでは、ユーザーはサインアップまたはサインイン中に (テキストまたは音声を使用して) 自分の電話番号を確認できます。	クラシック、オーシャンブルー、スレートグレー。
エラー	このページは、例外またはエラーが発生したときに表示されます。	クラシック、オーシャンブルー、スレートグレー。

ページコンテンツのホスト

独自の HTML ファイルと CSS ファイルを使用して UI をカスタマイズする場合は、CORS をサポートする一般公開されている HTTPS エンドポイントで UI コンテンツをホストします。たとえば、 Azure Blob Storage、 Azure App Services、Web サーバー、CDN、AWS S3、ファイル共有システムなどです。

カスタムページコンテンツを使用するためのガイドライン

HTML ファイルにメディア、CSS、JavaScript ファイルなどの外部リソースを含める場合は、絶対 URL を使用します。
ページレイアウトバージョン 1.2.0 以降を使用すると、HTML タグに data-preload="true" 属性を追加して、CSS と JavaScript の読み込み順序を制御できます。 data-preload="true"では、ページはユーザーに表示される前に構築されます。この属性は、スタイルが設定されていない HTML をユーザーに表示せずに CSS ファイルをプリロードすることで、ページが "ちらつき" するのを防ぐのに役立ちます。次の HTML コードスニペットは、 data-preload タグの使用方法を示しています。
```
<link href="https://path-to-your-file/sample.css" rel="stylesheet" type="text/css" data-preload="true"/>
```
既定のページコンテンツから始めて、その上に構築することをお勧めします。
カスタムコンテンツに JavaScript を含めることができます。
サポートされているブラウザーのバージョンは次のとおりです。
- Internet Explorer 11、10、Microsoft Edge
- Internet Explorer 9 と 8 の制限付きサポート
- Google Chrome 42.0 以降
- Mozilla Firefox 38.0 以降
- iOS および macOS バージョン 12 以降の Safari
セキュリティの制限により、Azure AD B2C は HTML 要素の frame、 iframe、または form をサポートしていません。

コンテンツをローカライズする

HTML コンテンツをローカライズするには、Azure AD B2C テナントで言語のカスタマイズを有効にします。この機能を有効にすると、Azure AD B2C は HTML ページ言語属性を設定し、 ui_locales OpenID Connect パラメーターをエンドポイントに渡すことができます。

単一テンプレートアプローチ

ページの読み込み中、Azure AD B2C は HTML ページ言語属性を現在の言語に設定します。たとえば、<html lang="en"> のようにします。現在の言語ごとに異なるスタイルをレンダリングするには、CSS 定義と共に CSS :lang セレクターを使用します。

次の例では、次のクラスを定義します。

imprint-en - 現在の言語が英語の場合に使用されます。
imprint-de - 現在の言語がドイツ語の場合に使用されます。
imprint - 現在の言語が英語またはドイツ語でない場合に使用される既定のクラス。

.imprint-en:lang(en),
.imprint-de:lang(de) {
    display: inherit !important;
}
.imprint {
    display: none;
}

ページ言語に応じて、次の HTML 要素が表示されます。

<a class="imprint imprint-en" href="Link EN">Imprint</a>
<a class="imprint imprint-de" href="Link DE">Impressum</a>

複数テンプレートのアプローチ

言語カスタマイズ機能を使用すると、Azure AD B2C は、OpenID Connect パラメーター ui_locales をエンドポイントに渡すことができます。コンテンツサーバーでは、このパラメーターを使用して言語固有の HTML ページを提供できます。

注

Azure AD B2C は、 ui_localesなどの OpenID Connect パラメーターを例外ページに渡しません。

コンテンツは、使用されているロケールに基づいてさまざまな場所からプルできます。 CORS 対応エンドポイントでは、特定の言語のコンテンツをホストするフォルダー構造を設定します。ワイルドカード値 {Culture:RFC5646} を使うと、適切なものが呼び出されます。

たとえば、カスタムページ URI は次のようになります。

https://contoso.blob.core.windows.net/{Culture:RFC5646}/myHTML/unified.html

次の場所からコンテンツをプルすることで、フランス語でページを読み込むことができます。

https://contoso.blob.core.windows.net/fr/myHTML/unified.html

カスタムページコンテンツのチュートリアル

プロセスの概要を以下に示します。

カスタムページコンテンツ (パブリックにアクセス可能な CORS 対応 HTTPS エンドポイント) をホストする場所を準備します。
unified.htmlなど、既定のページコンテンツファイルをダウンロードしてカスタマイズします。
パブリックに利用可能な HTTPS エンドポイントでカスタムページコンテンツを発行します。
Web アプリのクロスオリジンリソース共有 (CORS) を設定します。
ポリシーをカスタムポリシーコンテンツ URI にポイントします。

[前提条件]

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

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

1. HTML コンテンツを作成する

タイトルに製品のブランド名を含むカスタムページコンテンツを作成します。

次の HTML スニペットをコピーします。これは、<body>< タグ内にある > という空の要素を持つ、整った構造の HTML5 です。この要素は、Azure AD B2C コンテンツを挿入する場所を示します。
```
<!DOCTYPE html>
<html>
<head>
    <title>My Product Brand Name</title>
</head>
<body>
    <div id="api"></div>
</body>
</html>
```
コピーしたスニペットをテキストエディターに貼り付ける

CSS を使用して、Azure AD B2C がページに挿入する UI 要素のスタイルを設定します。次の例は、サインアップ挿入 HTML 要素の設定も含む単純な CSS ファイルを示しています。

h1 {
  color: blue;
  text-align: center;
}
.intro h2 {
  text-align: center;
}
.entry {
  width: 400px ;
  margin-left: auto ;
  margin-right: auto ;
}
.divider h2 {
  text-align: center;
}
.create {
  width: 400px ;
  margin-left: auto ;
  margin-right: auto ;
}

ファイルを customize-ui.htmlとして保存します。

注

login.microsoftonline.com を使用すると、セキュリティ上の制限により HTML フォーム要素が削除されます。カスタム HTML コンテンツで HTML フォーム要素を使用する場合は、 b2clogin.com を使用します。

2.Azure Blob Storage アカウントを作成する

この記事では、Azure Blob Storage を使用してコンテンツをホストします。コンテンツを Web サーバーでホストすることもできますが、 Web サーバーで CORS を有効にする必要があります。

注

Azure AD B2C テナントでは、BLOB ストレージをプロビジョニングできません。このリソースは、Microsoft Entra テナントで作成する必要があります。

BLOB ストレージで HTML コンテンツをホストするには、次の手順に従います。

Azure portal にサインインします。
複数のテナントにアクセスできる場合は、上部メニューの [設定] アイコンを選択して、[ ディレクトリ + サブスクリプション ] メニューから Microsoft Entra ID テナントに切り替えます。
Azure portal で、ストレージアカウントを検索して選択します
[+ 作成] を選択します。
ストレージアカウントの サブスクリプション を選択します。
リソースグループを作成するか、既存の リソースグループ を選択します。
ストレージアカウントの一意の ストレージアカウント名 を入力します。
ストレージアカウントの地理的 リージョン を選択します。
パフォーマンス は Standard のままです。
冗長性はジオ冗長ストレージ (GRS) のままでいられる
[ 確認と作成 ] を選択し、Microsoft Entra ID が検証を実行するまで数秒待ちます。
[作成] をクリックしてストレージアカウントを作成します。デプロイが完了すると、ストレージアカウントページが自動的に開くか、[ リソースに移動] を選択する必要があります。

2.1 コンテナーを作成する

Blob Storage にパブリックコンテナーを作成するには、次の手順に従います。

左端のメニューの [設定] で、[ 構成] を選択します。
[BLOB 匿名アクセスを許可する] を有効にします。
保存を選択します。
左側のメニューの [ データストレージ ] で、[コンテナー] を選択 します。
[+ コンテナー] を選択します。
[名前] に「root」と入力します。名前は 、contoso など、選択した名前にすることができますが、わかりやすくするためにこの例では root を使用します。
[パブリックアクセスレベル] で、[BLOB] を選択します。 BLOB オプションを選択すると、このコンテナーに対して匿名のパブリック読み取り専用アクセスを許可できます。
[作成] を選択して、コンテナーを作成します。
ルートを選択して新しいコンテナーを開きます。

2.2 カスタムページコンテンツファイルをアップロードする

[アップロード] を選択します。
[ファイルの選択] の横にあるフォルダーアイコン を選択します。
[ページ UI のカスタマイズ] セクションで先ほど作成した customize-ui.htmlに移動して選択します。
サブフォルダーにアップロードする場合は、[詳細設定] を展開し、[フォルダー にアップロード] にフォルダー名を入力します。
[アップロード] を選択します。
アップロードした customize-ui.html BLOB を選択します。
URL テキストボックスの右側にある [クリップボードにコピー] アイコンを選択して、URL をクリップボードにコピーします。
Web ブラウザーで、コピーした URL に移動して、アップロードした BLOB にアクセス可能であることを確認します。アクセスできない場合 (たとえば、 ResourceNotFound エラーが発生した場合)、コンテナーのアクセスの種類が BLOB に設定されていることを確認します。

3. CORS を構成する

次の手順を実行して、クロスオリジンリソース共有用に BLOB ストレージを構成します。

ストレージアカウントに移動します。
左側のメニューの [設定] で、[ リソース共有 (CORS)] を選択します。
[許可されたオリジン] に「https://your-tenant-name.b2clogin.com」と入力します。 your-tenant-nameを Azure AD B2C テナントの名前に置き換えます。たとえば、https://fabrikam.b2clogin.com のようにします。テナント名を入力するときは、すべて小文字を使用します。
[許可されるメソッド] で、GETとOPTIONSの両方を選択します。
許可されるヘッダーに、アスタリスク (*) を入力します。
[公開ヘッダー] には、アスタリスク (*) を入力します。
[最長年齢] に「200」と入力します。
ページの最上部で [保存] を選択します。

3.1 CORS のテスト

次の手順を実行して、準備ができていることを確認します。

CORS の構成手順を繰り返します。 [許可されたオリジン] に「https://www.test-cors.org」と入力します
www.test-cors.org に移動します
[ リモート URL ] ボックスに、HTML ファイルの URL を貼り付けます。たとえば、https://your-account.blob.core.windows.net/root/azure-ad-b2c/unified.html のように指定します。
[要求の送信] を選択します。結果は XHR status: 200 となるはずです。エラーが発生した場合は、CORS 設定が正しいことを確認してください。また、Ctrl キーを押しながら Shift キーを押しながら P キーを押して、ブラウザーのキャッシュをクリアするか、プライベートブラウズセッションを開く必要がある場合もあります。

Azure ストレージアカウントを作成および管理する方法の詳細について説明します。

4. ユーザーフローを更新する

複数のテナントにアクセスできる場合、上部のメニューの [設定] アイコンを選択し、[ディレクトリとサブスクリプション] メニューからお使いの Azure AD B2C テナントに切り替えます。
Azure portal で、 [Azure AD B2C] を検索して選択します。
左側のメニューで、[ ユーザーフロー] を選択し、 B2C_1_signupsignin1 ユーザーフローを選択します。
[ページレイアウト] を選択し、[統合サインアップまたはサインイン] ページの [カスタムページコンテンツを使用する] で [はい] を選択します。
[カスタムページ URI] に、前に記録した custom-ui.html ファイルの URI を入力します。
ページの最上部で [保存] を選択します。

5. ユーザーフローをテストする

Azure AD B2C テナントで、[ ユーザーフロー ] を選択し、 B2C_1_signupsignin1 ユーザーフローを選択します。
ページの上部にある [ ユーザーフローの実行] を選択します。
右側のウィンドウで、[ ユーザーフローの実行 ] ボタンを選択します。

作成した CSS ファイルに基づいて、要素が中央に配置された次の例のようなページが表示されます。

カスタム UI 要素を使用したサインアップまたはサインインページを示す Web ブラウザー

4. 拡張機能ファイルを変更する

UI のカスタマイズを構成するには、 ContentDefinition とその子要素を基本ファイルから拡張ファイルにコピーします。

ポリシーのベースファイルを開きます。たとえば、SocialAndLocalAccounts/TrustFrameworkBase.xml のようにします。この基本ファイルは、カスタムポリシースターターパックに含まれているポリシーファイルの 1 つであり、前提条件である「カスタムポリシーの概要」で取得しておく必要があります。
ContentDefinitions 要素の内容全体を検索してコピーします。
拡張ファイルを開きます。たとえば、 TrustFrameworkExtensions.xmlします。 BuildingBlocks 要素を検索します。要素が存在しない場合は、追加します。
BuildingBlocks 要素の子としてコピーした ContentDefinitions 要素の内容全体を貼り付けます。
コピーした XML 内のを含む Id="api.signuporsignin" 要素を検索します。

LoadUri の値を、ストレージにアップロードした HTML ファイルの URL に変更します。たとえば、https://your-storage-account.blob.core.windows.net/your-container/customize-ui.html のようにします。

カスタムポリシーは、次のコードスニペットのようになります。

<BuildingBlocks>
  <ContentDefinitions>
    <ContentDefinition Id="api.signuporsignin">
      <LoadUri>https://your-storage-account.blob.core.windows.net/your-container/customize-ui.html</LoadUri>
      <RecoveryUri>~/common/default_page_error.html</RecoveryUri>
      <DataUri>urn:com:microsoft:aad:b2c:elements:unifiedssp:1.0.0</DataUri>
      <Metadata>
        <Item Key="DisplayName">Signin and Signup</Item>
      </Metadata>
    </ContentDefinition>
  </ContentDefinitions>
</BuildingBlocks>

拡張機能ファイルを保存します。
JavaScript を有効にする

5. 更新されたカスタムポリシーをアップロードしてテストする

5.1 カスタムポリシーをアップロードする

複数のテナントにアクセスできる場合、上部のメニューの [設定] アイコンを選択し、[ディレクトリとサブスクリプション] メニューからお使いの Azure AD B2C テナントに切り替えます。
Azure AD B2C を検索して選択します。
[ ポリシー] で、[ Identity Experience Framework] を選択します。
[ カスタムポリシーのアップロード] を選択します。
以前に変更した拡張機能ファイルをアップロードします。

5.2 [今すぐ実行] を使用してカスタムポリシーをテストする

アップロードしたポリシーを選択し、[ 今すぐ実行] を選択します。
メールアドレスを使用してサインアップできる必要があります。

動的カスタムページコンテンツ URI の構成

Azure AD B2C カスタムポリシーを使用すると、URL パスまたはクエリ文字列でパラメーターを送信できます。パラメーターを HTML エンドポイントに渡すことで、ページのコンテンツを動的に変更することができます。たとえば、Web またはモバイルアプリケーションから渡すパラメーターに基づいて、Azure AD B2C サインアップまたはサインインページの背景イメージを変更できます。パラメーターには、アプリケーション ID、言語 ID、カスタムクエリ文字列パラメーター ( など) など、任意のcampaignIdを指定できます。

クエリ文字列パラメーターの送信

クエリ文字列パラメーターを送信するには、証明書利用者ポリシーで、次に示すように ContentDefinitionParameters 要素を追加します。

<RelyingParty>
    <DefaultUserJourney ReferenceId="SignUpOrSignIn" />
    <UserJourneyBehaviors>
    <ContentDefinitionParameters>
        <Parameter Name="campaignId">{OAUTH-KV:campaignId}</Parameter>
        <Parameter Name="lang">{Culture:LanguageName}</Parameter>
        <Parameter Name="appId">{OIDC:ClientId}</Parameter>
    </ContentDefinitionParameters>
    </UserJourneyBehaviors>
    ...
</RelyingParty>

コンテンツ定義で、 LoadUri の値を https://<app_name>.azurewebsites.net/home/unifiedに変更します。カスタムポリシーの ContentDefinition は、次のコードスニペットのようになります。

<ContentDefinition Id="api.signuporsignin">
  <LoadUri>https://<app_name>.azurewebsites.net/home/unified</LoadUri>
  ...
</ContentDefinition>

Azure AD B2C がページを読み込むと、Web サーバーエンドポイントが呼び出されます。

https://<app_name>.azurewebsites.net/home/unified?campaignId=123&lang=fr&appId=00001111-aaaa-2222-bbbb-3333cccc4444

動的ページコンテンツ URI

コンテンツは、使用されるパラメーターに基づいてさまざまな場所からプルできます。 CORS 対応エンドポイントで、コンテンツをホストするフォルダー構造を設定します。たとえば、次の構造でコンテンツを整理できます。 ルートフォルダー/言語ごとのフォルダー/あなたのHTMLファイル。たとえば、カスタムページ URI は次のようになります。

<ContentDefinition Id="api.signuporsignin">
  <LoadUri>https://contoso.blob.core.windows.net/{Culture:LanguageName}/myHTML/unified.html</LoadUri>
  ...
</ContentDefinition>

Azure AD B2C は、フランス語用に fr 、言語の 2 文字の ISO コードを送信します。

https://contoso.blob.core.windows.net/fr/myHTML/unified.html

サンプルテンプレート

UI カスタマイズ用のサンプルテンプレートは、次のページにあります。

git clone https://github.com/azure-ad-b2c/html-templates

このプロジェクトには、次のテンプレートが含まれています。

サンプルを使用するには:

ローカルコンピューターでリポジトリを複製します。テンプレートフォルダーの /AzureBlue、 /MSA、または /classicを選択します。
前のセクションで説明したように、テンプレートフォルダーと /src フォルダーのすべてのファイルを Blob Storage にアップロードします。
次に、テンプレートフォルダー内の各 \*.html ファイルを開きます。次に、 https://login.microsoftonline.com URL のすべてのインスタンスを、手順 2 でアップロードした URL に置き換えます。例えば次が挙げられます。

変更前:
```
https://login.microsoftonline.com/templates/src/fonts/segoeui.WOFF
```
宛先：
```
https://your-storage-account.blob.core.windows.net/your-container/templates/src/fonts/segoeui.WOFF
```
\*.html ファイルを保存し、BLOB ストレージにアップロードします。
ここで、前に説明したように、HTML ファイルをポイントしてポリシーを変更します。
フォント、画像、または CSS が見つからない場合は、拡張機能ポリシーと \*.html ファイルの参照を確認します。

カスタム HTML で会社のブランド化資産を使用する

カスタム HTML で会社のブランド化アセットを使用するには、 <div id="api"> タグの外側に次のタグを追加します。イメージソースは、背景画像とバナーロゴのソースに置き換えられます。

<img data-tenant-branding-background="true" />
<img data-tenant-branding-logo="true" alt="Company Logo" />

クライアント側の JavaScript コードを有効にする方法について説明します。

次の方法で共有

Azure Active Directory B2C で HTML テンプレートを使用してユーザー インターフェイスをカスタマイズする

カスタム HTML と CSS の概要

カスタム HTML ページのコンテンツ

既定の Azure AD B2C ページをカスタマイズする

ページ コンテンツのホスト

カスタム ページ コンテンツを使用するためのガイドライン

コンテンツをローカライズする

単一テンプレートアプローチ

複数テンプレートのアプローチ

カスタム ページ コンテンツのチュートリアル

[前提条件]

1. HTML コンテンツを作成する

2.Azure Blob Storage アカウントを作成する

2.1 コンテナーを作成する

2.2 カスタムページコンテンツファイルをアップロードする

3. CORS を構成する

3.1 CORS のテスト

4. ユーザー フローを更新する

5. ユーザー フローをテストする

4. 拡張機能ファイルを変更する

5. 更新されたカスタム ポリシーをアップロードしてテストする

5.1 カスタム ポリシーをアップロードする

5.2 [今すぐ実行] を使用してカスタム ポリシーをテストする

動的カスタム ページ コンテンツ URI の構成