Delen via

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

Van toepassing op: Groene cirkel met een wit vinkje dat aangeeft dat de volgende inhoud van toepassing is op werknemerstenants. Werknemerstenants Groene cirkel met een wit vinkje dat aangeeft dat de volgende inhoud van toepassing is op externe tenants. 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

  • Registreer een nieuwe app in het Microsoft Entra-beheercentrum, alleen geconfigureerd voor accounts in deze organisatiemap. Raadpleeg Een applicatie registreren voor meer details. Noteer de volgende waarden van de Overview pagina van de applicatie voor later gebruik.
    • Applicatie (client) ID
    • ID van de directory (tenant)
  • Voeg de volgende omleidings-URI's toe met behulp van de configuratie van het webplatform . Raadpleeg Hoe u een omleidings-URI in uw applicatie kunt toevoegen voor meer details.
    • Doorverwijs-URI: http://localhost:3000/auth/redirect
    • Frontkanaal afmeldings-URL: https://localhost:5001/signout-callback-oidc
  • Voeg een clientgeheim toe aan uw app-registratie. Gebruik geen clientgeheimen in productie-apps. Gebruik in plaats daarvan certificaten of federatieve referenties. Voor meer informatie, zie referenties toevoegen aan uw toepassing.

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.