Azure Active Directory B2C: ページのユーザー インターフェイス (UI) カスタマイズ機能を試すために使用するヘルパー ツールAzure Active Directory B2C: A helper tool used to demonstrate the page user interface (UI) customization feature

この記事は、Azure Active Directory (Azure AD) B2C での UI のカスタマイズに関するメインの記事 に付随するものです。This article is a companion to the main UI customization article in Azure Active Directory (Azure AD) B2C. 以下の手順では、用意されているサンプルの HTML および CSS の内容を使用して、ページの UI カスタマイズ機能を試してみる方法について説明します。The following steps describe how to exercise the page UI customization feature by using sample HTML and CSS content that we've provided.

Azure AD B2C テナントを取得するGet an Azure AD B2C tenant

Azure AD B2C テナントがまだない場合は、カスタマイズを始める前に、 Azure AD B2C テナントを取得 する必要があります。Before you can customize anything, you will need to get an Azure AD B2C tenant if you don't already have one.

サインアップまたはサインイン ポリシーを作成するCreate a sign-up or sign-in policy

用意されているサンプル コンテンツを使用すると、サインアップまたはサインイン ポリシーの 2 つのページ、統合サインイン ページセルフ アサート属性ページをカスタマイズできます。The sample content we've provided can be used to customze two pages in a sign-up or sign-in policy: the unified sign-in page and the self-asserted attributes page. サインアップまたはサインイン ポリシーを作成する際は、ローカル アカウント (電子メール アドレス)、Facebook、Google、および Microsoft を ID プロバイダーとして追加します。When creating your sign-up or sign-in policy, add Local Account (email address), Facebook, Google, and Microsoft as Identity providers. サンプルの HTML コンテンツが受け付ける IDP はこれらだけです。These are the only IDPs that our sample HTML content will accept. 必要に応じて、これら IDP のサブセットを追加することもできます。You can also add a subset of these IDPs if you wish.

アプリケーションを登録するRegister an application

B2C テナントに、ポリシーを実行するために使用できる アプリケーションを登録する 必要があります。You will need to register an application in your B2C tenant that can be used to execute your policy. アプリケーションを登録した後、サインアップ ポリシーを実際に実行するにはいくつかのオプションを使用できます。After registering your application, you have a few options that you can use to actually run your sign-up policy:

ポリシーをカスタマイズするCustomize your policy

ポリシーの外観と操作性をカスタマイズするには、最初に Azure AD B2C の固有の規則を使用して HTML および CSS ファイルを作成する必要があります。To customize the look and feel of your policy, you need to first create HTML and CSS files using the specific conventions of Azure AD B2C. その後は、静的なコンテンツを、Azure AD B2C がアクセスできる公開されている場所にアップロードできます。You can then upload your static content to a publicly available location so that Azure AD B2C can access it. そのような場所としては、独自の専用 Web サーバー、Azure BLOB ストレージ、Azure Content Delivery Network、その他の静的リソース ホスティング プロバイダーを使用できます。This could be your own dedicated web server, Azure Blob Storage, Azure Content Delivery Network, or any other static resource-hosting provider. 唯一の要件は、コンテンツが HTTPS 経由で使用でき、CORS を使用してアクセスできることです。The only requirements are that your content is available over HTTPS and can be accessed by using CORS. 静的コンテンツを Web で公開した後は、この場所を参照してユーザーにそのコンテンツを表示するようにポリシーを編集できます。Once you've exposed your static content on the web, you can edit your policy to point to this location and present that content to your customers. Azure AD B2Cカスタマイズ機能の動作の詳細については、 UI のカスタマイズに関するメインの記事 を参照してください。The main UI customization article describes in detail how the Azure AD B2C customization feature works.

このチュートリアルでは、既にいくつかのサンプル コンテンツを作成し、Azure BLOB ストレージでホストしてあります。For the purposes of this tutorial, we've already created some sample content and hosted it on Azure Blob Storage. サンプル コンテンツは、架空の会社 "Wingtip Toys" のテーマでの非常に基本的なカスタマイズです。The sample content is a very basic customization in the theme of our fictional company, "Wingtip Toys". 独自のポリシーで試してみるには、次の手順を実行します。To try it out in your own policy, follow these steps:

  1. Azure Portal でテナントにサインインし、B2C 機能ブレードに移動します。Sign in to your tenant on the Azure portal and navigate to the B2C features blade.
  2. [Sign-up or sign-in policies (サインアップまたはサインイン ポリシー)] をクリックし、自分のポリシー ("b2c_1_sign_up_sign_in" など) をクリックします。Click Sign-up or sign-in policies and then click your policy (for example, "b2c_1_sign_up_sign_in").
  3. [Page UI customization (ページ UI のカスタマイズ)][Unified sign-up or sign-in page (統合されたサインアップまたはサインイン ページ)] の順にクリックします。Click Page UI customization and then Unified sign-up or sign-in page.
  4. [Use custom page (カスタム ページを使用する)][はい] に切り替えます。Toggle the Use custom page switch to Yes. [カスタム ページの URI] フィールドに、「https://wingtiptoysb2c.blob.core.windows.net/b2c/wingtip/unified.html」と入力します。In the Custom page URI field, enter https://wingtiptoysb2c.blob.core.windows.net/b2c/wingtip/unified.html. [OK]をクリックします。Click OK.
  5. [ローカル アカウントのサインアップ ページ]をクリックします。Click Local account sign-up page. [カスタム テンプレートを使用する][はい] に切り替えます。Toggle the Use custom template switch to Yes. [カスタム ページの URI] フィールドに、「https://wingtiptoysb2c.blob.core.windows.net/b2c/wingtip/selfasserted.html」と入力します。In the Custom page URI field, enter https://wingtiptoysb2c.blob.core.windows.net/b2c/wingtip/selfasserted.html.
  6. [Social account sign-up page (ソーシャル アカウントのサインアップ ページ)]についても同じ手順を繰り返します。Repeat the same step for the Social account sign-up page. [OK] を 2 回クリックして、UI カスタマイズ ブレードを閉じます。Click OK twice to close the UI customization blades.
  7. [保存]をクリックします。Click Save.

カスタマイズしたポリシーを試すことができるようになります。Now you can try out your customized policy. 独自のアプリケーションまたは Azure AD B2C プレイグラウンドを使用することもできますが、単にポリシー ブレードで [今すぐ実行] コマンドをクリックするのでもかまいません。You can use your own application or the Azure AD B2C playground if you want to, but you can also simply click the Run Now command in the policy blade. ドロップダウン ボックスでアプリケーションを選び、適切なリダイレクト URI を選びます。Select your application in the drop-down box and choose the appropriate redirect URI. [今すぐ実行] ボタンをクリックします。Click the Run now button. 新しいブラウザー タブが開き、アプリケーションへのサインアップについて、新しいコンテンツが所定の場所に置かれた状態のユーザー エクスペリエンスを確認できます。A new browser tab will open and you can run through the user experience of signing up for your application with the new content in place!

サンプル コンテンツを Azure BLOB ストレージにアップロードするUpload the sample content to Azure Blob Storage

Azure BLOB ストレージを使用してページのコンテンツをホストする場合は、独自のストレージ アカウントを作成し、B2C ヘルパー ツールを使用してファイルをアップロードできます。If you would like to use Azure Blob Storage to host your page content, you can create your own storage account and use our B2C helper tool to upload your files.

ストレージ アカウントの作成Create a storage account

  1. Azure Portal にサインインします。Sign in to the Azure portal.
  2. [+ 新規] > [データ + ストレージ] > [ストレージ アカウント] の順にクリックします。Click + New > Data + Storage > Storage account. Azure BLOB ストレージ アカウントを作成するには、Azure サブスクリプションが必要です。You will need an Azure subscription to create an Azure Blob Storage account. Azure Web サイトで無料試用版にサインアップできます。You can sign up a free trial at the Azure website.
  3. ストレージ アカウントの名前 (例: "contoso") を入力し、[価格レベル][リソース グループ][サブスクリプション] でそれぞれ該当する項目を選択します。Provide a Name for the storage account (for example, "contoso") and pick the appropriate selections for Pricing tier, Resource group and Subscription. [スタート画面にピン留めする] がオンになっていることを確認します。Make sure that you have the Pin to Startboard option checked. Create をクリックしてください。Click Create.
  4. スタート画面に戻り、作成したストレージ アカウントをクリックします。Go back to the Startboard and click the storage account that you just created.
  5. [概要] セクションで、[コンテナー][+ 追加] の順にクリックします。In the Summary section, click Containers, and then click + Add.
  6. コンテナーの [名前] ("b2c" など) を指定し、[アクセスの種類] として [BLOB] を選択します。Provide a Name for the container (for example, "b2c") and select Blob as the Access type. [OK]をクリックします。Click OK.
  7. 作成したコンテナーは、 [BLOB] ブレードに一覧表示されます。The container that you created will appear in the list on the Blobs blade. コンテナーの URL ( https://contoso.blob.core.windows.net/b2cのような形式) をメモしておきます。Write down the URL of the container; for example, it should look similar to https://contoso.blob.core.windows.net/b2c. [BLOB] ブレードを閉じます。Close the Blobs blade.
  8. [ストレージ アカウント] のブレードで、[キー] をクリックし、[ストレージ アカウント名] および [プライマリ アクセス キー] フィールドの値をメモしておきます。On the storage account blade, click Keys and write down the values of the Storage Account Name and Primary Access Key fields.

注意

プライマリ アクセス キー は、重要なセキュリティ資格情報です。Primary Access Key is an important security credential.

ヘルパー ツールとサンプル ファイルをダウンロードするDownload the helper tool and sample files

Azure Blob Storage ヘルパー ツールとサンプル ファイルを .zip ファイルとしてダウンロードできます。また、次のように GitHub から複製することもできます。You can download the Azure Blob Storage helper tool and sample files as a .zip file or clone it from GitHub:

git clone https://github.com/azureadquickstarts/b2c-azureblobstorage-client

このリポジトリには sample_templates\wingtip ディレクトリが含まれており、そこには HTML、CSS、イメージのサンプルが含まれています。This repository contains a sample_templates\wingtip directory, which contains example HTML, CSS, and images. これらのテンプレートで独自の Azure BLOB ストレージ アカウントを参照するには、HTML ファイルを編集する必要があります。For these templates to reference your own Azure Blob Storage account, you will need to edit the HTML files. unified.html および selfasserted.html を開き、https://localhost のすべてのインスタンスを、前の手順でメモした独自のコンテナーの URL に置き換えます。Open unified.html and selfasserted.html and replace any instances of https://localhost with the URL of your own container that you wrote down in the previous steps. この場合、HTML は Azure AD によってドメイン https://login.microsoftonline.comで提供されるので、HTML ファイルの絶対パスを使用する必要があります。You must use the absolute path of the HTML files because in this case, the HTML will be served by Azure AD, under the domain https://login.microsoftonline.com.

サンプル ファイルをダウンロードするUpload the sample files

同じリポジトリで、B2CAzureStorageClient.zip を解凍し、その中にある B2CAzureStorageClient.exe ファイルを実行します。In the same repository, unzip B2CAzureStorageClient.zip and run the B2CAzureStorageClient.exe file within. このプログラムは単に、指定されたディレクトリ内のすべてのファイルをストレージ アカウントにアップロードし、それらのファイルに対する CORS アクセスを有効にします。This program will simply upload all the files in the directory that you specify to your storage account, and enable CORS access for those files. 上記の手順を実行した場合、HTML および CSS ファイルはストレージ アカウントを指すようになります。If you followed the steps above, the HTML and CSS files will now be pointing to your storage account. ストレージ アカウントの名前は、blob.core.windows.net の前の部分 (contoso など) です。Note that the name of your storage account is the part that precedes blob.core.windows.net; for example, contoso. ブラウザーで https://{storage-account-name}.blob.core.windows.net/{container-name}/wingtip/unified.html にアクセスしてみることで、コンテンツが正常にアップロードされていることを確認できます。You can verify that the content has been uploaded correctly by trying to access https://{storage-account-name}.blob.core.windows.net/{container-name}/wingtip/unified.html on a browser. また、 http://test-cors.org/ を使用して、コンテンツが CORS に対応していることを確認します (結果で "XHR status: 200" を探します。Also use http://test-cors.org/ to make sure that the content is now CORS enabled. )(Look for "XHR status: 200" in the result.)

再びポリシーをカスタマイズするCustomize your policy, again

独自のストレージ アカウントにサンプル コンテンツをアップロードしたので、それを参照するようにサインアップ ポリシーを編集する必要があります。Now that you've uploaded the sample content to your own storage account, you must edit your sign-up policy to reference it. 前述の「ポリシーをカスタマイズする」の手順を繰り返します。ただし、今回は独自のストレージ アカウントの URL を使用します。Repeat the steps from the "Customize your policy" section above, this time using your own storage account's URLs. たとえば、unified.html ファイルの場所は <url-of-your-container>/wingtip/unified.html になります。For instance, the location of your unified.html file would be <url-of-your-container>/wingtip/unified.html.

これで、 [今すぐ実行] ボタンまたは独自のアプリケーションを使用して、ポリシーを再度実行できるようになります。Now you can use the Run Now button or your own application to execute your policy again. どちらの場合も同じサンプルの HTML と CSS を使用したので、結果はほぼ同じになるはずです。The result should look almost exactly the same--you used the same sample HTML and CSS in both cases. ただし今度は、ポリシーは Azure BLOB ストレージの独自のインスタンスを参照しているので、自由にファイルを編集して再びアップロードできます。However, your policies are now referencing your own instance of Azure Blob Storage, and you are free to edit and upload the files again as you please. HTML および CSS のカスタマイズの詳細については、 UI のカスタマイズに関するメインの記事を参照してください。For more information on customizing the HTML and CSS, refer to the main UI customization article.