Freigeben über

Konfigurieren von Authentifizierungsoptionen in einer einzelseitigen Anwendung mithilfe von Azure AD B2C

Von Bedeutung

Ab dem 1. Mai 2025 steht Azure AD B2C nicht mehr für neue Kunden zur Verfügung. Weitere Informationen finden Sie in unseren HÄUFIG gestellten Fragen.

In diesem Artikel wird beschrieben, wie Sie die Azure Active Directory B2C(Azure AD B2C)-Authentifizierung für Ihre Einzelseitenanwendung (SINGLE Page Application, SPA) anpassen und verbessern.

Bevor Sie beginnen, machen Sie sich mit dem folgenden Artikel vertraut: Konfigurieren der Authentifizierung in einer Beispielwebanwendung.

Verwenden einer benutzerdefinierten Domäne

Mithilfe einer benutzerdefinierten Domäne können Sie die Authentifizierungs-URL vollständig kennzeichnen. Aus Benutzerperspektive verbleiben Benutzer während des Authentifizierungsprozesses auf Ihrer Domäne, anstatt an den Azure AD B2C b2clogin.com Domänennamen umgeleitet zu werden.

Um alle Verweise auf "b2c" in der URL zu entfernen, können Sie auch Ihren B2C-Mandantennamen, contoso.onmicrosoft.com, in der Authentifizierungsanforderungs-URL durch Ihre Mandanten-ID-GUID ersetzen. Sie können zum Beispiel https://fabrikamb2c.b2clogin.com/contoso.onmicrosoft.com/ zu https://account.contosobank.co.uk/<tenant ID GUID>/ ändern.

Wenn Sie eine benutzerdefinierte Domäne und Ihre Mandanten-ID in der Authentifizierungs-URL verwenden möchten, befolgen Sie die Anweisungen in "Benutzerdefinierte Domänen aktivieren". Suchen Sie Ihr MSAL-Konfigurationsobjekt (Microsoft Authentication Library), und ändern Sie die Behörden und bekanntenAuthoritäten , um Ihren benutzerdefinierten Domänennamen und Ihre Mandanten-ID zu verwenden.

Der folgende JavaScript-Code zeigt das MSAL-Konfigurationsobjekt vor der Änderung:

const msalConfig = {
    auth: {
      ...
      authority: "https://fabrikamb2c.b2clogin.com/fabrikamb2c.onmicrosoft.com/B2C_1_susi",
      knownAuthorities: ["fabrikamb2c.b2clogin.com"],
      ...
    },
  ...
}

Der folgende JavaScript-Code zeigt das MSAL-Konfigurationsobjekt nach der Änderung:

const msalConfig = {
    auth: {
      ...
      authority: "https://custom.domain.com/00000000-0000-0000-0000-000000000000/B2C_1_susi",
      knownAuthorities: ["custom.domain.com"],
      ...
    },
  ...
}

Den Anmeldenamen im Voraus ausfüllen

Während einer Anmeldebenutzerreise richtet sich Ihre App möglicherweise an einen bestimmten Benutzer. Wenn eine App auf einen Benutzer ausgerichtet ist, kann sie in der Autorisierungsanforderung den login_hint Abfrageparameter mit dem Anmeldenamen des Benutzers angeben. Azure AD B2C füllt automatisch den Anmeldenamen auf, und der Benutzer muss nur das Kennwort angeben.

Gehen Sie wie folgt vor, um den Anmeldenamen vorab aufzufüllen:

  1. Wenn Sie eine benutzerdefinierte Richtlinie verwenden, fügen Sie den erforderlichen Eingabeanspruch hinzu, wie unter "Einrichten der direkten Anmeldung" beschrieben.

  2. Erstellen Sie ein Objekt zum Speichern des login_hint, und übergeben Sie dieses Objekt an die MSAL loginPopup() -Methode.

    let loginRequest = {
    loginHint: "bob@contoso.com"
}

myMSALObj.loginPopup(loginRequest);

Vorauswahl eines Identitätsanbieters

Wenn Sie die Anmeldereise für Ihre Anwendung so konfiguriert haben, dass sie soziale Konten wie Facebook, LinkedIn oder Google enthält, können Sie den domain_hint Parameter angeben. Dieser Abfrageparameter gibt Azure AD B2C einen Hinweis auf den sozialen Identitätsanbieter, der für die Anmeldung verwendet werden soll. Wenn die Anwendung beispielsweise angibt domain_hint=facebook.com, wechselt der Anmeldefluss direkt zur Facebook-Anmeldeseite.

Gehen Sie wie folgt vor, um Benutzer an einen externen Identitätsanbieter umzuleiten:

  1. Überprüfen Sie den Domänennamen Ihres externen Identitätsanbieters. Weitere Informationen finden Sie unter Umleitung der Anmeldung an einen Anbieter für soziale Netzwerke.

  2. Erstellen Sie ein Objekt zum Speichern von extraQueryParameters, und übergeben Sie dieses Objekt an die MSAL loginPopup()- Methode.

    let loginRequest = {
     extraQueryParameters: {domain_hint: 'facebook.com'}
}

myMSALObj.loginPopup(loginRequest);

Angeben der Benutzeroberflächensprache

Die Sprachanpassung in Azure AD B2C ermöglicht Es Ihrem Benutzerfluss, eine Vielzahl von Sprachen an die Anforderungen Ihrer Kunden anzupassen. Weitere Informationen finden Sie unter Sprachanpassung.

Gehen Sie wie folgt vor, um die bevorzugte Sprache festzulegen:

  1. Konfigurieren sie die Sprachanpassung.

  2. Erstellen Sie ein Objekt zum Speichern von extraQueryParameters, und übergeben Sie dieses Objekt an die MSAL loginPopup()- Methode.

    let loginRequest = {
     extraQueryParameters: {ui_locales: 'en-us'}
}

myMSALObj.loginPopup(loginRequest);

Übergeben eines benutzerdefinierten Abfragezeichenfolgenparameters

Mit benutzerdefinierten Richtlinien können Sie einen benutzerdefinierten Abfragezeichenfolgenparameter übergeben. Ein gutes Anwendungsfallbeispiel ist, wenn Sie den Seiteninhalt dynamisch ändern möchten.

Gehen Sie wie folgt vor, um einen benutzerdefinierten Abfragezeichenfolgenparameter zu übergeben:

  1. Konfigurieren Sie das ContentDefinitionParameters-Element .

  2. Erstellen Sie ein Objekt zum Speichern von extraQueryParameters, und übergeben Sie dieses Objekt an die MSAL loginPopup()- Methode.

    let loginRequest = {
     extraQueryParameters: {campaignId: 'germany-promotion'}
}

myMSALObj.loginPopup(loginRequest);

Übergeben eines ID-Tokenhinweises

Eine Anwendung einer vertrauenden Seite kann ein eingehendes JSON-Webtoken (JWT) als Teil der OAuth2-Autorisierungsanforderung senden. Das eingehende Token ist ein Hinweis auf den Benutzer oder die Autorisierungsanforderung. Azure AD B2C überprüft das Token und extrahiert dann den Anspruch.

Gehen Sie wie folgt vor, um einen ID-Tokenhinweis in die Authentifizierungsanforderung einzuschließen:

  1. Definieren Sie in Ihrer benutzerdefinierten Richtlinie ein ID-Tokenhinweis technisches Profil.

  2. Erstellen Sie ein Objekt zum Speichern von extraQueryParameters, und übergeben Sie dieses Objekt an die MSAL loginPopup()- Methode.

    let loginRequest = {
     extraQueryParameters: {id_token_hint: 'id-token-hint-value'}
}

myMSALObj.loginPopup(loginRequest);

Sichern Sie Ihre Abmeldeumleitung

Nach der Abmeldung wird der Benutzer unabhängig von den Antwort-URLs, die für die Anwendung angegeben wurden, an den post_logout_redirect_uri im Parameter angegebenen URI umgeleitet. Wenn jedoch ein gültiges id_token_hint Übergeben und das Anforderungs-ID-Token in Abmeldeanforderungen aktiviert ist, überprüft Azure AD B2C, ob der Wert post_logout_redirect_uri einer der konfigurierten Umleitungs-URIs der Anwendung entspricht, bevor die Umleitung ausgeführt wird. Wenn keine übereinstimmende Antwort-URL für die Anwendung konfiguriert wurde, wird eine Fehlermeldung angezeigt, und der Benutzer wird nicht umgeleitet.

Führen Sie die folgenden Schritte aus, um einen gesicherten Umleitungs-Umleitungs-URI zu unterstützen:

  1. Erstellen Sie eine global zugängliche Variable zum Speichern der id_token.

    let id_token = "";

  2. Analysieren Sie in der MSAL-Funktion handleResponse das id_tokenauthenticationResult Objekt in die id_token Variable.

    function handleResponse(response) {
    if (response !== null) {
        setAccount(response.account);
        id_token = response.idToken;
    } else {
        selectAccount();
    }
}

  3. Fügen Sie in der signOut Funktion den id_token_hint Parameter zum logoutRequest-Objekt hinzu.

    function signOut() {
    const logoutRequest = {
        postLogoutRedirectUri: msalConfig.auth.redirectUri,
        //set id_token_hint to the id_token value
        idTokenHint : id_token,
        mainWindowRedirectUri: msalConfig.auth.redirectUri
    };
    myMSALObj.logoutPopup(logoutRequest);
}

Im obigen Beispiel ist die post_logout_redirect_uri , die an die Abmeldeanforderung übergeben wird, im Format: https://your-app.com/. Diese URL muss der Antwort-URL der Anwendungsregistrierung hinzugefügt werden.

Einmaliges Abmelden aktivieren

Single logout in Azure AD B2C verwendet OpenId Connect Front-Channel-Abmeldung, um Abmeldeanforderungen an alle Anwendungen vorzunehmen, bei der sich der Benutzer über Azure AD B2C angemeldet hat.

Diese Abmeldeanforderungen werden von der Azure AD B2C-Abmeldeseite in einem ausgeblendeten Iframe vorgenommen. Die Iframes senden HTTP-Anforderungen an alle Front-Channel-Abmeldeendpunkte, die für die Apps registriert sind, die Azure AD B2C als angemeldet aufgezeichnet hat.

Ihr Abmeldeendpunkt für jede Anwendung muss die MSAL logout() -Methode aufrufen. Sie müssen MSAL auch explizit so konfigurieren, dass sie in einem Iframe in diesem Szenario ausgeführt wird, indem Sie auf "allowRedirectInIframetrue.

Im folgenden Codebeispiel wird Folgendes festgelegtallowRedirectInIframe:true

const msalConfig = {
    auth: {
        clientId: "enter_client_id_here",
        .....
    },
    cache: {
        cacheLocation: "..",
        ....
    },
    system: {
        allowRedirectInIframe: true
    };
}

async function logoutSilent(MSAL) {
   return MSAL.logout({
      onRedirectNavigate: (url) => {
         return false;
       }

Nächste Schritte

Erfahren Sie mehr über MSAL.js Konfigurationsoptionen.

  • Last updated on