Руководство. Настройка веб-приложения Node.js для входа пользователей с помощью платформы удостоверений Майкрософт

применяется к: арендаторы рабочей силы внешние клиенты (подробнее)

В этом руководстве вы узнаете, как создать веб-приложение на Node/Express.js, которое позволяет пользователям входить в клиентское приложение, ориентированное на взаимодействие с клиентами в другом клиенте, или для сотрудников в клиенте рабочей силы. В этом руководстве также показано, как получить маркер доступа для вызова API Microsoft Graph.

Это руководство является частью 1 серии 3-частей.

В этом руководстве вы получите следующее:

• Настройте проект Node.js
• Установка зависимостей
• Добавление представлений приложений и компонентов пользовательского интерфейса

Необходимые условия

• Если вы еще этого не сделали, выполните шаги, описанные в Краткое руководство: Вход пользователей в примерное веб-приложение. В кратком руководстве вам не нужно клонировать и запускать пример кода.
• Node.js.
• Visual Studio Code или другой кодовый редактор.

Создание проекта Node.js

1. В выбранной папке на вашем компьютере создайте папку для размещения приложения на Node.js, например ciam-sign-in-node-express-web-app.

2. В терминале измените каталог в папку веб-приложения Node, например cd ciam-sign-in-node-express-web-app, а затем выполните следующую команду, чтобы создать проект Node.js:

   npm init -y
   

   Команда init -y создает файл package.json по умолчанию для проекта Node.js.

3. Создайте дополнительные папки и файлы для достижения следующей структуры проекта:

       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
   

Установка зависимостей приложений

Чтобы установить требуемые пакеты для удостоверения и пакеты npm, связанные с Node.js, выполните следующую команду в терминале.

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

Создание компонентов пользовательского интерфейса приложения

1. В редакторе кода откройте файл views/index.hbs, а затем добавьте следующий код:

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

   В этом представлении, если пользователь прошел проверку подлинности, мы показываем свое имя пользователя и ссылки на посещение конечных точек /auth/signout и /users/id, в противном случае пользователю необходимо посетить конечную точку /auth/signin для входа. Мы определяем экспресс-маршруты для этих конечных точек далее в этой статье.

2. В редакторе кода откройте файл views/id.hbs, а затем добавьте следующий код:

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

   Мы используем это представление для отображения утверждений маркера идентификатора, которые Microsoft Entra External ID возвращает в это приложение после успешного входа пользователя.

3. В редакторе кода откройте файл представления/error.hbs, и добавьте следующий код:

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

   Это представление используется для отображения любых ошибок, возникающих при запуске приложения.

4. В редакторе кода откройте файл views/layout.hbs, а затем добавьте следующий код:

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

   Файл layout.hbs находится в файле макета. Он содержит HTML-код, который требуется в представлении приложения.

5. В редакторе кода откройте public/stylesheets/style.css, file, а затем добавьте следующий код:

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

Следующий шаг

Учебник: Добавьте авторизацию в ваше Node.js/Express.js веб-приложение.