埋め込みサインアップまたはサインイン エクスペリエンス

この機能は、カスタム ポリシーでのみ使用できます。 セットアップ手順については、前のセレクターで [カスタム ポリシー] を選択します。

より簡単なサインアップまたはサインインエクスペリエンスのために、ユーザーを別のサインアップまたはサインイン ページにリダイレクトしたり、ポップアップ ウィンドウを生成したりしないようにすることができます。 インライン フレーム <iframe> HTML 要素を使用すると、Azure AD B2C サインイン ユーザー インターフェイスを Web アプリケーションに直接埋め込むことができます。

Web アプリケーションの埋め込みサインイン

インライン フレーム要素 <iframe> は、HTML5 Web ページにドキュメントを埋め込むために使用されます。 次の例に示すように、iframe 要素を使用して、Azure AD B2C サインイン ユーザー インターフェイスを Web アプリケーションに直接埋め込むことができます。

iframe を使用する場合は、次の点を考慮してください。

• 埋め込みサインアップまたはサインインでは、ローカル アカウントのみがサポートされます。 ほとんどのソーシャル ID プロバイダー (Google や Facebook など) は、サインイン ページがインライン フレームでレンダリングされないようにブロックします。
• シークレット モードの Safari や Chrome などの一部のブラウザーでは、iframe 内の Azure AD B2C セッション Cookie がサードパーティの Cookie として表示されます。 これらのブラウザーは、これらの Cookie をブロックまたはクリアする可能性があり、最適なユーザー エクスペリエンスを低下させる可能性があります。 この問題を回避するには、アプリケーション ドメイン名と Azure AD B2C ドメインの 配信元が同じであることを確認します。 同じ配信元を使用するには、Azure AD B2C テナントの カスタム ドメインを有効 にしてから、同じ配信元で Web アプリを構成します。 たとえば、"https://app.contoso.com" でホストされているアプリケーションの配信元は、'https://login.contoso.com' で実行されている Azure AD B2C と同じです。

[前提条件]

• 「Active Directory B2C でのカスタム ポリシーの概要」にある手順を完了する。
• ポリシーのカスタム ドメインを有効にします。

ポリシーを構成する

Azure AD B2C ユーザー インターフェイスを iframe に埋め込むには、コンテンツ セキュリティ ポリシーの Content-Security-Policy とフレーム のオプション X-Frame-Options Azure AD B2C HTTP 応答ヘッダーに含める必要があります。 これらのヘッダーを使用すると、Azure AD B2C ユーザー インターフェイスをアプリケーション ドメイン名で実行できます。

RelyingParty 要素内に JourneyFraming 要素を追加します。 UserJourneyBehaviors 要素は DefaultUserJourney に従う必要があります。 UserJourneyBehaviors 要素は次の例のようになります。

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

Sources 属性には、Web アプリケーションの URI が含まれています。 URI 間にスペースを追加します。 各 URI は、次の要件を満たしている必要があります。

• アプリケーションは URI を信頼して所有している必要があります。
• URI は https スキームを使用する必要があります。
• Web アプリの完全な URI を指定する必要があります。 ワイルドカードはサポートされていません。
• JourneyFraming 要素では、2 文字から 7 文字のトップレベル ドメイン (TLD) を持つサイト URL のみが、一般的に認識される TLD に合わせることができます。

さらに、アプリケーション ページで Content-Security-Policy ヘッダーと X-Frame-Options ヘッダーをそれぞれ設定して、独自のドメイン名が iframe に埋め込まれるのをブロックすることもお勧めします。 この手法により、iframe の入れ子になった埋め込みに関連する古いブラウザーに関するセキュリティ上の懸念が軽減されます。

ポリシー のユーザー インターフェイスを調整する

Azure AD B2C ユーザー インターフェイスのカスタマイズにより、ユーザーに提示する HTML および CSS コンテンツをほぼ完全に制御できます。 コンテンツ定義を使用して HTML ページをカスタマイズする手順に従います。 Azure AD B2C ユーザー インターフェイスを iframe サイズに収めるために、背景と余分なスペースを含まないクリーンな HTML ページを提供します。

次の CSS コードは、Azure AD B2C HTML 要素を非表示にし、iframe を埋めるようにパネルのサイズを調整します。

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

div.api_container{
    padding-top:0;
}

.panel {
    width: 100%!important
}

場合によっては、現在表示されている Azure AD B2C ページについてアプリケーションに通知する必要があります。 たとえば、ユーザーがサインアップ オプションを選択すると、ソーシャル アカウントでサインインするためのリンクを非表示にしたり、iframe サイズを調整したりして、アプリケーションが応答するようにすることができます。

現在の Azure AD B2C ページについてアプリケーションに通知するには、 JavaScript のポリシーを有効にしてから、HTML5 を使用してメッセージを投稿します。 次の JavaScript コードは、 signUpを使用して投稿メッセージをアプリに送信します。

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

Web アプリケーションを構成する

ユーザーがサインイン ボタンを選択すると、 Web アプリ によって承認要求が生成され、ユーザーは Azure AD B2C サインイン エクスペリエンスに移動します。 サインインが完了すると、Azure AD B2C は ID トークンまたは承認コードを、アプリケーション内で構成されたリダイレクト URI に返します。

埋め込みログインをサポートするために、iframe src 属性はサインイン コントローラー ( /account/SignUpSignIn など) を指します。これにより、承認要求が生成され、ユーザーが Azure AD B2C ポリシーにリダイレクトされます。

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

アプリケーションは、ID トークンを受信して検証した後、承認フローを完了し、ユーザーを認識して信頼します。 承認フローは iframe 内で行われるため、メイン ページを再読み込みする必要があります。 ページが再読み込みされると、サインイン ボタンが "サインアウト" に変わり、ユーザー名が UI に表示されます。

次の例は、サインイン リダイレクト URI がメイン ページを更新する方法を示しています。

window.top.___location.reload();

ソーシャル アカウントを使用したサインインを Web アプリに追加する

ソーシャル ID プロバイダーは、サインイン ページがインライン フレームでレンダリングされないようにブロックします。 ソーシャル アカウントには別のポリシーを使用することも、ローカル アカウントとソーシャル アカウントでのサインインとサインアップの両方に 1 つのポリシーを使用することもできます。 その後、 domain_hint クエリ文字列パラメーターを使用できます。 ドメイン ヒント パラメーターは、ユーザーをソーシャル ID プロバイダーのサインイン ページに直接移動します。

アプリケーションで、ソーシャル アカウント ボタンを使用してサインインを追加します。 ユーザーがいずれかのソーシャル アカウント ボタンをクリックすると、コントロールはポリシー名を変更するか、ドメイン ヒント パラメーターを設定する必要があります。

リダイレクト URI は、iframe で使用されるのと同じリダイレクト URI にすることができます。 ページの再読み込みをスキップできます。

シングルページ アプリケーションを構成する

シングルページ アプリケーションの場合は、iframe に読み込む 2 つ目の "サインイン" HTML ページも必要です。 このサインイン ページは、認証コードを生成してトークンを返す認証ライブラリ コードをホストします。

シングルページ アプリケーションでアクセス トークンが必要な場合は、JavaScript コードを使用して、iframe とそれを含むオブジェクトからアクセス トークンを取得します。

次のコードは、メイン ページで実行され、iframe の JavaScript コードを呼び出す例です。

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");
}

次のステップ

次の関連記事を参照してください。

• ユーザー インターフェイスのカスタマイズ
• RelyingParty 要素リファレンス
• JavaScript のポリシーを有効にする
• コード サンプル