Tutorial: Registrieren einer Webanwendung in Azure Active Directory B2CTutorial: Register a web application in Azure Active Directory B2C

Bevor Ihre Anwendungen mit Azure Active Directory B2C (Azure AD B2C) interagieren können, müssen sie in einem von Ihnen verwalteten Mandanten registriert werden.Before your applications can interact with Azure Active Directory B2C (Azure AD B2C), they must be registered in a tenant that you manage. In diesem Tutorial erfahren Sie, wie Sie eine Webanwendung mithilfe des Azure-Portals registrieren.This tutorial shows you how to register a web application using the Azure portal.

Mit einer „Webanwendung“ ist hier eine herkömmliche Webanwendung gemeint, mit der der Großteil der Anwendungslogik auf dem Server verarbeitet wird.A "web application" refers to a traditional web application that performs most of the application logic on the server. Diese kann mit Frameworks wie ASP.NET Core, Maven (Java), Flask (Python) und Express (Node.js) erstellt werden.They may be built using frameworks like ASP.NET Core, Maven (Java), Flask (Python), and Express (Node.js).

Wichtig

Falls Sie stattdessen eine Single-Page-Webanwendung („SPA“) verwenden (z. B. Angular, Vue oder React), helfen Ihnen die Informationen zum Registrieren einer Single-Page-Webanwendung weiter.If you're using a single-page application ("SPA") instead (e.g. using Angular, Vue, or React), learn how to register a single-page application.

Wenn Sie stattdessen eine native App (z. B. eine iOS- oder Android-App oder eine Mobil- oder Desktop-App) verwenden, lesen Sie die Informationen zum Registrieren einer nativen Clientanwendung.If you're using a native app instead (e.g. iOS, Android, mobile & desktop), learn how to register a native client application.

VoraussetzungenPrerequisites

Wenn Sie kein Azure-Abonnement besitzen, können Sie ein kostenloses Konto erstellen, bevor Sie beginnen.If you don't have an Azure subscription, create a free account before you begin.

Wenn Sie Ihren eigenen Azure AD B2C-Mandanten noch nicht erstellt haben, erstellen Sie jetzt einen.If you haven't already created your own Azure AD B2C Tenant, create one now. Sie können einen vorhandenen Azure AD B2C-Mandanten verwenden.You can use an existing Azure AD B2C tenant.

Registrieren einer WebanwendungRegister a web application

Zum Registrieren einer Webanwendung in Ihrem Azure AD B2C-Mandanten können Sie unsere neue einheitliche Benutzeroberfläche für App-Registrierungen oder unsere alte Benutzeroberfläche für Anwendungen (Legacy) verwenden.To register a web application in your Azure AD B2C tenant, you can use our new unified App registrations experience or our legacy Applications (Legacy) experience. Weitere Informationen zur neuen OberflächeLearn more about the new experience.

  1. Melden Sie sich beim Azure-Portal an.Sign in to the Azure portal.

  2. Wählen Sie auf der Symbolleiste des Portals das Symbol Verzeichnis und Abonnement aus, und wählen Sie dann das Verzeichnis aus, das Ihren Azure AD B2C-Mandanten enthält.Select the Directory + Subscription icon in the portal toolbar, and then select the directory that contains your Azure AD B2C tenant.

  3. Suchen Sie im Azure-Portal nach Azure AD B2C, und wählen Sie diese Option dann aus.In the Azure portal, search for and select Azure AD B2C.

  4. Wählen Sie App-Registrierungen aus, und wählen Sie dann Registrierung einer neuen Anwendung aus.Select App registrations, and then select New registration.

  5. Geben Sie unter Name einen Namen für die Anwendung ein.Enter a Name for the application. Beispiel: webapp1.For example, webapp1.

  6. Wählen Sie unter Unterstützte Kontotypen die Option Konten in einem beliebigen Identitätsanbieter oder Organisationsverzeichnis (zum Authentifizieren von Benutzern mit Benutzerflows) aus.Under Supported account types, select Accounts in any identity provider or organizational directory (for authenticating users with user flows).

  7. Wählen Sie unter Umleitungs-URI die Option Web aus, und geben Sie https://jwt.ms in das URL-Textfeld ein.Under Redirect URI, select Web, and then enter https://jwt.ms in the URL text box.

    Die Umleitungs-URI ist der Endpunkt, an den der Benutzer vom Autorisierungsserver (in diesem Fall Azure AD B2C) nach Abschluss seiner Interaktion mit dem Benutzer gesendet wird und an den bei erfolgreicher Autorisierung ein Zugriffstoken oder Autorisierungscode gesendet wird.The redirect URI is the endpoint to which the user is sent by the authorization server (Azure AD B2C, in this case) after completing its interaction with the user, and to which an access token or authorization code is sent upon successful authorization. In einer Produktionsanwendung handelt es sich in der Regel um einen öffentlich zugänglichen Endpunkt, an dem Ihre App ausgeführt wird, etwa um https://contoso.com/auth-response.In a production application, it's typically a publicly accessible endpoint where your app is running, like https://contoso.com/auth-response. Für Testzwecke wie in diesem Tutorial können Sie ihn auf https://jwt.ms festlegen. Dabei handelt es sich um eine Microsoft-Webanwendung, die den decodierten Inhalt eines Tokens anzeigt (der Inhalt des Tokens verlässt niemals Ihren Browser).For testing purposes like this tutorial, you can set it to https://jwt.ms, a Microsoft-owned web application that displays the decoded contents of a token (the contents of the token never leave your browser). Während der App-Entwicklung können Sie den Endpunkt hinzufügen, an dem die Anwendung lokal lauscht, etwa https://localhost:5000.During app development, you might add the endpoint where your application listens locally, like https://localhost:5000. Sie können Umleitungs-URIs in Ihren registrierten Anwendungen jederzeit hinzufügen und ändern.You can add and modify redirect URIs in your registered applications at any time.

    Für Umleitungs-URIs gelten die folgenden Einschränkungen:The following restrictions apply to redirect URIs:

    • Die Antwort-URL muss mit dem Schema https beginnen.The reply URL must begin with the scheme https.
    • Bei der Antwort-URL muss die Groß-/Kleinschreibung beachtet werden.The reply URL is case-sensitive. Die Groß-/Kleinschreibung muss der Groß-/Kleinschreibung des URL-Pfads Ihrer ausgeführten Anwendung entsprechen.Its case must match the case of the URL path of your running application. Wenn Ihre Anwendung z. B. als Teil des Pfads .../abc/response-oidc enthält, geben Sie in der Antwort-URL nicht .../ABC/response-oidc an.For example, if your application includes as part of its path .../abc/response-oidc, do not specify .../ABC/response-oidc in the reply URL. Weil der Webbrowser bei Pfaden die Groß-/Kleinschreibung beachtet, werden Cookies, die .../abc/response-oidc zugeordnet sind, möglicherweise ausgeschlossen, wenn eine Umleitung an die anders geschriebene (nicht übereinstimmende) URL .../ABC/response-oidc erfolgt.Because the web browser treats paths as case-sensitive, cookies associated with .../abc/response-oidc may be excluded if redirected to the case-mismatched .../ABC/response-oidc URL.
  8. Aktivieren Sie unter Berechtigungen das Kontrollkästchen Administratoreinwilligung für openid- und offline_access-Berechtigungen erteilen.Under Permissions, select the Grant admin consent to openid and offline_access permissions check box.

  9. Wählen Sie Registrieren.Select Register.

Erstellen eines ClientgeheimnissesCreate a client secret

Für eine Webanwendung müssen Sie ein Anwendungsgeheimnis erstellen.For a web application, you need to create an application secret. Dieses Geheimnis wird von Ihrer Anwendung verwendet, um einen Autorisierungscode durch ein Zugriffstoken zu ersetzen.This secret will be used by your application to exchange an authorization code for an access token.

  1. Wählen Sie auf der Seite Azure AD B2C – App-Registrierungen die von Ihnen erstellte Anwendung aus, etwa webapp1.In the Azure AD B2C - App registrations page, select the application you created, for example webapp1.
  2. Wählen Sie im linken Menü unter Verwalten die Option Zertifikate und Geheimnisse aus.In the left menu, under Manage, select Certificates & secrets.
  3. Wählen Sie Neuer geheimer Clientschlüssel.Select New client secret.
  4. Geben Sie im Feld Beschreibung eine Beschreibung für das Clientgeheimnis ein.Enter a description for the client secret in the Description box. Beispielsweise clientsecret1.For example, clientsecret1.
  5. Wählen Sie unter Läuft ab einen Zeitraum aus, für den das Geheimnis gültig ist, und wählen Sie dann Hinzufügen aus.Under Expires, select a duration for which the secret is valid, and then select Add.
  6. Notieren Sie den Wert des Geheimnisses.Record the secret's Value. Sie verwenden diesen Wert als Anwendungsgeheimnis im Code Ihrer Anwendung.You use this value as the application secret in your application's code.

Aktivieren der impliziten Genehmigung von ID-TokenEnable ID token implicit grant

Das definierende Merkmal der impliziten Genehmigung ist, dass Token (etwa ID-Token oder Zugriffstoken) direkt über Azure AD B2C an die Anwendung zurückgegeben werden.The defining characteristic of the implicit grant is that tokens, such as ID and access tokens, are returned directly from Azure AD B2C to the application. Aktivieren Sie für Web-Apps wie ASP.NET Core-Web-Apps und https://jwt.ms, die ein ID-Token direkt vom Autorisierungsendpunkt erfordern, den Flow für implizite Genehmigung in der App-Registrierung.For web apps, such as ASP.NET Core web apps and https://jwt.ms, that request an ID token directly from the authorization endpoint, enable the implicit grant flow in the app registration.

  1. Wählen Sie im linken Menü unter Verwalten die Option Authentifizierung aus.In the left menu, under Manage, select Authentication.
  2. Aktivieren Sie unter „Implizite Genehmigung“ die Kontrollkästchen Zugriffstoken und ID-Token.Under Implicit grant, select both the Access tokens and ID tokens check boxes.
  3. Wählen Sie Speichern aus.Select Save.

Nächste SchritteNext steps

In diesem Artikel haben Sie Folgendes gelernt:In this article, you learned how to:

  • Registrieren einer WebanwendungRegister a web application
  • Erstellen eines ClientgeheimnissesCreate a client secret

Als Nächstes erfahren Sie, wie Sie Benutzerflows erstellen, damit sich die Benutzer registrieren, anmelden und ihre Profile verwalten können.Next, learn how to create user flows to enable your users to sign up, sign in, and manage their profiles.