Teilen über

Lernprogramm: Einrichten einer Node.js Web-App zum Anmelden von Benutzern mithilfe der Microsoft Identity Platform

Gilt für: Grüner Kreis mit einem weißen Häkchensymbol, das angibt, dass der folgende Inhalt für Mitarbeitermandanten gilt. Mitarbeitermandanten grüner Kreis mit einem weißen Häkchensymbol, das angibt, dass der folgende Inhalt für externe Mandanten gilt. Externe Mandanten (weitere Informationen)

In diesem Lernprogramm erfahren Sie, wie Sie eine Node/Express.js-Web-App erstellen, die Benutzer in eine kundenorientierte App in einem externen Kundenumfeld oder Mitarbeiter in einer Mitarbeiterumgebung anmeldet. Das Lernprogramm veranschaulicht außerdem, wie Sie ein Zugriffstoken für den Aufruf der Microsoft Graph-API erwerben.

Dieses Lernprogramm ist Teil 1 einer dreiteiligen Serie.

In diesem Tutorial lernen Sie:

  • Einrichten eines Node.js Projekts
  • Installieren von Abhängigkeiten
  • Hinzufügen von App-Ansichten und UI-Komponenten

Voraussetzungen

  • Registrieren Sie eine neue App im Microsoft Entra Admin Center, die nur für Konten in diesem Organisationsverzeichnis konfiguriert ist. Weitere Informationen finden Sie unter Registrieren einer Anwendung . Notieren Sie die folgenden Werte auf der Anwendungsübersichtsseite für die spätere Verwendung:
    • Anwendungs-ID (Client)
    • Verzeichnis-ID (Mandant)
  • Fügen Sie die folgenden Umleitungs-URIs mithilfe der Webplattformkonfiguration hinzu. Weitere Informationen finden Sie unter Hinzufügen eines Umleitungs-URI in Ihrer Anwendung .
    • Umleitungs-URI: http://localhost:3000/auth/redirect
    • Logout-URL des Frontkanals: https://localhost:5001/signout-callback-oidc
  • Fügen Sie Ihrer App-Registrierung einen geheimen Clientschlüssel hinzu. Verwenden Sie keine Clientgeheimnisse in Produktions-Apps. Verwenden Sie stattdessen Zertifikate oder Verbundanmeldeinformationen. Weitere Informationen finden Sie unter Hinzufügen von Anmeldeinformationen zu Ihrer Anwendung.

Erstellen des Node.js Projekts

  1. Erstellen Sie in einem Speicherort ihrer Wahl auf Ihrem Computer einen Ordner zum Hosten Ihrer Knotenanwendung, z. B. ciam-sign-in-node-express-web-app.

  2. Wechseln Sie in Ihrem Terminal in das Verzeichnis Ihres Node-Web-App-Ordners, wie 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 init -y Befehl erstellt eine standardmäßige package.json-Datei für Ihr Node.js-Projekt.

  3. Erstellen Sie zusätzliche Ordner und Dateien, um die folgende Projektstruktur zu erreichen:

        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 von App-Abhängigkeiten

Führen Sie zum Installieren der erforderlichen Identitäts- und Node.js zugehörigen npm-Pakete den folgenden Befehl in Ihrem Terminal aus:

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

Erstellen von App-UI-Komponenten

  1. Ö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}}

    In dieser Ansicht zeigen wir, falls der Benutzer authentifiziert ist, seinen Benutzernamen und Links zu den /auth/signout und /users/id Endpunkten an. Andernfalls muss der Benutzer den /auth/signin Endpunkt besuchen, um sich anzumelden. Wir definieren die Expressrouten für diese Endpunkte weiter unten in diesem Artikel.

  2. Ö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 von Microsoft Entra Externe ID an diese App zurückgegeben werden, nachdem sich ein Benutzer erfolgreich angemeldet hat.

  3. Ö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 App auftreten.

  4. Ö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 befindet sich in der Layoutdatei. Sie enthält den HTML-Code, den wir in der gesamten Anwendungsansicht benötigen.

  5. Öffnen Sie in Ihrem Code-Editor öffentliche/stylesheets/style.css, datei, 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

Tutorial: Hinzufügen der Anmeldefunktion zu Ihrer Node/Express.js-Webanwendung.

  • Last updated on