Samouczek: konfigurowanie aplikacji internetowej Node.js do logowania użytkowników przy użyciu platformy tożsamości firmy Microsoft

Dotyczy: Najemcy usługi Workforce Najemcy zewnętrzni (dowiedzieć się więcej)

Z tego samouczka dowiesz się, jak utworzyć aplikację internetową Node/Express.js, która loguje użytkowników do aplikacji przeznaczonej dla klientów w zewnętrznej dzierżawie lub dla pracowników w dzierżawie pracowniczej. W tym samouczku pokazano również, jak uzyskać token dostępu do wywoływania interfejsu API programu Microsoft Graph.

Ten samouczek jest częścią 1 z 3-częściowej serii.

W tym samouczku nauczysz się:

• Konfigurowanie projektu Node.js
• Instalowanie zależności
• Dodawanie widoków aplikacji i składników interfejsu użytkownika

Warunki wstępne

• Jeśli jeszcze tego nie zrobiono, wykonaj kroki opisane w przewodniku Szybki start : Logowanie użytkowników w przykładowej aplikacji internetowej. W szybkim starcie nie trzeba klonować i uruchamiać przykładu kodu.
• Node.js.
• programu Visual Studio Code lub innego edytora kodu.

Tworzenie projektu Node.js

1. W wybranej lokalizacji na komputerze utwórz folder do przechowywania aplikacji Node.js, na przykład ciam-sign-in-node-express-web-app.

2. W terminalu zmień katalog na folder aplikacji internetowej Node, taki jak cd ciam-sign-in-node-express-web-app, a następnie uruchom następujące polecenie, aby utworzyć nowy projekt Node.js:

   npm init -y
   

   Polecenie init -y tworzy domyślny plik package.json dla projektu Node.js.

3. Utwórz dodatkowe foldery i pliki, aby uzyskać następującą strukturę projektu:

       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
   

Instalowanie zależności aplikacji

Aby zainstalować wymagane pakiety tożsamości i związane z Node.js pakiety npm, uruchom następujące polecenie w terminalu

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

Kompilowanie składników interfejsu użytkownika aplikacji

1. W edytorze kodu otwórz plik views/index.hbs, a następnie dodaj następujący kod:

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

   W tym widoku, jeśli użytkownik jest uwierzytelniony, wyświetlamy ich nazwę użytkownika i linki do odwiedzenia /auth/signout i /users/id punktów końcowych, w przeciwnym razie użytkownik musi odwiedzić punkt końcowy /auth/signin, aby się zalogować. W dalszej części tego artykułu zdefiniujemy trasy ekspresowe dla tych punktów końcowych.

2. W edytorze kodu otwórz plik views/id.hbs, a następnie dodaj następujący kod:

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

   Ten widok służy do wyświetlania roszczeń tokenu identyfikacyjnego, które zwraca Microsoft Entra External ID do tej aplikacji po pomyślnym zalogowaniu użytkownika.

3. W edytorze kodu otwórz plik views/error.hbs, a następnie dodaj następujący kod:

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

   Ten widok służy do wyświetlania wszelkich błędów występujących podczas uruchamiania aplikacji.

4. W edytorze kodu otwórz plik views/layout.hbs, a następnie dodaj następujący kod:

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

   Plik layout.hbs znajduje się w pliku układu. Zawiera on kod HTML, którego potrzebujemy w całym widoku aplikacji.

5. W edytorze kodu otwórz plik public/stylesheets/style.css, a następnie dodaj następujący kod:

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

Następny krok

Samouczek: dodawanie logowania do środowiska Node/Express.js aplikacji internetowej.