Konfigurieren der Authentifizierung in einer Single-Page-Webanwendung (SPA) mit Azure AD B2C

Artikel
01/11/2024

In diesem Artikel werden Möglichkeiten beschrieben, wie Sie die Authentifizierungsfunktionalität von Azure Active Directory B2C (Azure AD B2C) für Ihre Single-Page-Webanwendung anpassen und verbessern können.

Machen Sie sich zunächst mit dem folgenden Artikel vertraut: Konfigurieren der Authentifizierung in einer Beispielwebanwendung.

Verwenden einer benutzerdefinierten Domäne

Durch Verwenden einer benutzerdefinierten Domäne können Sie die Authentifizierungs-URL vollständig mit Branding versehen. Aus seiner Sicht bleibt der Benutzer während des Authentifizierungsprozesses in Ihrer Domäne und wird nicht zum Azure AD B2C-Domänennamen b2clogin.com umgeleitet.

Um alle Verweise auf „b2c“ in der URL zu entfernen, können Sie auch den Namen Ihres B2C-Mandanten, contoso.onmicrosoft.com, in der URL der Authentifizierungsanforderung durch die GUID Ihrer Mandanten-ID ersetzen. Sie können z. B. https://fabrikamb2c.b2clogin.com/contoso.onmicrosoft.com/ in https://account.contosobank.co.uk/<tenant ID GUID>/ ändern.

Um eine benutzerdefinierte Domäne und Ihre Mandanten-ID in der Authentifizierungs-URL zu verwenden, befolgen Sie die Anleitung unter Aktivieren von benutzerdefinierten Domänen. Suchen Sie Ihr MSAL-Konfigurationsobjekt (Microsoft Authentication Library), und ändern Sie authorities und knownAuthorities so, dass der benutzerdefinierte Domänenname und die Mandanten-ID verwendet werden.

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"],
      ...
    },
  ...
}

Während einer User Journey zur Anmeldung zielt Ihre App ggf. auf einen bestimmten Benutzer ab. Wenn eine App auf einen Benutzer abzielt, kann sie in der Autorisierungsanforderung den Abfrageparameter login_hint mit dem Anmeldenamen des Benutzers angeben. Azure AD B2C füllt den Anmeldenamen automatisch auf. Der Benutzer muss nur das Kennwort angeben.

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

Wenn Sie eine benutzerdefinierte Richtlinie verwenden, fügen Sie den erforderlichen Eingabeanspruch hinzu, wie unter dem Verfahren Einrichten der direkten Anmeldung beschrieben.
Erstellen Sie ein Objekt, in dem login_hint gespeichert wird, und übergeben Sie dieses Objekt an die MSAL loginPopup() -Methode.
```
let loginRequest = {
    loginHint: "bob@contoso.com"
}

myMSALObj.loginPopup(loginRequest);
```

Vorabauswahl eines Identitätsanbieters

Wenn Sie die User Journey für die Anmeldung bei Ihrer Anwendung so konfiguriert haben, dass Konten für soziale Netzwerke inbegriffen sind, wie z.B. Facebook, LinkedIn oder Google, können Sie den Parameter domain_hint angeben. Dieser Abfrageparameter enthält einen Hinweis für Azure AD B2C zu dem sozialen Netzwerk als Identitätsanbieter, das für die Anmeldung verwendet werden sollte. Wenn in der Anwendung beispielsweise domain_hint=facebook.com angegeben ist, erfolgt der Anmeldefluss direkt auf der Anmeldeseite von Facebook.

Gehen Sie wie folgt vor, um Benutzer zu einem externen Identitätsanbieter umzuleiten:

Überprüfen Sie den Domänennamen Ihres externen Identitätsanbieters. Weitere Informationen finden Sie unter Umleiten einer Anmeldung zu einem Anbieter sozialer Netzwerke.
Erstellen Sie ein Objekt, in dem extraQueryParameters gespeichert wird, und übergeben Sie dieses Objekt an die MSAL loginPopup() -Methode.
```
let loginRequest = {
     extraQueryParameters: {domain_hint: 'facebook.com'}
}

myMSALObj.loginPopup(loginRequest);
```

Ändern Sie die Sprache für die Benutzeroberfläche

Die Sprachanpassung in Azure AD B2C ermöglicht Ihrem Benutzerfluss, eine Vielzahl von Sprachen zu berücksichtigen, um die Anforderungen Ihrer Kunden zu erfüllen. Weitere Informationen hierzu finden Sie unter Sprachanpassung.

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

Konfigurieren Sie die Sprachanpassung.
Erstellen Sie ein Objekt, in dem extraQueryParameters gespeichert wird, und übergeben Sie dieses Objekt an die MSAL loginPopup() -Methode.
```
let loginRequest = {
     extraQueryParameters: {ui_locales: 'en-us'}
}

myMSALObj.loginPopup(loginRequest);
```

Das Übergeben eines benutzerdefinierten Abfragezeichenfolgenparameters

Mit benutzerdefinierten Richtlinien können Sie einen benutzerdefinierten Abfragezeichenfolgenparameter übergeben. Ein gutes Anwendungsfallbeispiel ist die dynamische Änderung der Seitenanzahl.

Um einen benutzerdefinierten Abfragezeichenfolgenparameter zu übergeben, gehen Sie folgendermaßen vor:

Konfigurieren Sie das ContentDefinitionParameters-Element.
Erstellen Sie ein Objekt, in dem extraQueryParameters gespeichert wird, 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 der vertrauenden Seite kann ein eingehendes JWT (JSON Web Token) als Teil der OAuth2-Autorisierungsanforderung senden. Das eingehende Token ist ein Hinweis zum Benutzer oder zur Autorisierungsanforderung. Azure AD B2C überprüft das Token und extrahiert die Ansprüche.

Führen Sie die folgenden Schritte aus, um einen ID-Tokenhinweis in die Authentifizierungsanforderung einzufügen:

Definieren Sie ein technisches ID-Token-Hinweisprofil in Ihrer benutzerdefinierten Richtlinie.
Erstellen Sie ein Objekt, in dem extraQueryParameters gespeichert wird, und übergeben Sie dieses Objekt an die MSAL loginPopup() -Methode.
```
let loginRequest = {
     extraQueryParameters: {id_token_hint: 'id-token-hint-value'}
}

myMSALObj.loginPopup(loginRequest);
```

Sichern der Umleitung beim Abmelden

Nach der Abmeldung wird der Benutzer an den im post_logout_redirect_uri-Parameter angegebenen URI umgeleitet, ungeachtet der Antwort-URLs, die für die Anwendung angegeben wurden. Wenn jedoch ein gültiger id_token_hint-Wert übergeben wird und die Option ID-Token in Abmeldeanforderungen erforderlich aktiviert ist, überprüft Azure AD B2C, ob der Wert von post_logout_redirect_uri einem der für die Anwendung konfigurierten Umleitungs-URIs entspricht, bevor die Umleitung ausgeführt wird. Wenn keine entsprechende Antwort-URL für die Anwendung konfiguriert ist, wird eine Fehlermeldung angezeigt, und der Benutzer wird nicht umgeleitet.

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

Erstellen Sie eine global zugängliche Variable, um id_token zu speichern.
```
let id_token = "";
```

Parsen Sie id_token in der MSAL-FunktionhandleResponse vom authenticationResult-Objekt in die id_token-Variable.

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

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 weist post_logout_redirect_uri, das an die Abmeldeanforderung übergeben wird, das folgende Format auf: https://your-app.com/. Diese URL muss zur Antwort-URL der Anwendungsregistrierung hinzugefügt werden.

Aktivieren des einmaligen Abmeldens

Einmaliges Abmelden in Azure AD B2C verwendet OpenId Connect Front-Channel-Abmeldung, um Abmeldeanforderungen an alle Anwendungen zu senden, bei der sich der Benutzer über Azure AD B2C angemeldet hat.

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

Der Anmeldeendpunkt für jedes Anwendung muss die MSAL logout() -Methode aufrufen. Darüber hinaus müssen Sie MSAL in diesem Szenario explizit für die Ausführung in einem Iframe konfigurieren, indem Sie allowRedirectInIframeauf true festlegen.

Das folgende Codebeispiel legt allowRedirectInIframe auf true fest:

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

Weitere Informationen zu den MSAL.js-Konfigurationsoptionen.

Freigeben über

Konfigurieren der Authentifizierung in einer Single-Page-Webanwendung (SPA) mit Azure AD B2C

Verwenden einer benutzerdefinierten Domäne

Vorabauswahl eines Identitätsanbieters

Ändern Sie die Sprache für die Benutzeroberfläche

Das Übergeben eines benutzerdefinierten Abfragezeichenfolgenparameters

Übergeben eines ID-Tokenhinweises

Sichern der Umleitung beim Abmelden

Aktivieren des einmaligen Abmeldens

Nächste Schritte

Feedback

Zusätzliche Ressourcen

Freigeben über

Konfigurieren der Authentifizierung in einer Single-Page-Webanwendung (SPA) mit Azure AD B2C

Verwenden einer benutzerdefinierten Domäne

Auffüllen des Anmeldenamens

Vorabauswahl eines Identitätsanbieters

Ändern Sie die Sprache für die Benutzeroberfläche

Das Übergeben eines benutzerdefinierten Abfragezeichenfolgenparameters

Übergeben eines ID-Tokenhinweises

Sichern der Umleitung beim Abmelden

Aktivieren des einmaligen Abmeldens

Nächste Schritte

Feedback

Zusätzliche Ressourcen