Eingebettete Registrierungs- oder Anmeldeerfahrung

Dieses Feature ist nur für benutzerdefinierte Richtlinien verfügbar. Wählen Sie für Setupschritte im vorherigen Selektor die Option "Benutzerdefinierte Richtlinie " aus.

Für eine einfachere Anmelde- oder Anmeldeumgebung können Sie verhindern, dass Benutzer zu einer separaten Anmelde- oder Anmeldeseite umgeleitet werden oder ein Popupfenster generiert wird. Mithilfe des Inlineframe-Iframe-HTML-Elements <> können Sie die Azure AD B2C-Anmeldebenutzeroberfläche direkt in Ihre Webanwendung einbetten.

Webanwendung mit eingebettetem Anmeldeformular

Das Inlineframeelement <iframe> wird verwendet, um ein Dokument in eine HTML5-Webseite einzubetten. Sie können das iframe-Element verwenden, um die Azure AD B2C-Anmeldebenutzeroberfläche direkt in Ihre Webanwendung einzubetten, wie im folgenden Beispiel gezeigt:

Berücksichtigen Sie bei der Verwendung von iframe Folgendes:

• Eingebettete Registrierung oder Anmeldung unterstützt nur lokale Konten. Die meisten sozialen Identitätsanbieter (z. B. Google und Facebook) verhindern, dass ihre Anmeldeseiten in Inlineframes angezeigt werden.
• Bestimmte Browser, z. B. Safari oder Chrome im Inkognito-Modus, zeigen Azure AD B2C-Sitzungscookies in einem iFrame als Cookies von Drittanbietern an. Diese Browser können diese Cookies blockieren oder löschen, was zu einer weniger als optimalen Benutzererfahrung führen kann. Um dieses Problem zu verhindern, stellen Sie sicher, dass Ihr Anwendungsdomänenname und Ihre Azure AD B2C-Domäne denselben Ursprung haben. Um denselben Ursprung zu verwenden, aktivieren Sie benutzerdefinierte Domänen für den Azure AD B2C-Mandanten, und konfigurieren Sie Dann Ihre Web-App mit demselben Ursprung. Beispielsweise hat eine auf 'https://app.contoso.com' gehostete Anwendung denselben Ursprung wie Azure AD B2C, die auf 'https://login.contoso.com' ausgeführt wird.

Voraussetzungen

• Führen Sie die Schritte in Erste Schritte mit benutzerdefinierten Richtlinien in Active Directory B2C aus.
• Aktivieren Sie benutzerdefinierte Domänen für Ihre Richtlinien.

Konfigurieren Ihrer Richtlinie

Damit Ihre Azure AD B2C-Benutzeroberfläche in einen iframe eingebettet werden kann, müssen eine Inhaltssicherheitsrichtlinie Content-Security-Policy und Frameoptionen X-Frame-Options in den Azure AD B2C-HTTP-Antwortheadern enthalten sein. Mit diesen Headern kann die Benutzeroberfläche von Azure AD B2C unter Ihrem Anwendungsdomänennamen ausgeführt werden.

Fügen Sie ein JourneyFraming-Element im RelyingParty-Element hinzu. Das UserJourneyBehaviors-Element muss dem DefaultUserJourney folgen. Ihr UserJourneyBehaviors-Element sollte wie in diesem Beispiel aussehen:

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

Das Sources-Attribut enthält den URI Ihrer Webanwendung. Fügen Sie ein Leerzeichen zwischen URIs hinzu. Jeder URI muss die folgenden Anforderungen erfüllen:

• Ihre Anwendung muss dem URI vertrauen und besitzen.
• Der URI muss das HTTPS-Schema verwenden.
• Der vollständige URI der Web-App muss angegeben werden. Wildcards werden nicht unterstützt.
• Mit dem JourneyFraming-Element können Website-URLs nur mit einer zwei bis siebenstelligen Domäne auf oberster Ebene (TLD) an allgemein anerkannten TLDs ausgerichtet werden.

Darüber hinaus empfehlen wir, dass Sie Ihren eigenen Domänennamen auch daran hindern, in einem iframe eingebettet zu werden, indem Sie die Content-Security-Policy- und X-Frame-Options-Kopfzeilen entsprechend auf Ihren Anwendungsseiten festlegen. Diese Technik mindert Sicherheitsbedenken bei älteren Browsern im Zusammenhang mit geschachtelten Einbettungen von iFrames.

Anpassen der Richtlinien-Benutzeroberfläche

Mit der Anpassung der Benutzeroberfläche von Azure AD B2C haben Sie fast die volle Kontrolle über den HTML- und CSS-Inhalt, den Sie Ihren Benutzern präsentieren. Führen Sie die Schritte zum Anpassen einer HTML-Seite mithilfe von Inhaltsdefinitionen aus. Um die Benutzeroberfläche von Azure AD B2C in die iframe-Größe zu integrieren, stellen Sie eine übersichtliche HTML-Seite ohne Hintergrund und zusätzliche Leerzeichen bereit.

Der folgende CSS-Code blendet die HTML-Elemente von Azure AD B2C aus und passt die Größe des Panels an, um den iframe auszufüllen.

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

div.api_container{
    padding-top:0;
}

.panel {
    width: 100%!important
}

In einigen Fällen möchten Sie Ihre Anwendung möglicherweise über die Aktuell angezeigte Azure AD B2C-Seite benachrichtigen. Wenn beispielsweise ein Benutzer die Registrierungsoption auswählt, möchten Sie, dass die Anwendung antworten soll, indem Sie die Links für die Anmeldung mit einem sozialen Konto ausblenden oder die Größe des iframe anpassen.

Wenn Sie Ihre Anwendung über die aktuelle Azure AD B2C-Seite benachrichtigen möchten, aktivieren Sie Ihre Richtlinie für JavaScript, und verwenden Sie dann HTML5, um Nachrichten zu posten. Der folgende JavaScript-Code sendet eine Postnachricht an die App mit signUp:

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

Konfigurieren einer Webanwendung

Wenn ein Benutzer die Anmeldeschaltfläche auswählt, generiert die Web-App eine Autorisierungsanforderung, die den Benutzer zur Azure AD B2C-Anmeldeumgebung führt. Nach Abschluss der Anmeldung sendet Azure AD B2C ein ID-Token oder einen Autorisierungscode zur konfigurierten Umleitungs-URI Ihrer Anwendung zurück.

Um die eingebettete Anmeldung zu unterstützen, verweist das iframe-Attribut src auf den Anmeldecontroller, wie z. B. /account/SignUpSignIn, der die Autorisierungsanforderung generiert und den Benutzer an die Azure AD B2C-Richtlinie weiterleitet.

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

Nachdem die Anwendung das ID-Token empfängt und überprüft hat, schließt sie den Autorisierungsfluss ab und erkennt und vertraut dem Benutzer. Da der Autorisierungsfluss innerhalb des iframe erfolgt, müssen Sie die Hauptseite neu laden. Nachdem die Seite neu geladen wurde, ändert sich die Anmeldeschaltfläche in "Abmelden", und der Benutzername wird in der Benutzeroberfläche angezeigt.

Das folgende Beispiel zeigt, wie der Anmeldeumleitungs-URI die Hauptseite aktualisieren kann:

window.top.location.reload();

Hinzufügen einer Anmeldung mit Konten für soziale Netzwerke zu einer Web-App

Anbieter von sozialen Identitäten blockieren, dass ihre Anmeldeseiten in Inlineframes gerendert werden. Sie können eine separate Richtlinie für soziale Konten verwenden oder eine einzelne Richtlinie sowohl für die Anmeldung als auch für die Registrierung mit lokalen und sozialen Konten verwenden. Anschließend können Sie den domain_hint Abfragezeichenfolgenparameter verwenden. Der Parameter "Domain hint" führt den Benutzer direkt zur Anmeldeseite des Anbieters für soziale Identitäten.

Fügen Sie in Ihrer Anwendung die Anmeldeschaltflächen mit sozialen Konten hinzu. Wenn ein Benutzer auf eine der Schaltflächen für soziale Netzwerke klickt, muss das Steuerelement den Richtliniennamen ändern oder den Parameter für den Domänenhinweis festlegen.

Der Umleitungs-URI kann derselbe Umleitungs-URI sein, der vom iframe verwendet wird. Sie können das Neuladen der Seite überspringen.

Konfigurieren einer einzelseitigen Anwendung

Für eine Einzelseitenanwendung benötigen Sie auch eine zweite HTML-Seite "Anmeldung", die in das iframe geladen wird. Diese Anmeldeseite hostt den Authentifizierungsbibliothekscode, der den Autorisierungscode generiert und das Token zurückgibt.

Wenn die Einzelseitenanwendung das Zugriffstoken benötigt, verwenden Sie JavaScript-Code, um das Zugriffstoken aus dem iframe und dem Objekt abzurufen, das es enthält.

Der folgende Code ist ein Beispiel, das auf der Hauptseite ausgeführt wird und den JavaScript-Code eines iframes aufruft:

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

Nächste Schritte

Weitere Informationen finden Sie in den folgenden verwandten Artikeln:

• Anpassung der Benutzeroberfläche
• RelyingParty-Elementreferenz
• Aktivieren Sie Ihre Richtlinie für JavaScript
• Codebeispiele