Delen via

Zelfstudie: Een Node.js-web-app instellen om gebruikers aan te melden met behulp van het Microsoft Identity Platform

  • Artikel

Van toepassing op: groene cirkel met een wit vinkje. Workforce-tenants Groene cirkel met een wit vinkje. Externe tenants (meer informatie)

In deze zelfstudie leert u hoe u een Node/Express.js-web-app bouwt waarmee gebruikers worden aangemeld bij klantgerichte app in een externe tenant of werknemers in een personeelstenant. De zelfstudie laat ook zien hoe u een toegangstoken verkrijgt voor het aanroepen van Microsoft Graph API.

Deze zelfstudie is deel 1 van een driedelige serie.

In deze zelfstudie gaat u;

  • Een Node.js-project instellen
  • Afhankelijkheden installeren
  • App-weergaven en UI-onderdelen toevoegen

Voorwaarden

Het Node.js-project maken

  1. Maak op een locatie van uw computer een map om uw Node-toepassing te hosten, zoals ciam-sign-in-node-express-web-app.

  2. Wijzig in de terminal de map van de Node-web-app, zoals cd ciam-sign-in-node-express-web-app, en voer vervolgens de volgende opdracht uit om een nieuw Node.js-project te maken:

    npm init -y

    Met de opdracht init -y maakt u een standaardbestand package.json voor uw Node.js project.

  3. Maak extra mappen en bestanden om de volgende projectstructuur te bereiken:

        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

App-afhankelijkheden installeren

Als u de vereiste identiteit en Node.js gerelateerde NPM-pakketten wilt installeren, voert u de volgende opdracht uit in uw terminal

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

Onderdelen van de gebruikersinterface van de app bouwen

  1. Open in de code-editor views/index.hbs-bestand en voeg vervolgens de volgende code toe:

        <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 deze weergave, als de gebruiker is geverifieerd, tonen we hun gebruikersnaam en koppelingen om /auth/signout en /users/id eindpunten te bezoeken, anders moet de gebruiker het /auth/signin-eindpunt bezoeken om zich aan te melden. Verderop in dit artikel definiëren we de expressroutes voor deze eindpunten.

  2. Open in de code-editor views/id.hbs bestand en voeg vervolgens de volgende code toe:

        <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>

    We gebruiken deze weergave om id-tokenclaims weer te geven die door Microsoft Entra External ID naar deze app worden geretourneerd nadat een gebruiker zich heeft aangemeld.

  3. Open in de code-editor views/error.hbs bestand en voeg vervolgens de volgende code toe:

        <h1>{{message}}</h1>
    <h2>{{error.status}}</h2>
    <pre>{{error.stack}}</pre>

    We gebruiken deze weergave om eventuele fouten weer te geven die optreden wanneer de app wordt uitgevoerd.

  4. Open in de code-editor views/layout.hbs-bestand en voeg vervolgens de volgende code toe:

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

    Het layout.hbs bestand bevindt zich in het indelingsbestand. Deze bevat de HTML-code die we nodig hebben in de toepassingsweergave.

  5. In uw code-editor, open public/stylesheets/style.cssen dan de volgende code toevoegen:

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

    a {
      color: #00B7FF;
    }

Volgende stap

Zelfstudie: Inloggen toevoegen in uw Node-/Express.js-web-app.