Tutorial: Vorbereiten einer Node.js-Webanwendung für die Authentifizierung

Artikel
04/17/2024

Dieses Tutorial ist Teil 2 einer Reihe, 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 1 dieser Reihe haben Sie eine Anwendung registriert und Benutzerflows in Ihrem externen Mandanten konfiguriert. In diesem Tutorial erstellen Sie ein Node.js-Projekt (Express) und organisieren alle benötigten Ordner und Dateien. Sie aktivieren die Anmeldung für die Anwendung, die Sie hier vorbereiten. Die Ansichten dieser Node.js(Express)-Webanwendung verwenden Ziehpunkte.

In diesem Tutorial lernen Sie:

Erstellen eines Node.js-Projekts
Installieren von Abhängigkeiten
Hinzufügen von App-Ansichten und Benutzeroberflächenkomponenten

Voraussetzungen

Tutorial: Vorbereiten des externen Mandanten zum Anmelden von Benutzer*innen bei einer Node.js-Web-App
Sie können jede integrierte Entwicklungsumgebung (IDE) verwenden, die React-Anwendungen unterstützt. In diesem Tutorial wird Visual Studio Code verwendet.
Node.js.
Visual Studio Code oder ein anderer Code-Editor

Erstellen des Node.js-Projekts

Erstellen Sie an einem Speicherort Ihrer Wahl auf Ihrem Computer einen Ordner zum Hosten Ihrer Knotenanwendung, z. B. ciam-sign-in-node-express-web-app.
Wechseln Sie in Ihrem Terminal zum Ordner für die Node-Web-App (etwa cd ciam-sign-in-node-express-web-app), und führen Sie dann den folgenden Befehl aus, um ein neues Node.js-Projekt zu erstellen:
```
npm init -y
```
Der Befehl init -y erstellt eine Standarddatei package.json für Ihr Node.js-Projekt.

Erstellen Sie weitere Ordner und Dateien, um die folgende Projektstruktur zu erstellen:

    ciam-sign-in-node-express-web-app/
    ├── server.js
    └── app.js
    └── authConfig.js
    └── package.json
    └── .env
    └── auth/
        └── AuthProvider.js
    └── controller/
        └── authController.js
    └── routes/
        └── auth.js
        └── index.js
        └── users.js
    └── views/
        └── layouts.hbs
        └── error.hbs
        └── id.hbs
        └── index.hbs   
    └── public/stylesheets/
        └── style.css

Installieren der App-Abhängigkeiten

Führen Sie den folgenden Befehl in Ihrem Terminal aus, um die erforderliche Identität und die npm-Pakete für Node.js zu installieren.

npm install express dotenv hbs express-session axios cookie-parser http-errors morgan @azure/msal-node

Erstellen von Komponenten der App-Benutzeroberfläche

Öffnen Sie in Ihrem Code-Editor die Datei views/index.hbs, und fügen Sie dann den folgenden Code hinzu:
```
    <h1>{{title}}</h1>
    {{#if isAuthenticated }}
    <p>Hi {{username}}!</p>
    <a href="/users/id">View ID token claims</a>
    <br>
    <a href="/auth/signout">Sign out</a>
    {{else}}
    <p>Welcome to {{title}}</p>
    <a href="/auth/signin">Sign in</a>
    {{/if}}
```
Wenn der Benutzer in dieser Ansicht authentifiziert ist, zeigen wir seinen Benutzernamen und Links zum Aufrufen der Endpunkte /auth/signout und /users/id an, andernfalls muss der Benutzer den Endpunkt /auth/signin aufrufen, um sich anzumelden. Wir definieren die Expressrouten für diese Endpunkte weiter unten in diesem Artikel.

Öffnen Sie in Ihrem Code-Editor die Datei views/id.hbs, und fügen Sie dann den folgenden Code hinzu:

    <h1>Azure AD for customers</h1>
    <h3>ID Token</h3>
    <table>
        <tbody>
            {{#each idTokenClaims}}
            <tr>
                <td>{{@key}}</td>
                <td>{{this}}</td>
            </tr>
            {{/each}}
        </tbody>
    </table>
    <a href="/">Go back</a>

Wir verwenden diese Ansicht, um ID-Tokenansprüche anzuzeigen, die Microsoft Entra External ID an diese App zurückgibt, nachdem sich ein Benutzer erfolgreich angemeldet hat.

Öffnen Sie in Ihrem Code-Editor die Datei views/error.hbs, und fügen Sie dann den folgenden Code hinzu:
```
    <h1>{{message}}</h1>
    <h2>{{error.status}}</h2>
    <pre>{{error.stack}}</pre>
```
Wir verwenden diese Ansicht, um alle Fehler anzuzeigen, die beim Ausführen der Anwendung auftreten.

Öffnen Sie in Ihrem Code-Editor die Datei views/layout.hbs, und fügen Sie dann den folgenden Code hinzu:

    <!DOCTYPE html>
    <html>        
        <head>
            <title>{{title}}</title>
            <link rel='stylesheet' href='/stylesheets/style.css' />
        </head>            
        <body>
            {{{content}}}
        </body>        
    </html>

Die layout.hbs-Datei ist die Layoutdatei. Sie enthält den HTML-Code, der zum Anzeigen der Anwendung benötigt wird.

Öffnen Sie in Ihrem Code-Editor die Datei public/stylesheets/style.css, und fügen Sie dann den folgenden Code hinzu:

    body {
      padding: 50px;
      font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
    }

    a {
      color: #00B7FF;
    }

Nächster Schritt

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

Freigeben über