Tutorial: Hinzufügen der Anmeldung und Abmeldung in Ihrer Node.js-Webanwendung

Artikel
08/27/2024

Dieses Tutorial ist der letzte Teil einer Serie, in der das Erstellen einer Node.js-Web-App und ihre Vorbereitung für die Authentifizierung mithilfe des Microsoft Entra Admin Centers veranschaulicht wird. In Teil 2 dieser Serie haben Sie eine Node.js Web-App erstellt und alle erforderlichen Dateien organisiert. In diesem Tutorial fügen Sie der Node.js-Web-App Anmeldung, Registrierung und Abmeldung hinzu. Um das Hinzufügen der Authentifizierung zur Node.js-Web-App zu vereinfachen, verwenden Sie die Microsoft-Authentifizierungsbibliothek (Microsoft Authentication Library, MSAL) für Node. Der Anmeldeflow verwendet das OpenID Connect-Authentifizierungsprotokoll (OIDC), das Benutzer*innen auf sichere Weise anmeldet.

In diesem Tutorial gehen Sie wie folgt vor:

Hinzufügen von An- und Abmeldelogik
ID-Token-Ansprüche anzeigen
Führen Sie die App aus, und testen Sie die Anmelde- und Abmeldefunktion.

Voraussetzungen

Sie haben die Schritte unter Tutorial: Vorbereiten einer Node.js-Webanwendung für die Authentifizierung abgeschlossen.

Erstellen des MSAL-Konfigurationsobjekts

Öffnen Sie in Ihrem Code-Editor die Datei authConfig.js, und fügen Sie dann den folgenden Code hinzu:

require('dotenv').config();

const TENANT_SUBDOMAIN = process.env.TENANT_SUBDOMAIN || 'Enter_the_Tenant_Subdomain_Here';
const REDIRECT_URI = process.env.REDIRECT_URI || 'http://localhost:3000/auth/redirect';
const POST_LOGOUT_REDIRECT_URI = process.env.POST_LOGOUT_REDIRECT_URI || 'http://localhost:3000';

/**
 * Configuration object to be passed to MSAL instance on creation.
 * For a full list of MSAL Node configuration parameters, visit:
 * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-node/docs/configuration.md
 */
const msalConfig = {
    auth: {
        clientId: process.env.CLIENT_ID || 'Enter_the_Application_Id_Here', // 'Application (client) ID' of app registration in Azure portal - this value is a GUID
        authority: process.env.AUTHORITY || `https://${TENANT_SUBDOMAIN}.ciamlogin.com/`, // replace "Enter_the_Tenant_Subdomain_Here" with your tenant name
        clientSecret: process.env.CLIENT_SECRET || 'Enter_the_Client_Secret_Here', // Client secret generated from the app registration in Azure portal
    },
    system: {
        loggerOptions: {
            loggerCallback(loglevel, message, containsPii) {
                console.log(message);
            },
            piiLoggingEnabled: false,
            logLevel: 'Info',
        },
    },
};

module.exports = {
    msalConfig,
    REDIRECT_URI,
    POST_LOGOUT_REDIRECT_URI,
    TENANT_SUBDOMAIN
};

Das msalConfig-Objekt enthält eine Reihe von Konfigurationsoptionen, die von Ihnen zum Anpassen des Verhaltens Ihrer Authentifizierungsflows verwendet werden.

Ersetzen Sie Folgendes in Ihrer authConfig.js-Datei:

Enter_the_Application_Id_Here durch die Anwendungs (Client)-ID der zuvor von Ihnen registrierten Anwendung.
Enter_the_Tenant_Subdomain_Here (Geben Sie hier die Unterdomäne Ihres Mandanten ein) und ersetzen Sie sie durch die Unterdomäne des Verzeichnisses (des Mandanten). Wenn Ihre primäre Mandantendomäne beispielsweise contoso.onmicrosoft.com lautet, verwenden Sie contoso. Wenn Sie Ihren Mandantennamen nicht kennen, können Sie Ihre Mandantendetails auslesen.
Enter_the_Client_Secret_Here durch den Wert des App-Geheimnisses, den Sie zuvor kopiert haben.

Wenn Sie die .env-Datei zum Speichern Ihrer Konfigurationsinformationen verwenden:

Öffnen Sie in Ihrem Code-Editor die Datei .env, und fügen Sie den folgenden Code hinzu.

    CLIENT_ID=Enter_the_Application_Id_Here
    TENANT_SUBDOMAIN=Enter_the_Tenant_Subdomain_Here
    CLIENT_SECRET=Enter_the_Client_Secret_Here
    REDIRECT_URI=http://localhost:3000/auth/redirect
    POST_LOGOUT_REDIRECT_URI=http://localhost:3000

Ersetzen Sie die Platzhalter Enter_the_Application_Id_Here, Enter_the_Tenant_Subdomain_Here und Enter_the_Client_Secret_Here, wie zuvor erläutert.

Sie exportieren die Variablen msalConfig, REDIRECT_URI, TENANT_SUBDOMAIN und POST_LOGOUT_REDIRECT_URI in der Datei authConfig.js, sodass sie überall dort zugänglich sind, wo sie die Datei benötigen.

Verwenden einer benutzerdefinierten URL-Domäne (Optional)

Verwenden Sie eine benutzerdefinierte Domäne, um die Authentifizierungs-URL vollständig für Ihre Marke anzupassen. Aus Sicht der Benutzer entsteht dadurch der Eindruck, dass sie während des Authentifizierungsprozesses in Ihrer Domäne bleiben, anstatt zum Domänennamen ciamlogin.com umgeleitet zu werden.

Führen Sie die folgenden Schritte aus, um eine benutzerdefinierte Domäne zu verwenden:

Führen Sie die Schritte unter Aktivieren von benutzerdefinierten URL-Domänen für Apps in externen Mandanten aus, um eine benutzerdefinierte Domänen-URL für Ihren externen Mandanten zu aktivieren.
Suchen Sie in Ihrer Datei authConfig.js nach dem auth-Objekt, und führen Sie dann die folgenden Schritte aus:
1. Aktualisieren Sie den Wert der authority-Eigenschaft in https://Enter_the_Custom_Domain_Here/Enter_the_Tenant_ID_Here. Ersetzen Sie Enter_the_Custom_Domain_Here durch die benutzerdefinierte URL-Domäne und Enter_the_Tenant_ID_Here durch Ihre Mandanten-ID. Wenn Sie Ihre Mandanten-ID nicht kennen, erfahren Sie hier, wie Sie die Mandantendetails abrufen.
2. Fügen Sie die knownAuthorities-Eigenschaft mit dem Wert [Enter_the_Custom_Domain_Here] hinzu.

Nachdem Sie die Änderungen an der Datei authConfig.js vorgenommen haben, sollte die Datei in etwa wie der folgende Codeschnipsel aussehen (wenn Ihre benutzerdefinierte URL-Domäne login.contoso.com lautet und Ihre Mandanten-ID aaaabbbb-0000-cccc-1111-dddd2222eeee ist):

//...
const msalConfig = {
    auth: {
        authority: process.env.AUTHORITY || 'https://login.contoso.com/aaaabbbb-0000-cccc-1111-dddd2222eeee', 
        knownAuthorities: ["login.contoso.com"],
        //Other properties
    },
    //...
};

Hinzufügen von Express-Routen

Die Express-Routen stellen die Endpunkte bereit, die die Ausführungsvorgänge wie Anmelden, Abmelden und ID-Tokenansprüche anzeigen ermöglichen.

App-Einstiegspunkt

Öffnen Sie in Ihrem Code-Editor die Datei routes/index.js, und fügen Sie den folgenden Code hinzu:

const express = require('express');
const router = express.Router();

router.get('/', function (req, res, next) {
    res.render('index', {
        title: 'MSAL Node & Express Web App',
        isAuthenticated: req.session.isAuthenticated,
        username: req.session.account?.username !== '' ? req.session.account?.username : req.session.account?.name,
    });
});    
module.exports = router;

Die Route / ist der Einstiegspunkt für die Anwendung. Er rendert die Ansicht views/index.hbs, die Sie zuvor unter Komponenten der App-Benutzeroberfläche erstellen erstellt haben. isAuthenticated ist eine boolesche Variable, die bestimmt, was in der Ansicht angezeigt wird.

Öffnen Sie in Ihrem Code-Editor die Datei routes/auth.js, und fügen Sie ihr den Code aus auth.js hinzu.
Öffnen Sie in Ihrem Code-Editor die Datei controller/authController.js , und fügen Sie ihr den Code aus authController.js hinzu.
Öffnen Sie in Ihrem Code-Editor Datei auth/AuthProvider.js, und fügen Sie ihr den Code aus AuthProvider.js hinzu.

Die Routen /signin, /signout und /redirect sind in der Datei routes/auth.js definiert, ihre Logik wird jedoch in der Klasse auth/AuthProvider.js implementiert.

Die login-Methode verarbeitet die Route /signin:
- Sie initiiert den Anmeldeflow durch das Auslösen des ersten Abschnitts des Authentifizierungscode-Flows.
- Sie initialisiert mithilfe des zuvor erstellten MSAL-Konfigurationsobjekts msalConfig eine vertrauliche Clientanwendungsinstanz.
```
    const msalInstance = this.getMsalInstance(this.config.msalConfig);
```
  Die Methode getMsalInstance ist folgendermaßen definiert:
```
    getMsalInstance(msalConfig) {
        return new msal.ConfidentialClientApplication(msalConfig);
    }
```
- Die erste Etappe des Authentifizierungscode-Flows generiert eine Autorisierungscodeanforderungs-URL und leitet dann an diese URL um, um den Autorisierungscode abzurufen. Diese erste Etappe wird in die redirectToAuthCodeUrl-Methode implementiert. Beachten Sie, wie wir die MSAL-Methode getAuthCodeUrl verwenden, um die Autorisierungscode-URL zu generieren:
```
//...
const authCodeUrlResponse = await msalInstance.getAuthCodeUrl(req.session.authCodeUrlRequest);
//...
```
  Wir leiten dann zur Autorisierungscode-URL selbst um.
```
//...
res.redirect(authCodeUrlResponse);
//...
```
Die handleRedirect-Methode verarbeitet die Route /redirect:
- Sie legen diese URL im Microsoft Entra Admin Center weiter oben unter Web-App registrieren als Umleitungs-URI für die Web-App fest.
- Dieser Endpunkt implementiert die zweite Stufe des Authentifizierungscode-Flows. Er nutzt den Autorisierungscode, um mithilfe der Methode acquireTokenByCode ein ID-Token von MSAL anzufordern.
```
//...
const tokenResponse = await msalInstance.acquireTokenByCode(authCodeRequest, req.body);
//...
```
- Nachdem Sie eine Antwort erhalten haben, können Sie eine Express-Sitzung erstellen und alle gewünschten Informationen darin speichern. Sie müssen isAuthenticated einschließen und auf true festlegen:
```
//...        
req.session.idToken = tokenResponse.idToken;
req.session.account = tokenResponse.account;
req.session.isAuthenticated = true;
//...
```
Die logout-Methode verarbeitet die Route /signout:
```
async logout(req, res, next) {
    /**
     * Construct a logout URI and redirect the user to end the
        * session with Azure AD. For more information, visit:
        * https://docs.microsoft.com/azure/active-directory/develop/v2-protocols-oidc#send-a-sign-out-request
        */
    const logoutUri = `${this.config.msalConfig.auth.authority}${TENANT_SUBDOMAIN}.onmicrosoft.com/oauth2/v2.0/logout?post_logout_redirect_uri=${this.config.postLogoutRedirectUri}`;

    req.session.destroy(() => {
        res.redirect(logoutUri);
    });
}
```
- Sie initiiert die Abmeldeanforderung.
- Wenn Sie den Benutzer von der Anwendung abmelden möchten, reicht es nicht aus, nur die Benutzersitzung zu beenden. Sie müssen den Benutzer zu logoutUri umleiten. Ansonsten kann sich der Benutzer möglicherweise erneut bei Ihrer Anwendung authentifizieren, ohne seine Anmeldeinformationen erneut einzugeben. Wenn der Name Ihres Mandanten contoso lautet, sieht der logoutUri ähnlich wie https://contoso.ciamlogin.com/contoso.onmicrosoft.com/oauth2/v2.0/logout?post_logout_redirect_uri=http://localhost:3000 aus.

ID-Token-Ansprüche anzeigen

Öffnen Sie in Ihrem Code-Editor die Datei routes/users.js, und fügen Sie den folgenden Code hinzu:

const express = require('express');
const router = express.Router();

// custom middleware to check auth state
function isAuthenticated(req, res, next) {
    if (!req.session.isAuthenticated) {
        return res.redirect('/auth/signin'); // redirect to sign-in route
    }

    next();
};

router.get('/id',
    isAuthenticated, // check if user is authenticated
    async function (req, res, next) {
        res.render('id', { idTokenClaims: req.session.account.idTokenClaims });
    }
);        
module.exports = router;

Wenn der Benutzer authentifiziert ist, zeigt die Route /id die ID-Tokenansprüche mithilfe der Ansicht views/id.hbs an. Sie haben diese Ansicht weiter oben unter Erstellen von Komponenten der App-Benutzeroberfläche hinzugefügt.

So extrahieren Sie einen bestimmten ID-Tokenanspruch, wie den angegebenen Namen:

const givenName = req.session.account.idTokenClaims.given_name

Abschließen Ihrer Web-App

Öffnen Sie in Ihrem Code-Editor die Datei app.js, und fügen Sie ihr dann den Code aus app.js hinzu.
Öffnen Sie in Ihrem Code-Editor die Datei server.js, und fügen Sie ihr dann den Code aus server.js hinzu.
Öffnen Sie in Ihrem Code-Editor die Datei package.json, und aktualisieren Sie die Eigenschaft scripts dann auf:
```
"scripts": {
"start": "node server.js"
}
```

Ausführen und Testen der Web-App

Stellen Sie in Ihrem Terminal sicher, dass Sie sich in dem Projektordner befinden, der Ihre Web-App enthält, wie z. B. ciam-sign-in-node-express-web-app.
Führen Sie in Ihrem Terminal den folgenden Befehl aus:
```
npm start
```
Öffnen Sie Ihren Browser, und navigieren Sie zu http://localhost:3000. Die daraufhin angezeigte Seite sollte dem folgenden Screenshot ähneln:
Nachdem die Seite geladen wurde, wählen Sie den Link Anmelden aus. Sie werden zur Anmeldung aufgefordert.
Geben Sie auf der Anmeldeseite Ihre E-Mail-Adresse ein, wählen Sie Weiter aus, geben Sie Ihr Kennwort ein und wählen Sie dann Anmelden aus. Wenn Sie kein Konto haben, wählen Sie den Link Kein Konto? Erstellen Sie eins aus, um den Registrierungsflow zu starten.
Wenn Sie die Registrierungsoption auswählen, schließen Sie den gesamten Registrierungsflow ab, nachdem Sie E-Mail-Adresse, Einmal-Passcode, das neue Kennwort und weitere Kontodetails eingegeben haben. Die daraufhin angezeigte Seite sieht in etwa wie im folgenden Screenshot aus. Wenn Sie die Anmeldeoption auswählen, wird eine ähnliche Seite angezeigt.
Wählen Sie Abmelden aus, um den Benutzer bzw. die Benutzerin von der Web-App abzumelden, oder wählen Sie ID-Token-Ansprüche anzeigen aus, um alle ID-Token-Ansprüche anzuzeigen.

Freigeben über

Voraussetzungen

Erstellen des MSAL-Konfigurationsobjekts

Verwenden einer benutzerdefinierten URL-Domäne (Optional)

Hinzufügen von Express-Routen

App-Einstiegspunkt

ID-Token-Ansprüche anzeigen

Abschließen Ihrer Web-App

Ausführen und Testen der Web-App

Siehe auch

Feedback

Zusätzliche Ressourcen

Freigeben über

Voraussetzungen

Erstellen des MSAL-Konfigurationsobjekts

Verwenden einer benutzerdefinierten URL-Domäne (Optional)

Hinzufügen von Express-Routen

App-Einstiegspunkt

An- und Abmelden

ID-Token-Ansprüche anzeigen

Abschließen Ihrer Web-App

Ausführen und Testen der Web-App

Siehe auch

Feedback

Zusätzliche Ressourcen