Aktivieren der Authentifizierung in Ihrer eigenen Node.js Web-API mithilfe von Azure Active Directory B2C

Von Bedeutung

Ab dem 1. Mai 2025 steht Azure AD B2C nicht mehr für neue Kunden zur Verfügung. Weitere Informationen finden Sie in unseren HÄUFIG gestellten Fragen.

In diesem Artikel erfahren Sie, wie Sie Ihre Web-App erstellen, die Ihre Web-API aufruft. Die Web-API muss durch Azure Active Directory B2C (Azure AD B2C) geschützt werden. Um den Zugriff auf die Web-API zu autorisieren, verarbeiten Sie Anforderungen, die ein gültiges Zugriffstoken enthalten, das von Azure AD B2C ausgestellt wird.

Voraussetzungen

• Bevor Sie beginnen, lesen Sie die Schritte in der Konfiguration der Authentifizierung in einer Beispiel-Node.js-Web-API mithilfe von Azure AD B2C vollständig durch. Führen Sie dann die Schritte in diesem Artikel aus, um die Beispiel-Web-App und Web-API durch Ihre eigene Web-API zu ersetzen.

• Visual Studio Code oder ein anderer Code-Editor

• Node.js-Runtime

Schritt 1: Erstellen einer geschützten Web-API

Führen Sie die folgenden Schritte aus, um Ihre Node.js Web-API zu erstellen.

Schritt 1.1: Erstellen des Projekts

Verwenden Sie Express für Node.js , um eine Web-API zu erstellen. Gehen Sie wie folgt vor, um eine Web-API zu erstellen:

1. Erstellen Sie einen neuen Ordner mit dem Namen TodoList.
2. Erstellen Sie eine Datei mit dem Namen TodoList in dem Ordner index.js.
3. Führen Sie in einer Befehlsshell den Befehl npm init -y aus. Mit diesem Befehl wird eine package.json-Standarddatei für Ihr Node.js-Projekt erstellt.
4. Führen Sie npm install express in der Befehlsshell aus. Mit diesem Befehl wird das Express-Framework installiert.

Schritt 1.2: Installieren von Abhängigkeiten

Fügen Sie die Authentifizierungsbibliothek zu Ihrem Web-API-Projekt hinzu. Die Authentifizierungsbibliothek analysiert den HTTP-Authentifizierungsheader, überprüft das Token und extrahiert Ansprüche. Weitere Informationen hierzu erfahren Sie in der Dokumentation für die Bibliothek.

Um die Authentifizierungsbibliothek hinzuzufügen, installieren Sie die Pakete, indem Sie den folgenden Befehl ausführen:

npm install passport
npm install passport-azure-ad
npm install morgan

Das Morgan-Paket ist eine HTTP-Anforderungsprotokollier-Middleware für Node.js.

Schritt 1.3: Schreiben des Web-API-Servercodes

Fügen Sie in der index.js Datei den folgenden Code hinzu:

const express = require('express');
const morgan = require('morgan');
const passport = require('passport');
const config = require('./config.json');
const todolist = require('./todolist');
const cors = require('cors');

//<ms_docref_import_azuread_lib>
const BearerStrategy = require('passport-azure-ad').BearerStrategy;
//</ms_docref_import_azuread_lib>

global.global_todos = [];

//<ms_docref_azureadb2c_options>
const options = {
    identityMetadata: `https://${config.credentials.tenantName}.b2clogin.com/${config.credentials.tenantName}.onmicrosoft.com/${config.policies.policyName}/${config.metadata.version}/${config.metadata.discovery}`,
    clientID: config.credentials.clientID,
    audience: config.credentials.clientID,
    policyName: config.policies.policyName,
    isB2C: config.settings.isB2C,
    validateIssuer: config.settings.validateIssuer,
    loggingLevel: config.settings.loggingLevel,
    passReqToCallback: config.settings.passReqToCallback
}

//</ms_docref_azureadb2c_options>

//<ms_docref_init_azuread_lib>
const bearerStrategy = new BearerStrategy(options, (token, done) => {
        // Send user info using the second argument
        done(null, { }, token);
    }
);
//</ms_docref_init_azuread_lib>
const app = express();

app.use(express.json()); 

//enable CORS (for testing only -remove in production/deployment)
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();
});

app.use(morgan('dev'));

app.use(passport.initialize());

passport.use(bearerStrategy);

// To do list endpoints
app.use('/api/todolist', todolist);

//<ms_docref_protected_api_endpoint>
// API endpoint, one must present a bearer accessToken to access this endpoint
app.get('/hello',
    passport.authenticate('oauth-bearer', {session: false}),
    (req, res) => {
        console.log('Validated claims: ', req.authInfo);
    
          
        // Service relies on the name claim.  
        res.status(200).json({'name': req.authInfo['name']});
    }
);
//</ms_docref_protected_api_endpoint>

//<ms_docref_anonymous_api_endpoint>
// API anonymous endpoint, returns a date to the caller.
app.get('/public', (req, res) => res.send( {'date': new Date() } ));
//</ms_docref_anonymous_api_endpoint>

const port = process.env.PORT || 5000;

app.listen(port, () => {
    console.log('Listening on port ' + port);
});

Notieren Sie sich die folgenden Codeausschnitte in der index.jsDatei:

• Importiert die Microsoft Entra-Passportbibliothek.

  const BearerStrategy = require('passport-azure-ad').BearerStrategy;
  

• Legt die Azure AD B2C-Optionen fest.

  const options = {
      identityMetadata: `https://${config.credentials.tenantName}.b2clogin.com/${config.credentials.tenantName}.onmicrosoft.com/${config.policies.policyName}/${config.metadata.version}/${config.metadata.discovery}`,
      clientID: config.credentials.clientID,
      audience: config.credentials.clientID,
      policyName: config.policies.policyName,
      isB2C: config.settings.isB2C,
      validateIssuer: config.settings.validateIssuer,
      loggingLevel: config.settings.loggingLevel,
      passReqToCallback: config.settings.passReqToCallback
  }
  

• Instanziiert die Microsoft Entra-Passportbibliothek mit den Azure AD B2C-Optionen.

  const bearerStrategy = new BearerStrategy(options, (token, done) => {
          // Send user info using the second argument
          done(null, { }, token);
      }
  );
  

• Der geschützte API-Endpunkt. Es dient Anforderungen, die ein gültiges azure AD B2C-ausgestelltes Zugriffstoken enthalten. Dieser Endpunkt gibt den Wert des Anspruchs innerhalb des name Zugriffstokens zurück.

  // API endpoint, one must present a bearer accessToken to access this endpoint
  app.get('/hello',
      passport.authenticate('oauth-bearer', {session: false}),
      (req, res) => {
          console.log('Validated claims: ', req.authInfo);
      
            
          // Service relies on the name claim.  
          res.status(200).json({'name': req.authInfo['name']});
      }
  );
  

• Der anonyme API-Endpunkt. Die Web-App kann sie aufrufen, ohne ein Zugriffstoken darzustellen. Verwenden Sie sie zum Debuggen Ihrer Web-API mit anonymen Aufrufen.

  // API anonymous endpoint, returns a date to the caller.
  app.get('/public', (req, res) => res.send( {'date': new Date() } ));
  

Schritt 1.4: Konfigurieren der Web-API

Fügen Sie einer Konfigurationsdatei Konfigurationen hinzu. Die Datei enthält Informationen zu Ihrem Azure AD B2C-Identitätsanbieter. Die Web-API-App verwendet diese Informationen, um das Zugriffstoken zu überprüfen, das die Web-App als Bearertoken übergibt.

1. Erstellen Sie unter dem Projektstammordner eine config.json Datei, und fügen Sie ihr das folgende JSON-Objekt hinzu:

   {
       "credentials": {
           "tenantName": "fabrikamb2c",
           "clientID": "Enter_the_Application_Id_Here"
       },
       "policies": {
           "policyName": "B2C_1_susi"
       },
       "resource": {
           "scope": ["tasks.read"]
       },
       "metadata": {
           "authority": "login.microsoftonline.com",
           "discovery": ".well-known/openid-configuration",
           "version": "v2.0"
       },
       "settings": {
           "isB2C": true,
           "validateIssuer": true,
           "passReqToCallback": false,
           "loggingLevel": "info"
       }
   }
   

2. Aktualisieren Sie in der config.json Datei die folgenden Eigenschaften:

`Section`	Schlüssel	Wert
Zugangsdaten	MieterName	Der erste Teil Ihres Azure AD B2C-Mandantennamens (z. B. fabrikamb2c).
Zugangsdaten	Kunden-ID	Die Web-API-Anwendungs-ID. Informationen zum Abrufen ihrer Registrierungs-ID für Webanwendungen finden Sie unter "Voraussetzungen".
Richtlinien	Name der Richtlinie	Die Benutzerflows oder die benutzerdefinierte Richtlinie. Informationen zum Abrufen Ihres Benutzerflows oder Ihrer Richtlinie finden Sie unter Voraussetzungen.
Ressource	Umfang	Die Bereiche Ihrer Web-API-Anwendungsregistrierung, wie z. B. [tasks.read]. Unter Voraussetzungen finden Sie Informationen zum Ermitteln des Bereichs Ihrer Web-API.

Schritt 2: Erstellen der Webknoten-Webanwendung

Führen Sie die folgenden Schritte aus, um die Node-Web-App zu erstellen. Diese Web-App authentifiziert einen Benutzer, um ein Zugriffstoken abzurufen, das zum Aufrufen der Knoten-Web-API verwendet wird, die Sie in Schritt 1 erstellt haben:

Schritt 2.1: Erstellen des Knotenprojekts

Erstellen Sie einen Ordner, um Ihre Node.js-Anwendung zu speichern, zum Beispiel call-protected-api.

1. Wechseln Sie in Ihrem Terminal in das Verzeichnis Ihres Node-App-Ordners, z. B. cd call-protected-api, und führen Sie npm init -y aus. Dieser Befehl erstellt eine Standarddatei namens package.json für Ihr Node.js-Projekt.

2. Führen Sie in Ihrem Terminal npm install express aus. Mit diesem Befehl wird das Express-Framework installiert.

3. Erstellen Sie weitere Ordner und Dateien, um die folgende Projektstruktur zu erzielen:

   call-protected-api/
   ├── index.js
   └── package.json
   └── .env
   └── views/
       └── layouts/
           └── main.hbs
       └── signin.hbs
       └── api.hbs
   

   Der views Ordner enthält Handlebars-Dateien für die Benutzeroberfläche der Web-App.

Schritt 2.2: Installieren der Abhängigkeiten

Installieren Sie in Ihrem Terminal die dotenv, express-handlebars, express-session, und @azure/msal-node Pakete, indem Sie dazu die folgenden Befehle ausführen:

npm install dotenv
npm install express-handlebars
npm install express
npm install axios
npm install express-session
npm install @azure/msal-node

Schritt 2.3: Erstellen von Web-App-UI-Komponenten

1. Fügen Sie in der main.hbs Datei den folgenden Code hinzu:

   <!DOCTYPE html>
   <html lang="en">
     <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
       <title>Azure AD B2C | Enable authenticate on web API using MSAL for B2C</title>
   
       <!-- adding Bootstrap 4 for UI components  -->
       <!-- CSS only -->
       <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
       <link rel="SHORTCUT ICON" href="https://c.s-microsoft.com/favicon.ico?v2" type="image/x-icon">
     </head>
     <body>
       <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
         <a class="navbar-brand" href="/">Microsoft Identity Platform</a>
           {{#if showSignInButton}}
               <div class="ml-auto">
                   <a type="button" id="SignIn" class="btn btn-success" href="/signin" aria-haspopup="true" aria-expanded="false">
                       Sign in to call PROTECTED API
                   </a>
                   <a type="button" id="SignIn" class="btn btn-warning" href="/api" aria-haspopup="true" aria-expanded="false">
                       Or call the ANONYMOUS API 
                    </a>
               </div>
           {{else}}
                   <p class="navbar-brand d-flex ms-auto">Hi {{givenName}}</p>
                   <a class="navbar-brand d-flex ms-auto" href="/signout">Sign out</a>
           {{/if}}
       </nav>
       <br>
       <h5 class="card-header text-center">MSAL Node Confidential Client application with Auth Code Flow</h5>
       <br>
       <div class="row" style="margin:auto" >
         {{{body}}}
       </div>
       <br>
       <br>
     </body>
   </html>
   

   Die main.hbs Datei befindet sich im layout Ordner und sollte jeden HTML-Code enthalten, der in der gesamten Anwendung erforderlich ist. Sie implementiert die Benutzeroberfläche, die mit dem Bootstrap 5 CSS Framework erstellt wurde. Jede Benutzeroberfläche, die von Seite zu Seite geändert wird, wie z. B. signin.hbs, wird in den Platzhalter eingefügt, der als {{{body}}} angezeigt wird.

2. Fügen Sie in der signin.hbs Datei den folgenden Code hinzu:

   <div class="col-md-3" style="margin:auto">
     <div class="card text-center">
       <div class="card-body">
         {{#if showSignInButton}}
   
         {{else}}
              <h5 class="card-title">You have signed in</h5>
             <a type="button" id="Call-api" class="btn btn-success" href="/api" aria-haspopup="true" aria-expanded="false">
                 Call the PROTECTED API
             </a>
         {{/if}}
       </div>
       </div>
     </div>
   </div>
   

3. Fügen Sie in der api.hbs Datei den folgenden Code hinzu:

   <div class="col-md-3" style="margin:auto">
     <div class="card text-center bg-{{bg_color}}">
       <div class="card-body">
   
             <h5 class="card-title">{{data}}</h5>
   
       </div>
     </div>
   </div>
   

   Auf dieser Seite wird die Antwort der API angezeigt. Mit dem bg-{{bg_color}} Klassenattribute auf der Bootstrap-Karte kann die Benutzeroberfläche eine andere Hintergrundfarbe für die verschiedenen API-Endpunkte anzeigen.

Schritt 2.4: Vollständiger Webanwendungsservercode

1. Fügen Sie in der .env Datei den folgenden Code hinzu, der Server-HTTP-Port, App-Registrierungsdetails und Anmelde- und Registrierungsdetails für den Benutzerfluss/die Richtliniendetails enthält:

   SERVER_PORT=3000
   #web apps client ID
   APP_CLIENT_ID=<You app client ID here>
   #session secret
   SESSION_SECRET=sessionSecretHere
   #web app client secret
   APP_CLIENT_SECRET=<Your app client secret here>
   #tenant name
   TENANT_NAME=<your-tenant-name>
   #B2C sign up and sign in user flow/policy name and authority
   SIGN_UP_SIGN_IN_POLICY_AUTHORITY=https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<sign-in-sign-up-user-flow-name>
   AUTHORITY_DOMAIN=https://<your-tenant-name>.b2clogin.com
   #client redorect url
   APP_REDIRECT_URI=http://localhost:3000/redirect
   LOGOUT_ENDPOINT=https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<sign-in-sign-up-user-flow-name>/oauth2/v2.0/logout?post_logout_redirect_uri=http://localhost:3000
   

   Ändern der Werte in den .env Dateien, wie in "Konfigurieren der Beispielweb-App" erläutert

2. Fügen Sie in Ihrer index.js Datei den folgenden Code hinzu:

   /*
    * Copyright (c) Microsoft Corporation. All rights reserved.
    * Licensed under the MIT License.
    */
   require('dotenv').config();
   const express = require('express');
   const session = require('express-session');
   const {engine}  = require('express-handlebars');
   const msal = require('@azure/msal-node');
   //Use axios to make http calls 
   const axios = require('axios');
   
   //<ms_docref_configure_msal>
   /**
    * Confidential Client Application Configuration
    */
    const confidentialClientConfig = {
       auth: {
           clientId: process.env.APP_CLIENT_ID, 
           authority: process.env.SIGN_UP_SIGN_IN_POLICY_AUTHORITY, 
           clientSecret: process.env.APP_CLIENT_SECRET,
           knownAuthorities: [process.env.AUTHORITY_DOMAIN], //This must be an array
           redirectUri: process.env.APP_REDIRECT_URI,
           validateAuthority: false
       },
       system: {
           loggerOptions: {
               loggerCallback(loglevel, message, containsPii) {
                   console.log(message);
               },
               piiLoggingEnabled: false,
               logLevel: msal.LogLevel.Verbose,
           }
       }
   };
   
   // Initialize MSAL Node
   const confidentialClientApplication = new msal.ConfidentialClientApplication(confidentialClientConfig);
   //</ms_docref_configure_msal>
   // Current web API coordinates were pre-registered in a B2C tenant.
   
   //<ms_docref_api_config>
   const apiConfig = {
       webApiScopes: [`https://${process.env.TENANT_NAME}.onmicrosoft.com/tasks-api/tasks.read`],
       anonymousUri: 'http://localhost:5000/public',
       protectedUri: 'http://localhost:5000/hello'
   };
   //</ms_docref_api_config>
   
   /**
    * The MSAL.js library allows you to pass your custom state as state parameter in the Request object
    * By default, MSAL.js passes a randomly generated unique state parameter value in the authentication requests.
    * The state parameter can also be used to encode information of the app's state before redirect. 
    * You can pass the user's state in the app, such as the page or view they were on, as input to this parameter.
    * For more information, visit: https://docs.microsoft.com/azure/active-directory/develop/msal-js-pass-custom-state-authentication-request
    */
   const APP_STATES = {
       LOGIN: 'login',
       CALL_API:'call_api'   
   }
   
   
   /** 
    * Request Configuration
    * We manipulate these two request objects below 
    * to acquire a token with the appropriate claims.
    */
    const authCodeRequest = {
       redirectUri: confidentialClientConfig.auth.redirectUri,
   };
   
   const tokenRequest = {
       redirectUri: confidentialClientConfig.auth.redirectUri,
   };
   
   
   /**
    * Using express-session middleware. Be sure to familiarize yourself with available options
    * and set them as desired. Visit: https://www.npmjs.com/package/express-session
    */
    const sessionConfig = {
       secret: process.env.SESSION_SECRET,
       resave: false,
       saveUninitialized: false,
       cookie: {
           secure: false, // set this to true on production
       }
   }
   //Create an express instance
   const app = express();
   
   //Set handlebars as your view engine
   app.engine('.hbs', engine({extname: '.hbs'}));
   app.set('view engine', '.hbs');
   app.set("views", "./views");
   
   app.use(session(sessionConfig));
   
   /**
    * This method is used to generate an auth code request
    * @param {string} authority: the authority to request the auth code from 
    * @param {array} scopes: scopes to request the auth code for 
    * @param {string} state: state of the application, tag a request
    * @param {Object} res: express middleware response object
    */
   
    const getAuthCode = (authority, scopes, state, res) => {
       // prepare the request
       console.log("Fetching Authorization code")
       authCodeRequest.authority = authority;
       authCodeRequest.scopes = scopes;
       authCodeRequest.state = state;
   
       //Each time you fetch Authorization code, update the authority in the tokenRequest configuration
       tokenRequest.authority = authority;
   
       // request an authorization code to exchange for a token
       return confidentialClientApplication.getAuthCodeUrl(authCodeRequest)
           .then((response) => {
               console.log("\nAuthCodeURL: \n" + response);
               //redirect to the auth code URL/send code to 
               res.redirect(response);
           })
           .catch((error) => {
               res.status(500).send(error);
           });
   }
   
   app.get('/', (req, res) => {
       res.render('signin', { showSignInButton: true });
   });
   
   
   
   app.get('/signin',(req, res)=>{ 
           //Initiate a Auth Code Flow >> for sign in
           //Pass the api scopes as well so that you received both the IdToken and accessToken
           getAuthCode(process.env.SIGN_UP_SIGN_IN_POLICY_AUTHORITY,apiConfig.webApiScopes, APP_STATES.LOGIN, res);
   });
   
   
   app.get('/redirect',(req, res)=>{    
       
       if (req.query.state === APP_STATES.LOGIN) {
           // prepare the request for calling the web API
           tokenRequest.authority = process.env.SIGN_UP_SIGN_IN_POLICY_AUTHORITY;
           tokenRequest.scopes = apiConfig.webApiScopes;
           tokenRequest.code = req.query.code;
           confidentialClientApplication.acquireTokenByCode(tokenRequest)
           .then((response) => {
               req.session.accessToken = response.accessToken;
               req.session.givenName = response.idTokenClaims.given_name;
               console.log('\nAccessToken:' + req.session.accessToken);
               res.render('signin', {showSignInButton: false, givenName: response.idTokenClaims.given_name});
           }).catch((error) => {
               console.log(error);
               res.status(500).send(error);
           });
       }else{
           res.status(500).send('We do not recognize this response!');
       }
   });
   
   //<ms_docref_api_express_route>
   app.get('/api', async (req, res) => {
       if(!req.session.accessToken){
           //User is not logged in and so they can only call the anonymous API
           try {
               const response = await axios.get(apiConfig.anonymousUri);
               console.log('API response' + response.data); 
               res.render('api',{data: JSON.stringify(response.data), showSignInButton: true, bg_color:'warning'});
           } catch (error) {
               console.error(error);
               res.status(500).send(error);
           }         
       }else{
           //Users have the accessToken because they signed in and the accessToken is still in the session
           console.log('\nAccessToken:' + req.session.accessToken);
           let accessToken = req.session.accessToken;
           const options = {
               headers: {
                   //accessToken used as bearer token to call a protected API
                   Authorization: `Bearer ${accessToken}`
               }
           };
   
           try {
               const response = await axios.get(apiConfig.protectedUri, options);
               console.log('API response' + response.data); 
               res.render('api',{data: JSON.stringify(response.data), showSignInButton: false, bg_color:'success', givenName: req.session.givenName});
           } catch (error) {
               console.error(error);
               res.status(500).send(error);
           }
       }     
   });
   
   //</ms_docref_api_express_route>
   
   /**
    * Sign out end point
   */
   app.get('/signout',async (req, res)=>{    
       logoutUri = process.env.LOGOUT_ENDPOINT;
       req.session.destroy(() => {
           res.redirect(logoutUri);
       });
   });
   app.listen(process.env.SERVER_PORT, () => console.log(`Msal Node Auth Code Sample app listening on port !` + process.env.SERVER_PORT));
   

   Der Code in der index.js Datei besteht aus globalen Variablen und Expressrouten.

   Globale Variablen:

   • confidentialClientConfig: Das MSAL-Konfigurationsobjekt, das zum Erstellen des vertraulichen Clientanwendungsobjekts verwendet wird.

     /**
      * Confidential Client Application Configuration
      */
      const confidentialClientConfig = {
         auth: {
             clientId: process.env.APP_CLIENT_ID, 
             authority: process.env.SIGN_UP_SIGN_IN_POLICY_AUTHORITY, 
             clientSecret: process.env.APP_CLIENT_SECRET,
             knownAuthorities: [process.env.AUTHORITY_DOMAIN], //This must be an array
             redirectUri: process.env.APP_REDIRECT_URI,
             validateAuthority: false
         },
         system: {
             loggerOptions: {
                 loggerCallback(loglevel, message, containsPii) {
                     console.log(message);
                 },
                 piiLoggingEnabled: false,
                 logLevel: msal.LogLevel.Verbose,
             }
         }
     };
     
     // Initialize MSAL Node
     const confidentialClientApplication = new msal.ConfidentialClientApplication(confidentialClientConfig);
     

   • apiConfig: Enthält die webApiScopes-Eigenschaft (deren Wert ein Array sein muss), bei der es sich um die Bereiche handelt, die in der Web-API konfiguriert und der Web-App zugewiesen werden. Es verfügt außerdem über URIs für die Web-API, die aufgerufen werden soll, d. h anonymousUriprotectedUri.

     const apiConfig = {
         webApiScopes: [`https://${process.env.TENANT_NAME}.onmicrosoft.com/tasks-api/tasks.read`],
         anonymousUri: 'http://localhost:5000/public',
         protectedUri: 'http://localhost:5000/hello'
     };
     

   • APP_STATES: Ein in der Anforderung enthaltener Wert, der auch in der Tokenantwort zurückgegeben wird. Wird verwendet, um zwischen antworten zu unterscheiden, die von Azure AD B2C empfangen wurden.

   • authCodeRequest: Das Konfigurationsobjekt, das zum Abrufen von Autorisierungscode verwendet wird.

   • tokenRequest: Das Konfigurationsobjekt, das zum Abrufen eines Tokens durch Autorisierungscode verwendet wird.

   • sessionConfig: Das Konfigurationsobjekt für die Expresssitzung.

   • getAuthCode: Eine Methode, die die URL der Autorisierungsanforderung erstellt, sodass der Benutzer Anmeldeinformationen eingeben und der Anwendung zustimmen kann. Dabei wird die getAuthCodeUrl-Methode verwendet, die in der ConfidentialClientApplication-Klasse definiert ist.

   Expressrouten:

   • /:
     • Es ist der Eingangspunkt zur Web-App und stellt die signin Seite dar.
   • /signin:
     • Meldet Benutzende an.
     • Ruft die getAuthCode()-Methode auf und übergibt ihr authority für den Benutzerflow/die Benutzerrichtlinie für Anmeldung und Registrierung, APP_STATES.LOGIN und apiConfig.webApiScopes.
     • Dadurch wird der Endbenutzer aufgefordert, seine Anmeldeinformationen einzugeben, oder wenn der Benutzer kein Konto hat, kann er sich registrieren.
     • Die endgültige Antwort, die sich aus diesem Endpunkt ergibt, enthält einen Autorisierungscode von B2C, der zurück an den /redirect Endpunkt gepostet wurde.
   • /redirect:
     • Es ist der Endpunkt, der als Umleitungs-URI für die Web-App im Azure-Portal festgelegt ist.
     • Er verwendet den Abfrageparameter in der state Antwort von Azure AD B2C, um zwischen Anforderungen zu unterscheiden, die von der Web-App vorgenommen werden.
     • Wenn der App-Zustand lautet APP_STATES.LOGIN, wird der erworbene Autorisierungscode verwendet, um ein Token mithilfe der acquireTokenByCode() Methode abzurufen. Beim Anfordern eines Tokens mithilfe der acquireTokenByCode Methode verwenden Sie dieselben Bereiche, die beim Abrufen des Autorisierungscodes verwendet werden. Das erworbene Token enthält ein accessToken, idTokenund idTokenClaims. Nachdem Sie den accessToken-Wert erhalten haben, legen Sie ihn zur späteren Verwendung zum Aufrufen der Web-API in einer Sitzung ab.
   • /api:
     • Ruft die Web-API auf.
     • Falls accessToken nicht in der Sitzung enthalten ist, rufen Sie den anonymen API-Endpunkt (http://localhost:5000/public) auf; ansonsten rufen Sie den geschützten API-Endpunkt (http://localhost:5000/hello) auf.
   • /signout:
     • Meldet den Benutzer ab.
     • löscht die Web-App-Sitzung und führt einen HTTP-Aufruf an den Azure AD B2C-Abmeldeendpunkt aus.

Schritt 3: Ausführen der Web-App und der API

Führen Sie die Schritte in "Web-App und API ausführen " aus, um Ihre Web-App und Web-API zu testen.

Nächste Schritte

• Sichern einer Azure API-Verwaltungs-API mit Azure AD B2C