埋め込みサインイン エクスペリエンスEmbedded sign-in experience

"開始する前に" 、上記のセレクターを使用して、構成するポリシーの種類を選択してください。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.

この機能は、カスタム ポリシーでのみ使用できます。This feature is available for custom policies only. セットアップ手順については、上記の カスタム ポリシー を選択してください。For setup steps, choose Custom policy above.

より簡単なサインイン エクスペリエンスを実現するために、ユーザーを別のサインイン ページにリダイレクトしたり、ポップアップ ウィンドウを生成したりすることを回避できます。For a simpler sign-in experience, you can avoid redirecting users to a separate sign-in page or generating a pop-up window. インライン フレーム要素 <iframe> を使用すると、Azure AD B2C サインイン ユーザー インターフェイスを Web アプリケーションに直接埋め込むことができます。By using the inline frame element <iframe>, you can embed the Azure AD B2C sign-in user interface directly into your web application.

注意

この機能はパブリック プレビュー段階にあります。This feature is in public preview.

Web アプリケーションの埋め込みサインインWeb application embedded sign-in

インライン フレーム要素 <iframe> は、HTML5 Web ページにドキュメントを埋め込むために使用されます。The inline frame element <iframe> is used to embed a document in an HTML5 web page. 次の例に示すように、iframe 要素を使用して、Azure AD B2C サインイン ユーザー インターフェイスを Web アプリケーションに直接埋め込むことができます。You can use the iframe element to embed the Azure AD B2C sign-in user interface directly into your web application, as show in the following example:

ホバリング DIV エクスペリエンスを使用したログイン

iframe を使用する場合は、次の点を考慮してください。When using iframe, consider the following:

  • 埋め込みサインインでサポートされるのは、ローカル アカウントのみです。Embedded sign-in supports local accounts only. ほとんどのソーシャル ID プロバイダー (Google や Facebook など) は、サインイン ページがインライン フレーム内にレンダリングされるのをブロックします。Most social identity providers (for example, Google and Facebook) block their sign-in pages from being rendered in inline frames.
  • iframe 内の Azure AD B2C セッション Cookie はサードパーティの Cookie と見なされるため、特定のブラウザー (シークレット モードの Safari や Chrome など) はこれらの Cookie をブロックまたはクリアし、結果的に望ましくないユーザー エクスペリエンスになります。Because Azure AD B2C session cookies within an iframe are considered third-party cookies, certain browsers (for example Safari or Chrome in incognito mode) either block or clear these cookies, resulting in an undesirable user experience. この問題を回避するには、アプリケーション ドメイン名と Azure AD B2C ドメインが "同じオリジン" を持つようにします。To prevent this issue, make sure your application domain name and your Azure AD B2C domain have the same origin. 同じオリジンを使用するには Azure AD B2C テナントのカスタム ドメインを有効にし、同じオリジンで Web アプリを構成します。To use the same origin, enable custom domains for Azure AD B2C tenant, then configure your web app with the same origin. たとえば、 https://app.contoso.com でホストされているアプリケーションは、 https://login.contoso.com で実行されている Azure AD B2C と同じオリジンを持ちます。For example, an application hosted on https://app.contoso.com has the same origin as Azure AD B2C running on https://login.contoso.com.

前提条件Prerequisites

ポリシーを構成するConfigure your policy

Azure AD B2C ユーザー インターフェイスの iframe への埋め込みを許可するには、コンテンツ セキュリティ ポリシー Content-Security-Policy とフレーム オプション X-Frame-Options を Azure AD B2C HTTP 応答ヘッダーに含める必要があります。To allow your Azure AD B2C user interface to be embedded in an iframe, a content security policy Content-Security-Policy and frame options X-Frame-Options must be included in the Azure AD B2C HTTP response headers. これらのヘッダーにより、アプリケーション ドメイン名で Azure AD B2C ユーザー インターフェイスを実行できるようになります。These headers allow the Azure AD B2C user interface to run under your application domain name.

RelyingParty 要素内に JourneyFraming 要素を追加します。Add a JourneyFraming element inside the RelyingParty element. UserJourneyBehaviors 要素は、DefaultUserJourney の後にする必要があります。The UserJourneyBehaviors element must follow the DefaultUserJourney. UserJourneyBehavors 要素は、次の例のようになります。Your UserJourneyBehaviors element should look like this example:

<!--
<RelyingParty>
  <DefaultUserJourney ReferenceId="SignUpOrSignIn" /> -->
  <UserJourneyBehaviors> 
    <JourneyFraming Enabled="true" Sources="https://somesite.com https://anothersite.com" /> 
  </UserJourneyBehaviors>
<!--
</RelyingParty> -->

Sources 属性には、Web アプリケーションの URI が含まれます。The Sources attribute contains the URI of your web application. 各 URI の間にはスペースを追加します。Add a space between URIs. 各 URI は次の要件を満たしている必要があります。Each URI must meet the following requirements:

  • URI はアプリケーションによって信頼および所有されている必要があります。The URI must be trusted and owned by your application.
  • URI には、https スキームを使用する必要があります。The URI must use the https scheme.
  • Web アプリの完全な URI を指定する必要があります。The full URI of the web app must be specified. ワイルドカードはサポートされていません。Wildcards are not supported.

さらに、アプリケーションのページで Content-Security-Policy および X-Frame-Options ヘッダーをそれぞれ設定して、iframe への独自のドメイン名の埋め込みをブロックすることもお勧めします。In addition, we recommend that you also block your own domain name from being embedded in an iframe by setting the Content-Security-Policy and X-Frame-Options headers respectively on your application pages. これにより、iframe の入れ子になった埋め込みに関連する古いブラウザーに関するセキュリティ上の懸念が軽減されます。This will mitigate security concerns around older browsers related to nested embedding of iframes.

ポリシー ユーザー インターフェイスを調整するAdjust policy user interface

Azure AD B2C のユーザー インターフェイスのカスタマイズにより、ユーザーに表示される HTML および CSS のコンテンツをほぼ完全に制御できます。With Azure AD B2C user interface customization, you have almost full control over the HTML and CSS content presented to users. コンテンツ定義を使用して HTML ページをカスタマイズするための手順に従います。Follow the steps for customizing an HTML page using content definitions. Azure AD B2C ユーザー インターフェイスを iframe のサイズに合わせるには、背景と余分なスペースのないクリーンな HTML ページを準備します。To fit the Azure AD B2C user interface into the iframe size, provide clean HTML page without background and extra spaces.

次の CSS コードは、Azure AD B2C HTML 要素を非表示にして、iframe を埋めるようにパネルのサイズを調整します。The following CSS code hides the Azure AD B2C HTML elements and adjusts the size of the panel to fill the iframe.

div.social, div.divider {
    display: none;
}

div.api_container{
    padding-top:0;
}

.panel {
    width: 100%!important
}

場合によっては、現在表示されている Azure AD B2C ページをアプリケーションに通知することが必要になります。In some cases, you might want to notify to your application of which Azure AD B2C page is currently being presented. たとえば、ユーザーがサインアップ オプションを選択したときに、ソーシャル アカウントでサインインするためのリンクを非表示にするか、iframe のサイズを調整することで、アプリケーションに応答させることができます。For example, when a user selects the sign-up option, you might want the application to respond by hiding the links for signing in with a social account or adjusting the iframe size.

現在の Azure AD B2C ページをアプリケーションに通知するには、JavaScript のポリシーを有効にし、HTML5 post メッセージを使用します。To notify your application of the current Azure AD B2C page, enable your policy for JavaScript, and then use HTML5 post messages. 次の JavaScript コードは、signUp を含む post メッセージをアプリに送信し ます。The following JavaScript code sends a post message to the app with signUp:

window.parent.postMessage("signUp", '*');

Web アプリケーションを構成するConfigure a web application

ユーザーがサインイン ボタンを選択すると、ユーザーを Azure AD B2C サインイン操作に移動する認可要求が Web アプリによって生成されます。When a user selects the sign-in button, the web app generates an authorization request that takes the user to Azure AD B2C sign-in experience. サインインが完了すると、Azure AD B2C から、アプリケーション内の構成済みリダイレクト URI に ID トークン (認証コード) が返されます。After sign-in is complete, Azure AD B2C returns an ID token, or authorization code, to the configured redirect URI within your application.

埋め込みログインをサポートするため、iframe src プロパティは、/account/SignUpSignIn などのサインイン コ ントローラーを指します。これにより、認可要求が生成され、ユーザーが Azure AD B2C ポリシーにリダイレクトされます。To support embedded login, the iframe src property points to the sign-in controller, such as /account/SignUpSignIn, which generates the authorization request and redirects the user to Azure AD B2C policy.

<iframe id="loginframe" frameborder="0" src="/account/SignUpSignIn"></iframe>

ID トークンがアプリケーションによって受信され、検証されると、認可フローが完了し、アプリケーションでユーザーが認識および信頼されます。After the ID token is received and validated by the application, the authorization flow is complete and the application recognizes and trusts the user. 認可フローは iframe 内で発生するため、メイン ページを再度読み込む必要があります。Because the authorization flow happens inside the iframe, you need to reload the main page. ページの再読み込みの後、サインイン ボタンが "サインアウト" に変わり、ユーザー名が UI に表示されます。After the page reloads, the sign-in button changes to "sign out" and the username is presented in the UI.

次の例は、サインインのリダイレクト URI によりメイン ページが更新される方法を示しています。The following is an example showing how the sign-in redirect URI can refresh the main page:

window.top.location.reload();

Web アプリに ソーシャル アカウントでのサインインを追加するAdd sign-in with social accounts to a web app

ソーシャル ID プロバイダーは、インライン フレームでのサインイン ページのレンダリングをブロックします。Social identity providers block their sign-in pages from rendering in inline frames. ソーシャル アカウントに個別のポリシーを使用することも、ローカルとソーシャルのアカウントによるサインインとサインアップの両方に 1 つのポリシーを使用することもできます。You can use a separate policy for social accounts, or you can use a single policy for both sign-in and sign-up with local and social accounts. そのとき、domain_hint クエリ文字列パラメーターを使用できます。Then you can use the domain_hint query string parameter. ドメイン ヒント パラメーターを設定すると、ユーザーはソーシャル ID プロバイダーのサインイン ページに直接移動します。The domain hint parameter takes the user directly to the social identity provider's sign-in page.

アプリケーションに、ソーシャル アカウントによるサインインのボタンを追加します。In your application, add the sign-in with social account buttons. ユーザーがいずれかのソーシャル アカウントのボタンをクリックしたときに、そのコントロールによってポリシー名を変更するか、ドメイン ヒントパラメーターを設定する必要があります。When a user clicks one of the social account buttons, the control needs to change the policy name or set the domain hint parameter.

リダイレクト URI は、iframe で使用されるリダイレクト URI と同じにすることができます。The redirect URI can be the same redirect URI used by the iframe. ページの再読み込みは、スキップできます。You can skip the page reload.

シングルページ アプリケーションを構成するConfigure a single-page application

シングルページ アプリケーションの場合は、iframe に読み込む 2 つ目の "サインイン" HTML ページも必要になります。For a single-page application, you'll also need to a second "sign-in" HTML page that loads into the iframe. このサインイン ページは、認証コードを生成してトークンを返す認証ライブラリ コードをホスティングします。This sign-in page hosts the authentication library code that generates the authorization code and returns the token.

シングルページ アプリケーションにアクセス トークンが必要な場合は、JavaScript コードを使用して、iframe およびそれを含むオブジェクトからアクセス トークンを取得します。When the single-page application needs the access token, use JavaScript code to obtain the access token from the iframe and object that contains it.

注意

現在、iframe での MSAL 2.0 の実行はサポートされていません。Running MSAL 2.0 in an iframe is not currently supported.

次のコードは、メイン ページで実行され、iframe の JavaScript コードを呼び出す例です。The following code is an example that runs on the main page and calls an iframe's JavaScript code:

function getToken()
{
  var token = document.getElementById("loginframe").contentWindow.getToken("adB2CSignInSignUp");

  if (token === "LoginIsRequired")
    document.getElementById("tokenTextarea").value = "Please login!!!"
  else
    document.getElementById("tokenTextarea").value = token.access_token;
}

function logOut()
{
  document.getElementById("loginframe").contentWindow.policyLogout("adB2CSignInSignUp", "B2C_1A_SignUpOrSignIn");
}

次のステップNext steps

次の関連記事を参照してください。See the following related articles: