Tutorial: Schützen einer Node.js-Web-API und Gewähren von Zugriff auf eine Node.js-Web-API über eine Single-Page-Webanwendung mithilfe von Azure AD B2CTutorial: Protect and grant access to a Node.js web API from a single-page application with Azure AD B2C

In diesem Tutorial erfahren Sie, wie Sie eine durch Azure Active Directory B2C (Azure AD B2C) geschützte Node.js-Web-API über eine Single-Page-Webanwendung aufrufen.This tutorial shows you how to call an Azure Active Directory B2C (Azure AD B2C)-protected Node.js web API from a single-page application.

Dieses Tutorial ist der zweite Teil einer zweiteiligen Reihe und beinhaltet Folgendes:In this tutorial, the second in a two-part series:

  • Erstellen einer Web-API-Anwendungsregistrierung in Ihrem Azure AD B2C-MandantenCreate a web API application registration in your Azure AD B2C tenant
  • Konfigurieren von Bereichen für die Web-APIConfigure scopes for the web API
  • Gewähren von Berechtigungen für die Web-APIGrant permissions to the web API
  • Ändern eines Web-API-Codebeispiels zur Verwendung mit Ihrem MandantenModify a web API code sample to work with your tenant

Im ersten Tutorial dieser Reihe haben Sie das Codebeispiel heruntergeladen und so geändert, dass Benutzer mit einem Benutzerablauf bei Ihrem Azure AD B2C-Mandanten angemeldet werden.In the first tutorial in this series, you downloaded the code sample and modified it to sign in users with a user flow in your Azure AD B2C tenant.

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

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 http://localhost:5000.In this tutorial, the sample runs locally and listens at http://localhost:5000.
  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.

Aktivieren Sie als Nächstes den Flow zur impliziten Genehmigung:Next, enable the implicit grant flow:

  1. Wählen Sie unter Verwalten die Option Authentifizierung aus.Under Manage, select Authentication.
  2. Wählen Sie Neue Benutzeroberfläche ausprobieren aus (sofern die Option angezeigt wird).Select Try out the new experience (if shown).
  3. 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.
  4. Wählen Sie Speichern aus.Select Save.

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. So können beispielsweise einige Benutzer Lese- und Schreibzugriff haben, während andere Benutzer nur über Leseberechtigungen verfügen.For example, some users could have both read and write access, whereas other users might have read-only permissions. In diesem Tutorial definieren Sie Lese- und Schreibberechtigungen für die Web-API.In this tutorial, you define both 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

Notieren Sie sich den Wert unter Bereiche für den Bereich demo.read. Er wird in einem späteren Schritt bei der Konfiguration der Single-Page-Webanwendung verwendet.Record the value under Scopes for the demo.read scope to use in a later step when you configure the single-page application. Der vollständige Bereichswert ist ähnlich wie bei https://contosob2c.onmicrosoft.com/api/demo.read.The full scope value is similar to https://contosob2c.onmicrosoft.com/api/demo.read.

Erteilen von BerechtigungenGrant permissions

Wenn Sie über eine andere Anwendung eine geschützte Web-API aufrufen möchten, müssen Sie der Anwendung Berechtigungen für die Web-API erteilen.To call a protected web API from another application, you need to grant that application permissions to the web API.

Im vorbereitenden Tutorial haben Sie eine Single-Page-Webanwendung namens spaapp1 erstellt.In the prerequisite tutorial, you created a single-page application named spaapp1. In diesem Tutorial konfigurieren Sie diese Anwendung so, dass sie die Web-API aufruft, die Sie in einem vorherigen Abschnitt erstellt haben (spaapp1).In this tutorial, you configure that application to call the web API you created in a previous section, spaapp1.

  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 Single-Page-Webanwendung verfügt nun über Berechtigungen für die geschützte Web-API für die angegebenen Bereiche.Your single-page web application has now been granted permissions to the protected web API for the scopes specified. Ein Benutzer authentifiziert sich mit Azure AD B2C, um die Single-Page-Webanwendung zu verwenden.A user authenticates with Azure AD B2C to use the single-page application. Die Single-Page-Webanwendung ruft ein Zugriffstoken aus Azure AD B2C ab, um auf die geschützte Web-API zuzugreifen.The single-page app obtains an access token from Azure AD B2C to access the protected web API.

Konfigurieren des BeispielsConfigure the sample

Nachdem Sie die Web-API registriert und Bereiche definiert haben, konfigurieren Sie als Nächstes den Web-API-Code für die Verwendung mit Ihrem Azure AD B2C-Mandanten.Now that the web API is registered and you've defined scopes, configure the web API code to work with your Azure AD B2C tenant. In diesem Tutorial wird eine exemplarische Node.js-Web-API konfiguriert, die auf GitHub zum Download bereitsteht.In this tutorial, you configure a sample Node.js web API you download from GitHub.

Laden Sie ein *ZIP-Archiv herunter, oder klonen Sie das Beispiel-Web-API-Projekt von GitHub.Download a *.zip archive or clone the sample web API project from GitHub. Sie können auch direkt zum Projekt Azure-Samples/active-directory-b2c-javascript-nodejs-webapi auf GitHub navigieren.You can also browse directly to the Azure-Samples/active-directory-b2c-javascript-nodejs-webapi project on GitHub.

git clone https://github.com/Azure-Samples/active-directory-b2c-javascript-nodejs-webapi.git

Konfigurieren der Web-APIConfigure the web API

  1. Öffnen Sie die Datei config.json in Ihrem Code-Editor.Open the config.json file in your code editor.

  2. Passen Sie die Variablenwerte an die zuvor erstellte Anwendungsregistrierung an.Modify the variable values to reflect those of the application registration you created earlier. Aktualisieren Sie außerdem den Richtliniennamen (policyName) mit dem Benutzerablauf, den Sie im Rahmen der Voraussetzungen erstellt haben.Also update the policyName with the user flow you created as part of the prerequisites. Beispiel: B2C_1_signupsignin1.For example, B2C_1_signupsignin1.

    "credentials": {
        "tenantName": "<your-tenant-name>",
        "clientID": "<your-webapi-application-ID>"
    },
    "policies": {
        "policyName": "B2C_1_signupsignin1"
    },
    "resource": {
        "scope": ["demo.read"] 
    },
    

Aktivieren von CORSEnable CORS

Damit Ihre Single-Page-Webanwendung die Node.js-Web-API aufrufen kann, müssen Sie CORS in der Web-API aktivieren.To allow your single-page application to call the Node.js web API, you need to enable CORS in the web API. In einer Produktionsanwendung muss sorgfältig darauf geachtet werden, von welcher Domäne die Anforderung stammt. In diesem Tutorial können dagegen Anforderungen von beliebigen Domänen zugelassen werden.In a production application you should be careful about which domain is making the request, but for this tutorial, allow requests from any domain.

Verwenden Sie die folgende Middleware, um CORS zu aktivieren.To enable CORS, use the following middleware. Im Node.js-Web-API-Codebeispiel in diesem Tutorial wurde sie bereits der Datei index.js hinzugefügt.In the Node.js web API code sample in this tutorial, it's already been added to the index.js file.

app.use((req, res, next) => {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Authorization, Origin, X-Requested-With, Content-Type, Accept");
    next();
});

Konfigurieren der Single-Page-WebanwendungConfigure the single-page application

Die Single-Page-Webanwendung (Single-Page Application, SPA) aus dem vorherigen Tutorial der Reihe verwendet Azure AD B2C für die Benutzerregistrierung und -anmeldung und ruft standardmäßig die Node.js-Web-API auf, die durch den Demomandanten fabrikamb2c geschützt wird.The single-page application (SPA) from the previous tutorial in the series uses Azure AD B2C for user sign-up and sign-in, and by default, calls the Node.js web API protected by the fabrikamb2c demo tenant.

In diesem Abschnitt wird die Single-Page-Webanwendung aktualisiert, um die Node.js-Web-API aufzurufen, die durch Ihren Azure AD B2C-Mandanten geschützt wird (und die Sie auf Ihrem lokalen Computer ausführen).In this section, you update the single-page web application to call the Node.js web API protected by your Azure AD B2C tenant (and which you run on your local machine).

So ändern Sie die Einstellungen in der SPATo change the settings in the SPA:

  1. Öffnen Sie im Projekt active-directory-b2c-javascript-msal-singlepageapp, das Sie im vorherigen Tutorial heruntergeladen oder geklont haben, die Datei apiConfig.js im Ordner JavaScriptSPA.In the active-directory-b2c-javascript-msal-singlepageapp project you downloaded or cloned in the previous tutorial, open the apiConfig.js file inside the JavaScriptSPA folder.

  2. Konfigurieren Sie das Beispiel mit dem URI für den zuvor erstellten Bereich demo.read und der URL der Web-API.Configure the sample with the URI for the demo.read scope you created earlier and the URL of the web API.

    1. Ersetzen Sie in der Definition von apiConfig den Wert für b2cScopes durch den vollständigen URI für den Bereich demo.read (der Wert für Bereich, den Sie sich weiter oben notiert haben).In the apiConfig definition, replace the b2cScopes value with the full URI for the demo.read scope (the Scope value you recorded earlier).
    2. Ändern Sie die Domäne im Wert für webApi in den Umleitungs-URI, den Sie zuvor beim Registrieren der Web-API-Anwendung hinzugefügt haben.Change the domain in the webApi value to the redirect URI you added when you registered the web API application in an earlier step.

    Da auf die API am Endpunkt /hello zugegriffen werden kann, behalten Sie /hello im URI bei.Because the API is accessible at the /hello endpoint, leave /hello in the URI.

    Die Definition von apiConfig sollte in etwa wie im folgenden Codeblock aussehen (mit dem Namen Ihres B2C-Mandanten anstelle von <your-tenant-name>):The apiConfig definition should look similar to the following code block, but with your B2C tenant's name in the place of <your-tenant-name>:

    // The current application coordinates were pre-registered in a B2C tenant.
    const apiConfig = {
      b2cScopes: ["https://<your-tenant-name>.onmicrosoft.com/api/demo.read"],
      webApi: "http://localhost:5000/hello" // '/hello' should remain in the URI
    };
    

Ausführen der SPA und der Web-APIRun the SPA and web API

Nun können Sie den bereichsbezogenen API-Zugriff der Single-Page-Webanwendung testen.You're now ready to test the single-page application's scoped access to the API. Führen Sie sowohl die Node.js-Web-API als auch die exemplarische JavaScript-Single-Page-Webanwendung auf Ihrem lokalen Computer aus.Run both the Node.js web API and the sample JavaScript single-page application on your local machine. Melden Sie sich anschließend bei der Single-Page-Webanwendung an, und wählen Sie die Schaltfläche API aufrufen aus, um eine Anforderung an die geschützte API zu initiieren.Then, sign in to the single-page application and select the Call API button to initiate a request to the protected API.

In diesem Tutorial werden zwar beide Anwendungen lokal ausgeführt, aufgrund ihrer Konfiguration verwenden sie jedoch Azure AD B2C, um eine sichere Registrierung/Anmeldung zu ermöglichen und um Zugriff auf die geschützte Web-API zu gewähren.Although both applications are running locally when you follow this tutorial, you've configured them to use Azure AD B2C for secure sign-up/sign-in and to grant access to the protected web API.

Ausführen der Node.js-Web-APIRun the Node.js web API

  1. Öffnen Sie ein Konsolenfenster, und wechseln Sie zum Verzeichnis mit dem Node.js-Web-API-Beispiel.Open a console window and change to the directory containing the Node.js web API sample. Beispiel:For example:

    cd active-directory-b2c-javascript-nodejs-webapi
    
  2. Führen Sie die folgenden Befehle aus:Run the following commands:

    npm install && npm update
    node index.js
    

    Im Konsolenfenster wird die Portnummer angezeigt, unter der die Anwendung gehostet wird.The console window displays the port number where the application is hosted.

    Listening on port 5000...
    

Ausführen der Single-Page-WebanwendungRun the single-page app

  1. Öffnen Sie ein weiteres Konsolenfenster, und wechseln Sie zum Verzeichnis mit dem JavaScript-SPA-Beispiel.Open another console window and change to the directory containing the JavaScript SPA sample. Beispiel:For example:

    cd ms-identity-b2c-javascript-spa
    
  2. Führen Sie die folgenden Befehle aus:Run the following commands:

    npm install && npm update
    npm start
    

    Im Konsolenfenster wird die Portnummer angezeigt, unter der die Anwendung gehostet wird.The console window displays the port number of where the application is hosted.

    Listening on port 6420...
    
  3. Navigieren Sie in Ihrem Browser zu http://localhost:6420, um die Anwendung anzuzeigen.Navigate to http://localhost:6420 in your browser to view the application.

    Beispiel-App für Singe-Page-Anwendung, die im Browser angezeigt wird

  4. Melden Sie sich mit der E-Mail-Adresse und dem Kennwort an, die Sie im vorherigen Tutorial verwendet haben.Sign in using the email address and password you used in the previous tutorial. Nach erfolgreicher Anmeldung sollte die Meldung User 'Your Username' logged-in angezeigt werden.Upon successful login, you should see the User 'Your Username' logged-in message.

  5. Wählen Sie die Schaltfläche API aufrufen aus.Select the Call API button. Die SPA erhält eine Autorisierungsgewährung von Azure AD B2C und greift dann auf die geschützte Web-API zu, um den Namen des angemeldeten Benutzers anzuzeigen:The SPA obtains an authorization grant from Azure AD B2C, then accesses the protected web API to display the name of the logged-in user:

    Single-Page-Webanwendung im Browser mit dem von der API zurückgegebenen Benutzernamen (JSON-Ergebnis)

Nächste SchritteNext steps

In diesem Tutorial haben Sie folgende Schritte ausgeführt:In this tutorial, you:

  • Erstellen einer Web-API-Anwendungsregistrierung in Ihrem Azure AD B2C-MandantenCreated a web API application registration in your Azure AD B2C tenant
  • Konfigurieren von Bereichen für die Web-APIConfigured scopes for the web API
  • Gewähren von Berechtigungen für die Web-APIGranted permissions to the web API
  • Ändern eines Web-API-Codebeispiels zur Verwendung mit Ihrem MandantenModified a web API code sample to work with your tenant

Nachdem Sie jetzt erlebt haben, wie eine SPA eine Ressource von einer geschützten Web-API anfordert, gewinnen Sie ein tieferes Verständnis dafür, wie diese Anwendungstypen miteinander und mit Azure AD B2C interagieren.Now that you've seen an SPA request a resource from a protected web API, gain a deeper understanding of how these application types interact with each other and with Azure AD B2C.