Zelfstudie: Een Node.js-webtoepassing maken om gebruikers aan te melden

Deze zelfstudie is deel 2 van een reeks die laat zien hoe u een Node.js web-app bouwt en voorbereidt op verificatie met behulp van het Microsoft Entra-beheercentrum. In deel 1 van deze reeks hebt u een toepassing geregistreerd en gebruikersstromen geconfigureerd in uw externe tenant. In deze zelfstudie maakt u een Node.js(Express)-project en organiseert u alle mappen en bestanden die u nodig hebt. U schakelt aanmelding in bij de toepassing die u hier voorbereidt. De weergaven van deze webtoepassing Node.js(Express) maken gebruik van handlebars.

In deze zelfstudie gaat u;

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

Vereisten

• Zelfstudie: Uw externe tenant voorbereiden om gebruikers aan te melden in een Node.js-web-app
• Hoewel elke IDE (Integrated Development Environment) die React-toepassingen ondersteunt, kan worden gebruikt, maakt deze zelfstudie gebruik van Visual Studio Code.
• Node.js.
• Visual Studio Code of een andere code-editor.

Het Node.js-project maken

1. Maak op een gewenste locatie op uw computer een map voor het hosten van uw knooppunttoepassing, zoals ciam-sign-in-node-express-web-app.

2. Wijzig in de terminal de map van de Node-web-app, bijvoorbeeld 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 init -y opdracht 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 het bestand views/index.hbs 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 naar bezoeken /auth/signout en /users/id eindpunten, 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 Microsoft Entra Externe ID terugkeert naar deze app 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. Open in de code-editor openbare/stylesheets/style.css, bestand en voeg vervolgens de volgende code toe:

       body {
         padding: 50px;
         font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
       }
   
       a {
         color: #00B7FF;
       }
   

Volgende stap

Deel 3: Aanmelding en afmelding toevoegen aan uw Node.js-webtoepassing