Tutorial: Gewähren des Zugriffs auf eine ASP.NET-Web-API unter Verwendung von Azure Active Directory B2CTutorial: Grant access to an ASP.NET web API using Azure Active Directory B2C

In diesem Tutorial erfahren Sie, wie Sie eine geschützte Web-API-Ressource in Azure Active Directory B2C (Azure AD B2C) über eine ASP.NET-Webanwendung aufrufen.This tutorial shows you how to call a protected web API resource in Azure Active Directory B2C (Azure AD B2C) from an ASP.NET web application.

In diesem Tutorial lernen Sie Folgendes:In this tutorial, you learn how to:

  • Hinzufügen einer Web-API-AnwendungAdd a web API application
  • Konfigurieren von Bereichen für eine Web-APIConfigure scopes for a web API
  • Gewähren von Berechtigungen für die Web-APIGrant permissions to the web API
  • Konfigurieren des Beispiels für die Verwendung der AnwendungConfigure the sample to use the application

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

VoraussetzungenPrerequisites

Führen Sie die erforderlichen Schritte unter Tutorial: Aktivieren der Authentifizierung in einer Webanwendung mit Azure Active Directory B2C aus.Complete the steps and prerequisites in Tutorial: Enable authenticate in a web application using Azure Active Directory B2C.

Hinzufügen einer Web-API-AnwendungAdd a web API application

Web-API-Ressourcen müssen bei Ihrem Mandanten registriert werden, damit sie geschützte Ressourcenanforderungen von Clientanwendungen, die ein Zugriffstoken bereitstellen, akzeptieren und darauf reagieren können.Web API resources need to be registered in your tenant before they can accept and respond to protected resource requests by client applications that present an access token.

Zum Registrieren einer Anwendung in Ihrem Azure AD B2C-Mandanten können Sie unsere neue einheitliche Benutzeroberfläche App-Registrierungen oder unsere alte Benutzeroberfläche Anwendungen (Legacy) verwenden.To register an 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 im oberen Menü den Filter Verzeichnis und Abonnement aus, und wählen Sie dann das Verzeichnis aus, das Ihren Azure AD B2C-Mandanten enthält.Select the Directory + subscription filter in the top menu, and then select the directory that contains your Azure AD B2C tenant.
  3. Wählen Sie im linken Menü die Option Azure AD B2C aus.In the left menu, select Azure AD B2C. Oder wählen Sie Alle Dienste aus, suchen Sie nach dem Eintrag Azure AD B2C, und wählen Sie ihn aus.Or, select All services and 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: webapi1.For example, webapi1.
  6. Wählen Sie unter Umleitungs-URI die Option Web aus, und geben Sie dann einen Endpunkt ein, an den Azure AD B2C von Ihrer Anwendung angeforderte Token zurückgeben soll.Under Redirect URI, select Web, and then enter an endpoint where Azure AD B2C should return any tokens that your application requests. Das Beispiel in diesem Tutorial wird lokal ausgeführt und lauscht an https://localhost:44332.In this tutorial, the sample runs locally and listens at https://localhost:44332.
  7. Wählen Sie Registrieren.Select Register.
  8. Notieren Sie sich die Anwendungs-ID (Client) zur Verwendung in einem späteren Schritt.Record the Application (client) ID for use in a later step.

Konfigurieren von BereichenConfigure scopes

Bereiche ermöglichen die Steuerung des Zugriffs auf geschützte Ressourcen.Scopes provide a way to govern access to protected resources. Bereiche werden von der Web-API verwendet, um eine bereichsbasierte Zugriffssteuerung zu implementieren.Scopes are used by the web API to implement scope-based access control. Benutzer der Web-API können beispielsweise über Lese- und Schreibzugriff oder nur über Lesezugriff verfügen.For example, users of the web API could have both read and write access, or users of the web API might have only read access. In diesem Tutorial verwenden Sie Bereiche zum Definieren von Lese- und Schreibberechtigungen für die Web-API.In this tutorial, you use scopes to define read and write permissions for the web API.

  1. Wählen Sie App-Registrierungen aus.Select App registrations.
  2. Wählen Sie die Anwendung webapi1 aus, um ihre Übersicht-Seite zu öffnen.Select the webapi1 application to open its Overview page.
  3. Wählen Sie unter Verwalten die Option Eine API verfügbar machen aus.Under Manage, select Expose an API.
  4. Wählen Sie neben Anwendungs-ID-URI den Link Festlegen aus.Next to Application ID URI, select the Set link.
  5. Ersetzen Sie den Standardwert (eine GUID) durch api, und wählen Sie dann Speichern aus.Replace the default value (a GUID) with api, and then select Save. Der vollständige URI wird angezeigt und sollte das Format https://your-tenant-name.onmicrosoft.com/api aufweisen.The full URI is shown, and should be in the format https://your-tenant-name.onmicrosoft.com/api. Wenn Ihre Webanwendung ein Zugriffstoken für die API anfordert, sollte sie diesen URI als Präfix für jeden Bereich hinzufügen, den Sie für die API definieren.When your web application requests an access token for the API, it should add this URI as the prefix for each scope that you define for the API.
  6. Wählen Sie unter Durch diese API definierte Bereiche die Option Bereich hinzufügen aus.Under Scopes defined by this API, select Add a scope.
  7. Geben Sie die folgenden Werte ein, um einen Bereich zu erstellen, der Lesezugriff auf die API definiert, und wählen Sie dann Bereich hinzufügen aus:Enter the following values to create a scope that defines read access to the API, then select Add scope:
    1. Bereichsname: demo.readScope name: demo.read
    2. Anzeigename der Administratoreinwilligung: Read access to demo APIAdmin consent display name: Read access to demo API
    3. Beschreibung der Administratoreinwilligung: Allows read access to the demo APIAdmin consent description: Allows read access to the demo API
  8. Wählen Sie Bereich hinzufügen aus, geben Sie die folgenden Werte ein, um einen Bereich hinzuzufügen, der Schreibzugriff auf die API definiert, und wählen Sie dann Bereich hinzufügen aus:Select Add a scope, enter the following values to add a scope that defines write access to the API, and then select Add scope:
    1. Bereichsname: demo.writeScope name: demo.write
    2. Anzeigename der Administratoreinwilligung: Write access to demo APIAdmin consent display name: Write access to demo API
    3. Beschreibung der Administratoreinwilligung: Allows write access to the demo APIAdmin consent description: Allows write access to the demo API

Erteilen von BerechtigungenGrant permissions

Wenn Sie über eine Anwendung eine geschützte Web-API aufrufen möchten, müssen Sie Ihrer Anwendung Berechtigungen für die API erteilen.To call a protected web API from an application, you need to grant your application permissions to the API. Im vorbereitenden Tutorial haben Sie in Azure AD B2C eine Webanwendung namens webapp1 erstellt.In the prerequisite tutorial, you created a web application in Azure AD B2C named webapp1. Sie verwenden diese Anwendung für den Aufruf der Web-API.You use this application to call the web API.

  1. Wählen Sie App-Registrierungen aus, und wählen Sie dann die Webanwendung aus, die Zugriff auf die API haben soll.Select App registrations, and then select the web application that should have access to the API. Beispiel: webapp1.For example, webapp1.
  2. Wählen Sie unter Verwalten die Option API-Berechtigungen.Under Manage, select API permissions.
  3. Wählen Sie unter Konfigurierte Berechtigungen die Option Berechtigung hinzufügen aus.Under Configured permissions, select Add a permission.
  4. Wählen Sie die Registerkarte Meine APIs aus.Select the My APIs tab.
  5. Wählen Sie die API aus, für die der Webanwendung Zugriff gewährt werden soll.Select the API to which the web application should be granted access. Beispiel: webapi1.For example, webapi1.
  6. Erweitern Sie unter Berechtigung den Eintrag Demo, und wählen Sie dann die zuvor definierten Bereiche aus.Under Permission, expand demo, and then select the scopes that you defined earlier. Beispiel: demo.read und demo.writeFor example, demo.read and demo.write.
  7. Wählen Sie Berechtigungen hinzufügen aus.Select Add permissions.
  8. Wählen Sie Administratorzustimmung für (Name Ihres Mandanten) erteilen aus.Select Grant admin consent for (your tenant name).
  9. Wenn Sie zur Auswahl eines Kontos aufgefordert werden, wählen Sie das derzeit angemeldete Administratorkonto aus, oder melden Sie sich mit einem Konto bei Ihrem Azure AD B2C-Mandanten an, dem mindestens die Rolle Cloudanwendungsadministrator zugewiesen wurde.If you're prompted to select an account, select your currently signed-in administrator account, or sign in with an account in your Azure AD B2C tenant that's been assigned at least the Cloud application administrator role.
  10. Wählen Sie Ja aus.Select Yes.
  11. Wählen Sie Aktualisieren aus, und vergewissern Sie sich, dass für beide Bereiche unter Status der Status „Gewährt für...“ angezeigt wird.Select Refresh, and then verify that "Granted for ..." appears under Status for both scopes.

Ihre Anwendung ist für den Aufruf der geschützten Web-API registriert.Your application is registered to call the protected web API. Ein Benutzer authentifiziert sich mit Azure AD B2C, um die Anwendung zu verwenden.A user authenticates with Azure AD B2C to use the application. Die Anwendung bezieht eine Autorisierungsgewährung von Azure AD B2C, um auf die geschützte Web-API zuzugreifen.The application obtains an authorization grant from Azure AD B2C to access the protected web API.

Das Beispiel konfigurierenConfigure the sample

Nach dem Registrieren der Web-API und dem Definieren von Bereichen konfigurieren Sie die Web-API für die Verwendung Ihres Azure AD B2C-Mandanten.Now that the web API is registered and you have scopes defined, you configure the web API to use your Azure AD B2C tenant. In diesem Tutorial konfigurieren Sie eine Beispiel-Web-API.In this tutorial, you configure a sample web API. Die Beispiel-Web-API ist in dem Projekt enthalten, das Sie im vorbereitenden Tutorial heruntergeladen haben:The sample web API is included in the project you downloaded in the prerequisite tutorial.

Die Beispielprojektmappe enthält zwei Projekte:There are two projects in the sample solution:

  • TaskWebApp: Dient zum Erstellen und Bearbeiten einer Aufgabenliste.TaskWebApp - Create and edit a task list. In dem Beispiel wird der Registrierungs- oder Anmeldebenutzerflow für die Registrierung oder Anmeldung von Benutzern verwendet.The sample uses the sign-up or sign-in user flow to sign up or sign in users.
  • TaskService: Unterstützt die Funktionen zum Erstellen, Lesen, Aktualisieren und Löschen der Aufgabenliste.TaskService - Supports the create, read, update, and delete task list functionality. Die API wird durch Azure AD B2C geschützt und von „TaskWebApp“ aufgerufen.The API is protected by Azure AD B2C and called by TaskWebApp.

Konfigurieren der WebanwendungConfigure the web application

  1. Öffnen Sie die Projektmappe B2C-WebAPI-DotNet in Visual Studio.Open the B2C-WebAPI-DotNet solution in Visual Studio.

  2. Öffnen Sie Web.config im Projekt TaskWebApp.In the TaskWebApp project, open Web.config.

  3. Verwenden Sie zum lokalen Ausführen der API die localhost-Einstellung für api:TaskServiceUrl.To run the API locally, use the localhost setting for api:TaskServiceUrl. Nehmen Sie in der Datei „Web.config“ folgende Änderungen vor:Change the Web.config as follows:

    <add key="api:TaskServiceUrl" value="https://localhost:44332/"/>
    
  4. Konfigurieren Sie den URI der API.Configure the URI of the API. Dieser URI wird von der Webanwendung für die API-Anforderung verwendet.This is the URI the web application uses to make the API request. Konfigurieren Sie außerdem die angeforderten Berechtigungen.Also, configure the requested permissions.

    <add key="api:ApiIdentifier" value="https://<Your tenant name>.onmicrosoft.com/api/" />
    <add key="api:ReadScope" value="demo.read" />
    <add key="api:WriteScope" value="demo.write" />
    

Konfigurieren der Web-APIConfigure the web API

  1. Öffnen Sie Web.config im Projekt TaskService.In the TaskService project, open Web.config.

  2. Konfigurieren Sie die API für die Verwendung Ihres Mandanten.Configure the API to use your tenant.

    <add key="ida:AadInstance" value="https://<Your tenant name>.b2clogin.com/{0}/{1}/v2.0/.well-known/openid-configuration" />
    <add key="ida:Tenant" value="<Your tenant name>.onmicrosoft.com" />
    
  3. Legen Sie die Client-ID auf die Anwendungs-ID Ihrer registrierten Web-API-Anwendung (webapi1) fest.Set the client ID to the Application ID of your registered web API application, webapi1.

    <add key="ida:ClientId" value="<application-ID>"/>
    
  4. Aktualisieren Sie die Benutzerfloweinstellung mit dem Namen des Registrierungs- und Anmeldebenutzerflows (B2C_1_signupsignin1).Update the user flow setting with the name of your sign-up and sign-in user flow, B2C_1_signupsignin1.

    <add key="ida:SignUpSignInPolicyId" value="B2C_1_signupsignin1" />
    
  5. Konfigurieren Sie die Bereichseinstellung so, dass sie dem entspricht, was Sie im Portal erstellt haben.Configure the scopes setting to match those you created in the portal.

    <add key="api:ReadScope" value="demo.read" />
    <add key="api:WriteScope" value="demo.write" />
    

Ausführen des BeispielsRun the sample

Führen Sie sowohl das Projekt TaskWebApp als auch das Projekt TaskService aus.You need to run both the TaskWebApp and TaskService projects.

  1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf Ihre Projektmappe, und wählen Sie Startprojekte festlegen... aus.In Solution Explorer, right-click on the solution and select Set StartUp Projects....

  2. Wählen Sie Mehrere Startprojekte aus.Select Multiple startup projects.

  3. Ändern Sie die Aktion für beide Projekte in Start.Change the Action for both projects to Start.

  4. Klicken Sie auf OK, um die Konfiguration zu speichern.Click OK to save the configuration.

  5. Drücken Sie F5, um beide Anwendungen auszuführen.Press F5 to run both applications. Jede Anwendung wird in einem eigenen Browserfenster geöffnet.Each application opens in its own browser window.

    • https://localhost:44316/ ist die Webanwendung.https://localhost:44316/ is the web application.
    • https://localhost:44332/ ist die Web-API.https://localhost:44332/ is the web API.
  6. Wählen Sie in der Webanwendung sign-up / sign-in (Registrierung/Anmeldung) aus, um sich bei der Webanwendung anzumelden.In the web application, select sign-up / sign-in to sign in to the web application. Verwenden Sie das Konto, das Sie zuvor erstellt haben.Use the account that you previously created.

  7. Wählen Sie nach der Anmeldung die Aufgabenliste aus, und erstellen Sie ein Aufgabenlistenelement.After you sign in, select To-do list and create a to-do list item.

Wenn Sie ein Aufgabenlistenelement erstellen, richtet die Webanwendung eine Anforderung an die Web-API, um das Element zu generieren.When you create a to-do list item, the web application makes a request to the web API to generate the to-do list item. Ihre geschützte Webanwendung ruft die von Azure AD B2C geschützte Web-API auf.Your protected web application is calling the web API protected by Azure AD B2C.

Nächste SchritteNext steps

In diesem Tutorial haben Sie Folgendes gelernt:In this tutorial, you learned how to:

  • Hinzufügen einer Web-API-AnwendungAdd a web API application
  • Konfigurieren von Bereichen für eine Web-APIConfigure scopes for a web API
  • Gewähren von Berechtigungen für die Web-APIGrant permissions to the web API
  • Konfigurieren des Beispiels für die Verwendung der AnwendungConfigure the sample to use the application