Single-Page-Anmeldung mithilfe des impliziten OAuth 2.0-Flusses in Azure Active Directory B2CSingle-page sign in using the OAuth 2.0 implicit flow in Azure Active Directory B2C

Viele moderne Anwendungen verfügen über ein Single-Page-App-Front-End, das hauptsächlich in JavaScript geschrieben ist.Many modern applications have a single-page app front end that is written primarily in JavaScript. Häufig wird zum Schreiben der App ein Framework wie Angular, React oder Vue.js verwendet.Often, the app is written by using a framework like React, Angular, or Vue.js. Bei einseitigen Apps und anderen JavaScript-Apps, die hauptsächlich in einem Browser ausgeführt werden, gibt es in Bezug auf die Authentifizierung einige zusätzliche Herausforderungen:Single-page apps and other JavaScript apps that run primarily in a browser have some additional challenges for authentication:

  • Die Sicherheitsmerkmale dieser Apps unterscheiden sich von herkömmlichen serverbasierten Webanwendungen.The security characteristics of these apps are different from traditional server-based web applications.
  • Zahlreiche Autorisierungsserver und Identitätsanbieter unterstützen keine CORS-Anforderungen (CORS = Cross-Origin Resource Sharing).Many authorization servers and identity providers do not support cross-origin resource sharing (CORS) requests.
  • Umleitungen auf ganzseitige Browserseiten können die Benutzererfahrung stören.Full-page browser redirects away from the app can be invasive to the user experience.

Die empfohlene Methode zur Unterstützung von Single-Page-Webanwendungen ist OAuth 2.0-Autorisierungscodefluss (mit PKCE).The recommended way of supporting single-page applications is OAuth 2.0 Authorization code flow (with PKCE).

Einige Frameworks, z. B. MSAL.js 1.x, unterstützen nur den Fluss für implizite Genehmigung.Some frameworks, like MSAL.js 1.x, only support the implicit grant flow. In diesen Fällen unterstützt Azure Active Directory B2C (Azure AD B2C) den Fluss für implizite Genehmigung für OAuth 2.0-Autorisierung.In these cases, Azure Active Directory B2C (Azure AD B2C) supports the OAuth 2.0 authorization implicit grant flow. Dieser Fluss wird in Abschnitt 4.2 der OAuth 2.0-Spezifikation beschrieben.Thee flow is described in section 4.2 of the OAuth 2.0 specification. Beim impliziten Ablauf empfängt die App Token direkt vom Azure AD-Autorisierungsendpunkt (Azure Active Directory), ohne dass eine Kommunikation zwischen Servern stattfindet.In implicit flow, the app receives tokens directly from the Azure Active Directory (Azure AD) authorize endpoint, without any server-to-server exchange. Die gesamte Authentifizierungslogik und Sitzungsverarbeitung wird vollständig im JavaScript-Client abgewickelt – entweder mit einer Seitenumleitung oder mit einem Popupfeld.All authentication logic and session handling is done entirely in the JavaScript client with either a page redirect or a pop-up box.

Azure AD B2C erweitert den impliziten OAuth 2.0-Standardfluss, sodass mehr als nur eine einfache Authentifizierung und Autorisierung erfolgt.Azure AD B2C extends the standard OAuth 2.0 implicit flow to more than simple authentication and authorization. Azure AD B2C führt den Richtlinienparameter ein.Azure AD B2C introduces the policy parameter. Mit dem Richtlinienparameter können Sie OAuth 2.0 zum Hinzufügen von Richtlinien zu Ihrer App verwenden, z. B. für Benutzerflows für die Registrierung, Anmeldung und Profilverwaltung.With the policy parameter, you can use OAuth 2.0 to add policies to your app, such as sign-up, sign-in, and profile management user flows. In den HTTP-Beispielanforderungen in diesem Artikel wird {tenant}.onmicrosoft.com als Beispiel verwendet.In the example HTTP requests in this article, {tenant}.onmicrosoft.com is used as an example. Ersetzen Sie {tenant} durch den Namen Ihres Mandanten, wenn ein solcher vorhanden ist und Sie einen Benutzerflow erstellt haben.Replace {tenant} with the name of your tenant if you have one and have also created a user flow.

Die implizite Anmeldevorgang sieht in etwa wie die folgende Abbildung aus.The implicit sign-in flow looks something like the following figure. Die einzelnen Schritte werden später im Artikel detailliert beschrieben.Each step is described in detail later in the article.

Swimlane-Diagramm mit dem impliziten OpenID Connect-Flow

Übermitteln von AuthentifizierungsanforderungenSend authentication requests

Wenn Ihre Webanwendung den Benutzer authentifizieren und einen Benutzerflow ausführen muss, kann sie den Benutzer an den /authorize-Endpunkt weiterleiten.When your web application needs to authenticate the user and run a user flow, it can direct the user to the /authorize endpoint. Der Benutzer führt Aktionen in Abhängigkeit vom Benutzerflow durch.The user takes action depending on the user flow.

In dieser Anforderung gibt der Client die Berechtigungen, die er vom Benutzer benötigt, im Parameter scope an. Er gibt auch den auszuführenden Benutzerflow an.In this request, the client indicates the permissions that it needs to acquire from the user in the scope parameter and the user flow to run. Um sich anzusehen, wie diese Anforderung funktioniert, fügen Sie sie in einem Browser ein und führen sie aus.To get a feel for how the request works, try pasting the request into a browser and running it. Ersetzen Sie {tenant} durch den Namen des Azure AD B2C-Mandanten.Replace {tenant} with the name of your Azure AD B2C tenant. Ersetzen Sie 90c0fe63-bcf2-44d5-8fb7-b8bbc0b29dc6 durch die App-ID der Anwendung, die Sie zuvor in Ihrem Mandanten registriert haben.Replace 90c0fe63-bcf2-44d5-8fb7-b8bbc0b29dc6 with the app ID of the application you've previously registered in your tenant. Ersetzen Sie {policy} durch den Namen einer Richtlinie, die Sie in Ihrem Mandanten erstellt haben, z. B. b2c_1_sign_in.Replace {policy} with the name of a policy you've created in your tenant, for example b2c_1_sign_in.

GET https://{tenant}.b2clogin.com/{tenant}.onmicrosoft.com/{policy}/oauth2/v2.0/authorize?
client_id=90c0fe63-bcf2-44d5-8fb7-b8bbc0b29dc6
&response_type=id_token+token
&redirect_uri=https%3A%2F%2Faadb2cplayground.azurewebsites.net%2F
&response_mode=fragment
&scope=openid%20offline_access
&state=arbitrary_data_you_can_receive_in_the_response
&nonce=12345
ParameterParameter ErforderlichRequired BESCHREIBUNGDescription
{tenant}{tenant} JaYes Name des Azure AD B2C-Mandanten.Name of your Azure AD B2C tenant
{policy}{policy} JaYes Der auszuführende Benutzerflow.The user flow to be run. Geben Sie den Namen eines Benutzerflows an, den Sie in Ihrem Azure AD B2C-Mandanten erstellt haben.Specify the name of a user flow you've created in your Azure AD B2C tenant. Beispiel: b2c_1_sign_in, b2c_1_sign_up oder b2c_1_edit_profile.For example: b2c_1_sign_in, b2c_1_sign_up, or b2c_1_edit_profile.
client_idclient_id JaYes Die Anwendungs-ID, die das Azure-Portal Ihrer Anwendung zugewiesen hat.The application ID that the Azure portal assigned to your application.
response_typeresponse_type JaYes Muss das id_token für die OpenID Connect-Anmeldung enthalten.Must include id_token for OpenID Connect sign-in. Kann auch den Antworttyp token enthalten.It also can include the response type token. Mithilfe von token kann Ihre App ein Zugriffstoken direkt vom Autorisierungsendpunkt abrufen, ohne dass eine zweite Anforderung an den Autorisierungsendpunkt erforderlich ist.If you use token, your app can immediately receive an access token from the authorize endpoint, without making a second request to the authorize endpoint. Wenn Sie den Antworttyp token verwenden, muss der Parameter scope einen Bereich enthalten, in dem angegeben wird, für welche Ressource das Token ausgegeben wird.If you use the token response type, the scope parameter must contain a scope that indicates which resource to issue the token for.
redirect_uriredirect_uri Nein No Der Umleitungs-URI der App, in dem Authentifizierungsantworten gesendet und von der App empfangen werden können.The redirect URI of your app, where authentication responses can be sent and received by your app. Er muss genau mit einem der Umleitungs-URIs übereinstimmen, die Sie im Portal registriert haben, mit dem Unterschied, dass er URL-codiert sein muss.It must exactly match one of the redirect URIs that you registered in the portal, except that it must be URL-encoded.
response_moderesponse_mode NeinNo Gibt die Methode an, die zum Zurücksenden des resultierenden Tokens an Ihre App verwendet wird.Specifies the method to use to send the resulting token back to your app. Verwenden Sie fragment für implizite Flüsse.For implicit flows, use fragment.
scopescope JaYes Eine durch Leerzeichen getrennte Liste von Bereichen.A space-separated list of scopes. Ein einzelner Bereichswert gibt Azure AD an, dass beide Berechtigungen angefordert werden.A single scope value indicates to Azure AD both of the permissions that are being requested. Der openid-Bereich gibt eine Berechtigung für das Anmelden des Benutzers und das Abrufen von Daten über den Benutzer in Form von ID-Token an.The openid scope indicates a permission to sign in the user and get data about the user in the form of ID tokens. Der offline_access -Bereich ist für Web-Apps optional.The offline_access scope is optional for web apps. Er gibt an, dass Ihre App ein Aktualisierungstoken für den dauerhaften Zugriff auf Ressourcen benötigt.It indicates that your app needs a refresh token for long-lived access to resources.
statestate Nein No Ein in der Anforderung enthaltener Wert, der ebenfalls in der Tokenantwort zurückgegeben wird.A value included in the request that also is returned in the token response. Es kann sich um eine Zeichenfolge mit jedem beliebigen zu verwendenden Inhalt handeln.It can be a string of any content that you want to use. Normalerweise wird ein zufällig generierter eindeutiger Wert verwendet, um eine websiteübergreifende Anforderungsfälschung zu verhindern.Usually, a randomly generated, unique value is used, to prevent cross-site request forgery attacks. Der Status wird auch zum Codieren von Informationen über den Status des Benutzers in der App vor der Authentifizierungsanforderung verwendet, z.B. für Informationen zu der Seite, die der Benutzer besucht hat.The state is also used to encode information about the user's state in the app before the authentication request occurred, like the page they were on.
noncenonce JaYes Ein (von der App generierter) Wert in der Anforderung, der im resultierenden ID-Token als Anspruch enthalten ist.A value included in the request (generated by the app) that is included in the resulting ID token as a claim. Die App kann diesen Wert dann verifizieren, um Tokenwiederholungsangriffe abzuwehren.The app can then verify this value to mitigate token replay attacks. Der Wert ist eine zufällige, eindeutige Zeichenfolge, die verwendet werden kann, um den Ursprung der Anforderung zu identifizieren.Usually, the value is a randomized, unique string that can be used to identify the origin of the request.
promptprompt Nein No Der Typ der erforderlichen Benutzerinteraktion.The type of user interaction that's required. Derzeit ist login der einzige gültige Wert.Currently, the only valid value is login. Durch diesen Parameter wird der Benutzer dazu gezwungen, die Anmeldeinformationen bei dieser Anforderung einzugeben.This parameter forces the user to enter their credentials on that request. Einmaliges Anmelden wird nicht berücksichtigt.Single sign-on doesn't take effect.

An diesem Punkt wird der Benutzer aufgefordert, den Workflow der Richtlinie abzuschließen.At this point, the user is asked to complete the policy's workflow. Der Benutzer muss möglicherweise seinen Benutzernamen und sein Kennwort eingeben, sich mit einer Social-Media-Identität anmelden, sich für das Verzeichnis registrieren oder andere Schritte ausführen.The user might have to enter their username and password, sign in with a social identity, sign up for the directory, or any other number of steps. Die Benutzeraktionen hängen davon ab, wie der Benutzerflow definiert ist.User actions depend on how the user flow is defined.

Nachdem der Benutzer den Benutzerflow abgeschlossen hat, gibt Azure AD über den für redirect_uri verwendeten Wert eine Antwort an Ihre App zurück.After the user completes the user flow, Azure AD returns a response to your app at the value you used for redirect_uri. Hierzu wird die im Parameter response_mode angegebene Methode verwendet.It uses the method specified in the response_mode parameter. Die Antwort ist in den Benutzeraktionsszenarien immer gleich, unabhängig vom ausgeführten Benutzerflow.The response is exactly the same for each of the user action scenarios, independent of the user flow that was executed.

Erfolgreiche AntwortSuccessful response

Eine erfolgreiche Antwort mithilfe von response_mode=fragment und response_type=id_token+token sieht wie folgt aus, wobei die Zeilenumbrüche der Lesbarkeit dienen:A successful response that uses response_mode=fragment and response_type=id_token+token looks like the following, with line breaks for legibility:

GET https://aadb2cplayground.azurewebsites.net/#
access_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsIng1dCI6Ik5HVEZ2ZEstZnl0aEV1Q...
&token_type=Bearer
&expires_in=3599
&scope="90c0fe63-bcf2-44d5-8fb7-b8bbc0b29dc6 offline_access",
&id_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsIng1dCI6Ik5HVEZ2ZEstZnl0aEV1Q...
&state=arbitrary_data_you_sent_earlier
ParameterParameter BESCHREIBUNGDescription
access_tokenaccess_token Das von der App angeforderte Zugriffstoken.The access token that the app requested.
token_typetoken_type Der Wert des Tokentyps.The token type value. Bearertoken ist der einzige Typ, den Azure AD unterstützt.The only type that Azure AD supports is Bearer.
expires_inexpires_in Gibt an, wie lange das Zugriffstoken gültig ist (in Sekunden).The length of time that the access token is valid (in seconds).
scopescope Die Bereiche, für die das Token gültig ist.The scopes that the token is valid for. Sie können in den Bereichen auch Token für die spätere Verwendung zwischenspeichern.You also can use scopes to cache tokens for later use.
id_tokenid_token Das ID-Token, das die App angefordert hat.The ID token that the app requested. Sie können mit dem ID-Token die Identität des Benutzers überprüfen und eine Sitzung mit dem Benutzer beginnen.You can use the ID token to verify the user's identity and begin a session with the user. Weitere Informationen zu ID-Token und deren Inhalt finden Sie im Azure AD B2C-Tokenverweis.For more information about ID tokens and their contents, see the Azure AD B2C token reference.
statestate Wenn ein Parameter state in der Anforderung enthalten ist, sollte der gleiche Wert in der Antwort angezeigt werden.If a state parameter is included in the request, the same value should appear in the response. Die App sollte überprüfen, ob die state-Werte in der Anforderung und in der Antwort identisch sind.The app should verify that the state values in the request and response are identical.

FehlerantwortError response

Fehlerantworten können auch an den Umleitungs-URI gesendet werden, damit die App diese entsprechend behandeln kann:Error responses also can be sent to the redirect URI so that the app can handle them appropriately:

GET https://aadb2cplayground.azurewebsites.net/#
error=access_denied
&error_description=the+user+canceled+the+authentication
&state=arbitrary_data_you_can_receive_in_the_response
ParameterParameter BESCHREIBUNGDescription
errorerror Ein Code, mit dem Typen der auftretenden Fehler klassifiziert werden.A code used to classify types of errors that occur.
error_descriptionerror_description Eine spezifische Fehlermeldung, mit der Sie die Hauptursache eines Authentifizierungsfehlers identifizieren können.A specific error message that can help you identify the root cause of an authentication error.
statestate Wenn ein Parameter state in der Anforderung enthalten ist, sollte der gleiche Wert in der Antwort angezeigt werden.If a state parameter is included in the request, the same value should appear in the response. Die App sollte überprüfen, ob die state-Werte in der Anforderung und in der Antwort identisch sind.The app should verify that the state values in the request and response are identical.

Überprüfen des ID-TokensValidate the ID token

Das Empfangen eines ID-Tokens reicht nicht aus, um den Benutzer zu authentifizieren.Receiving an ID token is not enough to authenticate the user. Validieren Sie die Signatur des ID-Tokens, und überprüfen Sie die Ansprüche im Token entsprechend den Anforderungen Ihrer App.Validate the ID token's signature, and verify the claims in the token per your app's requirements. Azure AD B2C verwendet JSON-Webtoken (JWT) und die Verschlüsselung mit öffentlichem Schlüssel, um Token zu signieren und deren Gültigkeit zu überprüfen.Azure AD B2C uses JSON Web Tokens (JWTs) and public key cryptography to sign tokens and verify that they are valid.

Für die Überprüfung von JWTs sind je nach gewünschter Sprache viele Open Source-Bibliotheken verfügbar.Many open-source libraries are available for validating JWTs, depending on the language you prefer to use. Erwägen Sie die Verwendung verfügbarer Open-Source-Bibliotheken, anstatt eine eigene Überprüfungslogik zu implementieren.Consider exploring available open-source libraries rather than implementing your own validation logic. Die Informationen in diesem Handbuch sind hilfreich für die ordnungsgemäße Verwendung dieser Bibliotheken.You can use the information in this article to help you learn how to properly use those libraries.

Azure AD B2C verfügt über einen OpenID Connect-Metadatenendpunkt.Azure AD B2C has an OpenID Connect metadata endpoint. Eine App kann mit diesem Endpunkt Informationen über Azure AD B2C zur Laufzeit abrufen.An app can use the endpoint to fetch information about Azure AD B2C at runtime. Diese Informationen umfassen Endpunkte, Tokeninhalte und Token-Signaturschlüssel.This information includes endpoints, token contents, and token signing keys. Es gibt ein JSON-Metadatendokument für jeden Benutzerflow in Ihrem Azure AD B2C-Mandanten.There is a JSON metadata document for each user flow in your Azure AD B2C tenant. Das Metadatendokument für den Benutzerflow „b2c_1_sign_in“ im Mandanten „fabrikamb2c.onmicrosoft.com“ befindet sich beispielsweise unter:For example, the metadata document for the b2c_1_sign_in user flow in the fabrikamb2c.onmicrosoft.com tenant is located at:

https://fabrikamb2c.b2clogin.com/fabrikamb2c.onmicrosoft.com/b2c_1_sign_in/v2.0/.well-known/openid-configuration

jwks_uri ist eine der Eigenschaften dieses Konfigurationsdokuments.One of the properties of this configuration document is the jwks_uri. Der Wert für den gleichen Benutzerflow würde wie folgt lauten:The value for the same user flow would be:

https://fabrikamb2c.b2clogin.com/fabrikamb2c.onmicrosoft.com/b2c_1_sign_in/discovery/v2.0/keys

Es gibt zwei Möglichkeiten zum Ermitteln, welcher Benutzerflow zum Signieren eines ID-Tokens verwendet wurde (und wo die Metadaten abgerufen werden können).To determine which user flow was used to sign an ID token (and where to fetch the metadata from), you have two options. Zunächst einmal ist der Benutzerflowname im acr-Anspruch in id_token enthalten.First, the user flow name is included in the acr claim in id_token. Informationen zum Analysieren von Ansprüchen nach einem ID-Token finden Sie im Azure AD B2C-Tokenverweis.For information about how to parse the claims from an ID token, see the Azure AD B2C token reference. Die andere Möglichkeit besteht darin, den Benutzerflow beim Übermitteln der Anforderung im Wert des Parameters state zu verschlüsseln.Your other option is to encode the user flow in the value of the state parameter when you issue the request. Anschließend kann der Parameter state entschlüsselt werden, um zu bestimmen, welcher Benutzerflow verwendet wurde.Then, decode the state parameter to determine which user flow was used. Beide Methoden sind gültig.Either method is valid.

Nachdem Sie das Metadatendokument aus dem OpenID Connect-Metadatenendpunkt erhalten haben, können Sie die öffentlichen RSA-256-Schlüssel (die sich an diesem Endpunkt befinden) zum Überprüfen der Signatur des ID-Tokens verwenden.After you've acquired the metadata document from the OpenID Connect metadata endpoint, you can use the RSA-256 public keys (located at this endpoint) to validate the signature of the ID token. Es gibt möglicherweise zu einem bestimmten Zeitpunkt mehrere Schlüssel an diesem Endpunkt. Sie werden jeweils durch eine kid identifiziert.There might be multiple keys listed at this endpoint at any given time, each identified by a kid. Der Header der id_token enthält auch einen kid-Anspruch.The header of id_token also contains a kid claim. Er gibt an, mit welchem dieser Schlüssel das ID-Token signiert wurde.It indicates which of these keys was used to sign the ID token. Weitere Informationen finden Sie im Azure AD B2C-Tokenverweis. Dort finden Sie auch Einzelheiten zum Überprüfen von Token.For more information, including learning about validating tokens, see the Azure AD B2C token reference.

Nach der Überprüfung der Signatur des ID-Tokens müssen auch einige Ansprüche überprüft werden.After you validate the signature of the ID token, several claims require verification. Zum Beispiel:For example:

  • Überprüfen Sie den nonce-Anspruch, um Tokenwiederholungsangriffe zu verhindern.Validate the nonce claim to prevent token replay attacks. Dessen Wert sollte dem in der Anmeldeanforderung angegebenen Wert entsprechen.Its value should be what you specified in the sign-in request.
  • Überprüfen Sie den aud-Anspruch, um sicherzustellen, dass das ID-Token für Ihre App ausgegeben wurde.Validate the aud claim to ensure that the ID token was issued for your app. Der Wert sollte der Anwendungs-ID der App entsprechen.Its value should be the application ID of your app.
  • Überprüfen Sie die Ansprüche iat und exp, um sicherzustellen, dass das ID-Token nicht abgelaufen ist.Validate the iat and exp claims to ensure that the ID token has not expired.

Es gibt auch noch einige andere Überprüfungen, die Sie durchführen sollten. Diese sind in der OpenID Connect Core-Spezifikation ausführlich beschrieben. Sie können je nach Szenario auch zusätzliche Ansprüche überprüfen.Several more validations that you should perform are described in detail in the OpenID Connect Core Spec. You might also want to validate additional claims, depending on your scenario. Einige allgemeinen Überprüfungen umfassen:Some common validations include:

  • Sicherstellen, dass sich der Benutzer/die Organisation für die App registriert hat.Ensuring that the user or organization has signed up for the app.
  • Sicherstellen, dass der Benutzer über eine ordnungsgemäße Autorisierung und die richtigen Berechtigungen verfügt.Ensuring that the user has proper authorization and privileges.
  • Sicherstellen, dass eine bestimmte Authentifizierungsmethode verwendet wird, z. B. Azure AD Multi-Factor Authentication.Ensuring that a certain strength of authentication has occurred, such as by using Azure AD Multi-Factor Authentication.

Weitere Informationen zu den Ansprüchen in einem ID-Token finden Sie im Azure AD B2C-Tokenverweis.For more information about the claims in an ID token, see the Azure AD B2C token reference.

Nachdem Sie das ID-Token vollständig überprüft haben, können Sie eine Sitzung mit dem Benutzer beginnen.After you have validated the ID token, you can begin a session with the user. Verwenden Sie in Ihrer App die Ansprüche im ID-Token, um Informationen über den Benutzer abzurufen.In your app, use the claims in the ID token to obtain information about the user. Diese Informationen können für die Anzeige, für Aufzeichnungen, für die Autorisierung usw. verwendet werden.This information can be used for display, records, authorization, and so on.

Abrufen von ZugriffstokenGet access tokens

Wenn Ihre Web-Apps lediglich Benutzerflows ausführen müssen, können Sie die nächsten Abschnitte überspringen.If the only thing your web apps needs to do is execute user flows, you can skip the next few sections. Die Informationen in diesen Abschnitten gelten nur für Web-Apps, die authentifizierte Aufrufe an eine Web-API durchführen müssen und die auch von Azure AD B2C geschützt werden.The information in the following sections is applicable only to web apps that need to make authenticated calls to a web API, and which are protected by Azure AD B2C.

Nachdem Sie den Benutzer bei der Single-Page-App angemeldet haben, können Sie Zugriffstoken zum Aufrufen der durch Azure AD gesicherten Web-APIs abrufen.Now that you've signed the user into your single-page app, you can get access tokens for calling web APIs that are secured by Azure AD. Auch wenn Sie mithilfe des Antworttyps token bereits ein Token erhalten haben, können Sie diese Methode zum Abrufen von Token für zusätzliche Ressourcen verwenden, ohne den Benutzer zur erneuten Anmeldung umzuleiten.Even if you have already received a token by using the token response type, you can use this method to acquire tokens for additional resources without redirecting the user to sign in again.

In einem typischen Web-App-Fluss senden Sie eine Anforderung an den /token-Endpunkt.In a typical web app flow, you would make a request to the /token endpoint. Der Endpunkt unterstützt jedoch keine CORS-Anforderungen, daher kommen AJAX-Aufrufe zum Abrufen eines Aktualisierungstokens nicht infrage.However, the endpoint does not support CORS requests, so making AJAX calls to get a refresh token is not an option. Stattdessen können Sie den impliziten Fluss in einem ausgeblendeten HTML-IFrame-Element verwenden, um neue Token für andere Web-APIs zu erhalten.Instead, you can use the implicit flow in a hidden HTML iframe element to get new tokens for other web APIs. Hier sehen Sie ein Beispiel, mit Zeilenumbrüchen für bessere Lesbarkeit:Here's an example, with line breaks for legibility:

https://{tenant}.b2clogin.com/{tenant}.onmicrosoft.com/{policy}/oauth2/v2.0/authorize?
client_id=90c0fe63-bcf2-44d5-8fb7-b8bbc0b29dc6
&response_type=token
&redirect_uri=https%3A%2F%2Faadb2cplayground.azurewebsites.net%2F
&scope=https%3A%2F%2Fapi.contoso.com%2Ftasks.read
&response_mode=fragment
&state=arbitrary_data_you_can_receive_in_the_response
&nonce=12345
&prompt=none
ParameterParameter Erforderlich?Required? BESCHREIBUNGDescription
{tenant}{tenant} ErforderlichRequired Name des Azure AD B2C-Mandanten.Name of your Azure AD B2C tenant
{policy}{policy} ErforderlichRequired Der auszuführende Benutzerflow.The user flow to be run. Geben Sie den Namen eines Benutzerflows an, den Sie in Ihrem Azure AD B2C-Mandanten erstellt haben.Specify the name of a user flow you've created in your Azure AD B2C tenant. Beispiel: b2c_1_sign_in, b2c_1_sign_up oder b2c_1_edit_profile.For example: b2c_1_sign_in, b2c_1_sign_up, or b2c_1_edit_profile.
client_idclient_id ErforderlichRequired Die Anwendungs-ID, die Ihrer App im Azure-Portal zugewiesen wird.The application ID assigned to your app in the Azure portal.
response_typeresponse_type ErforderlichRequired Muss das id_token für die OpenID Connect-Anmeldung enthalten.Must include id_token for OpenID Connect sign-in. Kann auch den Antworttyp token enthalten.It might also include the response type token. Mithilfe von token kann Ihre App ein Zugriffstoken direkt vom Autorisierungsendpunkt abrufen, ohne dass eine zweite Anforderung an den Autorisierungsendpunkt erforderlich ist.If you use token here, your app can immediately receive an access token from the authorize endpoint, without making a second request to the authorize endpoint. Wenn Sie den Antworttyp token verwenden, muss der Parameter scope einen Bereich enthalten, in dem angegeben wird, für welche Ressource das Token ausgegeben wird.If you use the token response type, the scope parameter must contain a scope that indicates which resource to issue the token for.
redirect_uriredirect_uri EmpfohlenRecommended Der Umleitungs-URI der App, in dem Authentifizierungsantworten gesendet und von der App empfangen werden können.The redirect URI of your app, where authentication responses can be sent and received by your app. Er muss genau mit einem der Umleitungs-URIs übereinstimmen, den Sie im Portal registriert haben – mit dem Unterschied, dass er URL-codiert sein muss.It must exactly match one of the redirect URIs you registered in the portal, except that it must be URL-encoded.
scopescope ErforderlichRequired Eine durch Leerzeichen getrennte Liste von Bereichen.A space-separated list of scopes. Beziehen Sie zum Abrufen von Token alle Bereiche ein, die für die gewünschte Ressource erforderlich sind.For getting tokens, include all scopes that you require for the intended resource.
response_moderesponse_mode EmpfohlenRecommended Gibt die Methode an, die zum Zurücksenden des resultierenden Tokens an Ihre App verwendet wird.Specifies the method that is used to send the resulting token back to your app. Verwenden Sie fragment für den impliziten Flow.For implicit flow, use fragment. Es können zwei weitere Modi (query und form_post) angegeben werden, diese funktionieren aber nicht im impliziten Flow.Two other modes can be specified, query and form_post, but do not work in the implicit flow.
statestate EmpfohlenRecommended Ein in der Anforderung enthaltener Wert, der in der Tokenantwort zurückgegeben wird.A value included in the request that is returned in the token response. Es kann sich um eine Zeichenfolge mit jedem beliebigen zu verwendenden Inhalt handeln.It can be a string of any content that you want to use. Normalerweise wird ein zufällig generierter eindeutiger Wert verwendet, um eine websiteübergreifende Anforderungsfälschung zu verhindern.Usually, a randomly generated, unique value is used, to prevent cross-site request forgery attacks. Der Status wird außerdem verwendet, um Informationen über den Status des Benutzers in der App zu codieren, bevor die Authentifizierungsanforderung aufgetreten ist.The state also is used to encode information about the user's state in the app before the authentication request occurred. Beispiel: Informationen zu der Seite oder Ansicht, die der Benutzer besucht hat.For example, the page or view the user was on.
noncenonce ErforderlichRequired Ein Wert in der Anforderung, der von der App generiert wird und im resultierenden ID-Token als Anspruch enthalten ist.A value included in the request, generated by the app, that is included in the resulting ID token as a claim. Die App kann diesen Wert dann verifizieren, um Tokenwiederholungsangriffe abzuwehren.The app can then verify this value to mitigate token replay attacks. Der Wert ist in der Regel eine zufällige, eindeutige Zeichenfolge, die den Ursprung der Anforderung identifiziert.Usually, the value is a randomized, unique string that identifies the origin of the request.
promptprompt ErforderlichRequired Verwenden Sie prompt=none zum Aktualisieren und Abrufen von Token in einem ausgeblendeten IFrame, um sicherzustellen, dass das IFrame auf der Anmeldeseite nicht hängenbleibt, sondern direkt zurückgegeben wird.To refresh and get tokens in a hidden iframe, use prompt=none to ensure that the iframe does not get stuck on the sign-in page, and returns immediately.
login_hintlogin_hint ErforderlichRequired Beziehen Sie zum Aktualisieren und Abrufen von Token in einem ausgeblendete IFrame den Benutzernamen des Benutzers in diesem Hinweis mit ein, damit zwischen verschiedenen Sitzungen unterschieden werden kann, die der Benutzer möglicherweise ausführt.To refresh and get tokens in a hidden iframe, include the username of the user in this hint to distinguish between multiple sessions the user might have at a given time. Sie können den Benutzernamen mithilfe des Anspruchs preferred_username aus einer früheren Anmeldung extrahieren. (Der Bereich profile ist erforderlich, um den Anspruch preferred_username zu erhalten.)You can extract the username from an earlier sign-in by using the preferred_username claim (the profile scope is required in order to receive the preferred_username claim).
domain_hintdomain_hint ErforderlichRequired Kann consumers oder organizations sein.Can be consumers or organizations. Fügen Sie zum Aktualisieren und Abrufen von Token in einem ausgeblendeten IFrame den Wert domain_hint in die Anforderung ein.For refreshing and getting tokens in a hidden iframe, include the domain_hint value in the request. Extrahieren Sie den Anspruch tid aus dem ID-Token einer früheren Anmeldung, um zu bestimmen, welcher Wert verwendet werden soll. (Der Bereich profile ist erforderlich, um den Anspruch tid zu erhalten.)Extract the tid claim from the ID token of an earlier sign-in to determine which value to use (the profile scope is required in order to receive the tid claim). Verwenden Sie domain_hint=consumers, wenn der Anspruch tid den Wert 9188040d-6c67-4c5b-b112-36a304b66dad hat.If the tid claim value is 9188040d-6c67-4c5b-b112-36a304b66dad, use domain_hint=consumers. Verwenden Sie andernfalls domain_hint=organizations.Otherwise, use domain_hint=organizations.

Durch Festlegen des Parameters prompt=none ist diese Anforderung entweder erfolgreich, oder sie führt direkt zu einem Fehler und kehrt zu Ihrer Anwendung zurück.By setting the prompt=none parameter, this request either succeeds or fails immediately, and returns to your application. Eine erfolgreiche Antwort wird an Ihre App an den angegebenen Umleitungs-URI gesendet. Dabei wird die im Parameter response_mode angegebene Methode verwendet.A successful response is sent to your app at the indicated redirect URI, by using the method specified in the response_mode parameter.

Erfolgreiche AntwortSuccessful response

Eine erfolgreiche Antwort mit response_mode=fragment sieht wie in diesem Beispiel aus:A successful response by using response_mode=fragment looks like this example:

GET https://aadb2cplayground.azurewebsites.net/#
access_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsIng1dCI6Ik5HVEZ2ZEstZnl0aEV1Q...
&state=arbitrary_data_you_sent_earlier
&token_type=Bearer
&expires_in=3599
&scope=https%3A%2F%2Fapi.contoso.com%2Ftasks.read
ParameterParameter BESCHREIBUNGDescription
access_tokenaccess_token Das von der App angeforderte TokenThe token that the app requested.
token_typetoken_type Der Tokentyp wird immer Träger sein.The token type will always be Bearer.
statestate Wenn ein Parameter state in der Anforderung enthalten ist, sollte der gleiche Wert in der Antwort angezeigt werden.If a state parameter is included in the request, the same value should appear in the response. Die App sollte überprüfen, ob die state-Werte in der Anforderung und in der Antwort identisch sind.The app should verify that the state values in the request and response are identical.
expires_inexpires_in Die Gültigkeitsdauer des Zugriffstokens (in Sekunden).How long the access token is valid (in seconds).
scopescope Die Bereiche, für die das Zugriffstoken gültig ist.The scopes that the access token is valid for.

FehlerantwortError response

Fehlerantworten können auch an den Umleitungs-URI gesendet werden, damit die App diese angemessen behandeln kann.Error responses also can be sent to the redirect URI so that the app can handle them appropriately. Bei prompt=none sieht ein erwarteter Fehler wie in diesem Beispiel aus:For prompt=none, an expected error looks like this example:

GET https://aadb2cplayground.azurewebsites.net/#
error=user_authentication_required
&error_description=the+request+could+not+be+completed+silently
ParameterParameter BESCHREIBUNGDescription
errorerror Eine Zeichenfolge mit einem Fehlercode, die zum Klassifizieren der auftretenden Fehlertypen verwendet werden kann.An error code string that can be used to classify types of errors that occur. Sie können mit der Zeichenfolge auch auf Fehler reagieren.You also can use the string to react to errors.
error_descriptionerror_description Eine spezifische Fehlermeldung, mit der Sie die Hauptursache eines Authentifizierungsfehlers identifizieren können.A specific error message that can help you identify the root cause of an authentication error.

Wenn Sie diesen Fehler in der IFrame-Anforderung erhalten, muss sich der Benutzer erneut anmelden, um ein neues Token abzurufen.If you receive this error in the iframe request, the user must interactively sign in again to retrieve a new token.

AktualisierungstokenRefresh tokens

ID-Token und Zugriffstoken laufen nach einem kurzen Zeitraum ab.ID tokens and access tokens both expire after a short period of time. Ihre App muss darauf vorbereitet sein, diese Token in regelmäßigen Abständen zu aktualisieren.Your app must be prepared to refresh these tokens periodically. Führen Sie zum Aktualisieren beider Tokentypen die oben erwähnte verborgene IFrame-Anforderung unter Verwendung des Parameters prompt=none aus, um die Schritte von Azure AD zu steuern.To refresh either type of token, perform the same hidden iframe request we used in an earlier example, by using the prompt=none parameter to control Azure AD steps. Verwenden Sie response_type=id_token und scope=openid sowie einen nonce-Parameter, um einen neuen id_token-Wert zu erhalten.To receive a new id_token value, be sure to use response_type=id_token and scope=openid, and a nonce parameter.

Senden einer AbmeldeanforderungSend a sign-out request

Wenn Sie einen Benutzer von der App abmelden möchten, leiten Sie den Benutzer zum Abmelden an Azure AD weiter. Wenn der Benutzer nicht umgeleitet wird, kann er sich möglicherweise erneut für Ihre Anwendung authentifizieren, ohne die Anmeldeinformationen erneut einzugeben, da er nach wie vor über eine gültige SSO-Sitzung bei Azure AD verfügt.When you want to sign the user out of the app, redirect the user to Azure AD to sign out. If you don't redirect the user, they might be able to reauthenticate to your app without entering their credentials again because they have a valid single sign-on session with Azure AD.

Sie können den Benutzer einfach an den end_session_endpoint umleiten, der im gleichen OpenID Connect-Metadatendokument aufgeführt wird, das weiter oben im Abschnitt Überprüfen des ID-Tokens beschrieben wird.You can simply redirect the user to the end_session_endpoint that is listed in the same OpenID Connect metadata document described in Validate the ID token. Beispiel:For example:

GET https://{tenant}.b2clogin.com/{tenant}.onmicrosoft.com/{policy}/oauth2/v2.0/logout?post_logout_redirect_uri=https%3A%2F%2Faadb2cplayground.azurewebsites.net%2F
ParameterParameter ErforderlichRequired BESCHREIBUNGDescription
{tenant}{tenant} JaYes Name des Azure AD B2C-Mandanten.Name of your Azure AD B2C tenant
{policy}{policy} JaYes Der Benutzerflow, den Sie zum Abmelden des Benutzers von der Anwendung verwenden möchten.The user flow that you want to use to sign the user out of your application.
post_logout_redirect_uripost_logout_redirect_uri Nein No Die URL, an die der Benutzer nach erfolgreicher Abmeldung umgeleitet werden soll. Wenn sie nicht angegeben ist, gibt Azure AD B2C eine generische Nachricht an den Benutzer aus.The URL that the user should be redirected to after successful sign out. If it isn't included, Azure AD B2C shows the user a generic message.
statestate Nein No Wenn ein Parameter state in der Anforderung enthalten ist, sollte der gleiche Wert in der Antwort angezeigt werden.If a state parameter is included in the request, the same value should appear in the response. Die Anwendung sollte überprüfen, ob die state-Werte in der Anforderung und in der Antwort identisch sind.The application should verify that the state values in the request and response are identical.

Hinweis

Durch die Weiterleitung des Benutzers zu end_session_endpoint wird der SSO-Status des Benutzers in Azure AD B2C teilweise aufgehoben.Directing the user to the end_session_endpoint clears some of the user's single sign-on state with Azure AD B2C. Allerdings wird der Benutzer nicht von der Sitzung des sozialen Netzwerks als Identitätsanbieter abgemeldet.However, it doesn't sign the user out of the user's social identity provider session. Wenn der Benutzer bei einer nachfolgenden Anmeldung den gleichen Identitätsanbieter auswählt, wird der Benutzer ohne erneute Eingabe seiner Anmeldeinformationen erneut authentifiziert.If the user selects the same identity provider during a subsequent sign-in, the user is re-authenticated, without entering their credentials. Wenn ein Benutzer sich von der Azure AD B2C-Anwendung abmelden möchte, bedeutet dies beispielsweise nicht unbedingt, dass er sich auch vollständig von seinem Facebook-Konto abmelden möchte.If a user wants to sign out of your Azure AD B2C application, it does not necessarily mean they want to completely sign out of their Facebook account, for example. Bei lokalen Konten wird die Sitzung des Benutzers jedoch ordnungsgemäß beendet.However, for local accounts, the user's session will be ended properly.

Nächste SchritteNext steps

Codebeispiel: Azure AD B2C mit Microsoft Authentication Library für JavaScriptCode sample: Azure AD B2C with Microsoft Authentication Library for JavaScript

Mit „msal.js“ erstellte Single-Page-Anwendung für Azure AD B2C (GitHub)Single-page application built with msal.js for Azure AD B2C (GitHub)

Dieses Beispiel auf GitHub soll Ihnen bei Ihren ersten Schritten mit Azure AD B2C in einer einfachen, mit msal.js erstellten Webanwendung mit Popupauthentifizierung helfen.This sample on GitHub is intended to help get you started to Azure AD B2C in a simple web application built with msal.js and using pop-up-style authentication.