Verwenden der Microsoft-Authentifizierungsbibliothek für JavaScript zum Arbeiten mit Azure AD B2C

Mit der Microsoft-Authentifizierungsbibliothek für JavaScript (MSAL.js) können JavaScript-Entwickler Benutzer mit sozialen und lokalen Identitäten mithilfe von Azure Active Directory B2C (Azure AD B2C ) authentifizieren.

Mithilfe von Azure AD B2C als Identitätsverwaltungsdienst können Sie anpassen und steuern, wie Sich Ihre Kunden registrieren, sich anmelden und ihre Profile verwalten, wenn sie Ihre Anwendungen verwenden.

Mit Azure AD B2C können Sie auch die Benutzeroberfläche, die Ihre Anwendung während des Authentifizierungsprozesses anzeigt, branding und anpassen.

Unterstützte App-Typen und Szenarien

MSAL.js ermöglicht Single-Page-Webanwendungen die Anmeldung von Benutzern mit Azure AD B2C unter Verwendung des Autorisierungscodeflows mit PKCE. Mit MSAL.js und Azure AD B2C:

• Benutzer können sich mit ihren sozialen und lokalen Identitäten authentifizieren.
• Benutzer können berechtigt sein, auf geschützte Azure AD B2C-Ressourcen zuzugreifen (jedoch keine von Microsoft Entra geschützten Ressourcen).
• Benutzer können keine Token für Microsoft-APIs (z. B. MS Graph-API) mithilfe delegierter Berechtigungen abrufen.
• Benutzer mit Administratorrechten können Token für Microsoft-APIs (z. B. MS Graph-API) mithilfe delegierter Berechtigungen abrufen.

Weitere Informationen finden Sie unter: Arbeiten mit Azure AD B2C

Nächste Schritte

Arbeiten Sie die folgenden Tutorials durch:

• Anmelden von Benutzern mit Azure AD B2C in einer einzelseitigen Anwendung
• Aufrufen einer geschützten Azure AD B2C-Web-API

⚠– Bevor Sie hier beginnen, sollten Sie wissen, wie Sie ein App-Objekt initialisieren und mit Ressourcen und Bereichen arbeiten. Wir empfehlen auch die allgemeine Vertrautheit mit Azure AD B2C. Weitere Informationen finden Sie in der B2C-Dokumentation .

MSAL.js unterstützt die Authentifizierung mit sozialen Identitäten (Microsoft, Google, Facebook usw.), Unternehmen (ADFS, Salesforce usw.) und lokalen (im Azure AD B2C-Verzeichnis gespeicherten) Identitäten unter Verwendung von Azure AD B2C (B2C) kurz). Beim Entwickeln von B2C-Apps mit MSAL.jssind einige wichtige Details zu beachten.

Schnelle Fakten

Mit B2C:

• Benutzer können sich mit ihren sozialen Identitäten authentifizieren.
• Benutzer können berechtigt sein, auf geschützte B2C-Ressourcen zuzugreifen (aber nicht Microsoft Entra geschützten Ressourcen).
• Benutzer können keine Token für Microsoft-APIs (z. B. MS Graph-API) mithilfe delegierter Berechtigungen abrufen.
• Anwendungen können Token für Microsoft-APIs mithilfe von Anwendungsberechtigungen (Benutzerverwaltungsszenarien) abrufen.

B2C-App-Konfiguration

Es folgt ein Beispiel für eine B2C-App-Konfiguration:

const msalConfig = {
  auth: {
    clientId: "<your-clientID>",
    authority: "https://<your-tenant>.b2clogin.com/<your-tenant>.onmicrosoft.com/<your-policyID>",
    knownAuthorities: ["<your-tenant>.b2clogin.com"] // array of URIs that are known to be valid
  }
}

const apiConfig = {
  b2cScopes: ["https://<your-tenant>.onmicrosoft.com/<your-api>/<your-scope>"],
  webApiUri: "<your-api-uri>" // e.g. "https://fabrikamb2chello.azurewebsites.net/hello"
};

const loginRequest = {
  scopes: [ "openid", "offline_access" ]
}

const tokenRequest = {
  scopes: apiConfig.b2cScopes // e.g. "https://<your-tenant>.onmicrosoft.com/<your-api>/<your-scope>"
}

Microsoft Entra vs B2C-Endpunkte

Ein wichtiger Unterschied zwischen Microsoft Entra ID und Azure AD B2C-Mandanten ist deren Endpunkte.

Ein Microsoft Entra ID-Mandant:

• Enthält nur Microsoft Entra-Endpunkte (login.microsoftonline.com/*).
• Macht einen einzelnen Tokenendpunkt (login.microsoftonline.com/.../token) verfügbar.
• mit Microsoft Entra Endpunkten können Sie Token für Folgendes abrufen:
  • Ihre Anwendungen, die durch Microsoft Entra ID geschützt sind.
  • Microsoft-APIs, z. B. MS Graph-API.

Ein B2C-Mandant:

• Enthält Microsoft Entra ID und Azure AD B2C-Endpunkte (login.microsoftonline.com/* und <your-domain>.b2clogin.com/*).
• Stellt getrennte Token-Endpunkte jeweils für (login.microsoftonline.com/.../token, <your-domain>.b2clogin.com/.../token) bereit.
• B2C-Endpunkte ermöglichen Ihnen das Abrufen von Token für:
  • Ihre Anwendungen, die durch B2C geschützt sind.

B2C- und delegierte Berechtigungen

Delegierte Berechtigungen geben den bereichsbasierten Zugriff mithilfe der interaktiven Autorisierung des angemeldeten Benutzers an. Diese Berechtigungen werden der Ressource (z. B. Ihrer Web-API, MS Graph-API usw.) zur Laufzeit als scp Ansprüche im Zugriffstoken des Clients angezeigt.

Die B2C-Authentifizierung eines Benutzers kann nicht zum Autorisieren von Microsoft Entra geschützten Apps oder Microsoft APIs verwendet werden (die auch durch Microsoft Entra ID geschützt sind). Wenn Sie also MSAL.js verwenden, können Sie den Endpunkt <your-tenant>.b2clogin.com/.../token nicht verwenden, um ein Token für MS Graph-API abzurufen.

OpenID Connect-Berechtigungen

Die Ausnahme von der oben genannten Regel stammt aus einem speziellen Satz von Bereichen, die als OpenID Connect (OIDC)-Berechtigungen bezeichnet werden, einschließlich openid und profile. Eine weitere spezielle Berechtigung ist die offline_access, die Ihrer App Zugriff auf ressourcen im Namen des Benutzers für längere Zeit (mithilfe eines Aktualisierungstokens) gewährt. MSAL.js stellt openid, profile und offline_access während loginPopup()- und loginRedirect()-Anforderungen standardmäßig bereit.

Microsoft Entra-Authentifizierung bei einem B2C-Mandanten

Wenn Sie den Endpunkt login.microsoftonline.com verwenden, ohne policyID Parameter für einen B2C-Mandanten anzugeben, greifen Sie auf die Microsoft Entra-Endpunkte des B2C-Mandanten zu. Nur in diesem Fall können Sie Token für MS Graph-API-Ressourcen mithilfe des Kontexts des angemeldeten Benutzers abrufen.

B2C- und Anwendungsberechtigungen

Anwendungsberechtigungen geben den rollenbasierten Zugriff mithilfe der Anmeldeinformationen/Identität der Clientanwendung an. Diese Berechtigungen werden der Ressource zur Laufzeit als roles Ansprüche im Zugriffstoken des Clients übermittelt.

Szenarien für die Benutzerverwaltung

Die login.microsoftonline.com Endpunkte können weiterhin für alle Hintergrundaufgaben verwendet werden, die nicht interaktiv sind, um Benutzer und Attribute zu verwalten, auch wenn sie spezifisch für B2C sind. Wenn Sie eine Anwendungsregistrierung für eine App erstellen, die clientanmeldeinformationen zum Verwalten von B2C-Ressourcen mithilfe von MS Graph-API verwendet, müssen Sie die Graph-API Bereiche auswählen, für die Ihre Verwaltungs-App die Berechtigung erhalten muss (weitere Informationen finden Sie in der Dokumentation). Zu beachtende Punkte:

• Um Anwendungsberechtigungen zu erhalten, müssen Sie die Anwendung authentifizieren (mithilfe des Client Credentials Grant).
• Um delegierte Berechtigungen zu erhalten, müssen Sie die Benutzerauthentifizierung mit einem Administratorkonto durchführen.
• Verwaltungs-Apps werden in der Regel als Benutzergruppentyp 1 oder Typ 2 registriert (siehe unten).

Weitere Themen

B2C- und Konto-/Zielgruppentypen

Während der Anwendungsregistrierung werden Sie aufgefordert, eine Zielgruppe auszuwählen. Der von Ihnen ausgewählte Benutzergruppentyp gibt an, für welchen Authentifizierungstyp Sie abzielen.

Abrufen eines Zugriffstokens für Ihre eigene API

Es gibt zwei Möglichkeiten zum Abrufen eines Zugriffstokens für Ihre eigene API:

1. Fordern Sie Ihre clientId als Bereich an:

msal.loginRedirect({
    scopes: ["client_Id"]
});

Weitere Informationen finden Sie hier

2. Machen Sie Ihren eigenen benutzerdefinierten Bereich für Ihre App-Registrierung verfügbar, und fordern Sie diesen Bereich an:

msal.loginRedirect({
    scopes: ["api://clientId/customScope.Read"]
});

B2C- und Abmeldeerfahrung

Die Abmeldung beendet den Single Sign-On-Status des Benutzers bei Azure AD B2C, meldet den Benutzer jedoch möglicherweise nicht von seiner Sitzung bei seinem sozialen Identitätsanbieter ab. Wenn der Benutzer während einer nachfolgenden Anmeldung denselben Identitätsanbieter auswählt, kann er sich erneut authentifizieren, ohne seine Anmeldeinformationen einzugeben. Hier ist die Annahme, dass, wenn sich ein Benutzer von der Anwendung abmelden möchte, nicht unbedingt bedeutet, dass er sich von ihrem sozialen Konto (z. B. Facebook) selbst abmelden möchte.

B2C- und Einladungsfluss

MSAL.js verarbeitet nur Token, die sie ursprünglich angefordert haben. Wenn Ihr Fluss erfordert, dass Sie einem Benutzer einen Link senden, den er für die Registrierung verwenden kann, müssen Sie sicherstellen, dass der Link auf Ihre App verweist, nicht auf den B2C-Dienst direkt. Ein Beispiel für einen Einladungsfluss lautet wie folgt:

1. Der Benutzer klickt auf den Link zu Ihrer App.
2. Die App ruft msal.loginRedirect auf und schließt id_token_hint in extraQueryParameters ein.

    msal.loginRedirect({
        scopes: ["example_scope"],
        extraQueryParameters: {'id_token_hint': your_id_token_hint}
    });

3. Die App wird an den B2C-Dienst umgeleitet, bei dem der Benutzer Anmeldeinformationen eingibt/sich anmeldet.
4. Der B2C-Dienst leitet zurück zu Ihrer App, die aufruft await msal.handleRedirectPromise() , um die Antwort zu verarbeiten und die Token zu speichern

B2C- und iframe-Verwendung

Azure AD B2C bietet eine eingebettete Anmeldeoberfläche, die das Rendern einer benutzerdefinierten Anmeldebenutzeroberfläche in einem iframe ermöglicht. Da MSAL die Umleitung in iframes standardmäßig verhindert, müssen Sie die Konfigurationsoption allowRedirectInIframe auf "true " festlegen, um dieses Feature verwenden zu können. Weitere Überlegungen bei der Verwendung von iFrames finden Sie unter: Verwenden von MSAL in iframed-Apps