Поделиться через

Руководство. Создание веб-приложения Node.js для входа пользователей

  • Статья

Это руководство является частью 2 серии, демонстрирующей создание веб-приложения Node.js и подготовку его к проверке подлинности с помощью Центра администрирования Microsoft Entra. В части 1 этой серии вы зарегистрировали приложение и настроили потоки пользователей во внешнем клиенте. В этом руководстве вы создадите проект Node.js(Express) и упорядочите все необходимые папки и файлы. Вы включите вход в приложение, которое вы готовитесь здесь. В представлениях веб-приложения Node.js(Express) используются дескрипторы.

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

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

Необходимые компоненты

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

  1. В выбранном расположении на компьютере создайте папку для размещения приложения узла, например 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

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

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

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 возвращаются в это приложение после успешного входа пользователя.

  3. В редакторе кода откройте файл views/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. В редакторе кода откройте общедоступную/таблицу стилей/style.css, файл, а затем добавьте следующий код:

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

    a {
      color: #00B7FF;
    }

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

Часть 3. Добавление входа и выхода надстройки в веб-приложение Node.js