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

Вход пользователей и вызов веб-API в примере веб-приложения Node.js

  • Статья

В этом руководстве показано, как добавить проверку подлинности и авторизацию в веб-приложении Node.js. Пример приложения входит в Node.js веб-приложение, которое затем вызывает API .NET. Вы можете включить проверку подлинности и авторизацию с помощью сведений о внешнем клиенте. Пример веб-приложения использует библиотеку проверки подлинности Майкрософт (MSAL) для обработки проверки подлинности узла.

В этой статье вы выполните следующие задачи:

  • Зарегистрируйте и настройте веб-API в Центре администрирования Microsoft Entra.

  • Обновите пример веб-приложения Node и ASP.NET веб-API для использования сведений о внешнем клиенте.

  • Запустите и проверьте пример веб-приложения и API.

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

Регистрация веб-API

На этом шаге вы зарегистрируете веб-приложение и веб-API, а также укажете области веб-API.

Регистрация приложения веб-API

  1. Войдите в Центр администрирования Microsoft Entra как минимум разработчик приложений.

  2. Если у вас есть доступ к нескольким клиентам, используйте значок параметров в верхнем меню, чтобы переключиться на внешний клиент из меню каталогов и подписок.

  3. Перейдите к приложениям> удостоверений>Регистрация приложений.

  4. Выберите + Создать регистрацию.

  5. Откроется страница "Регистрация приложения", где необходимо ввести сведения о регистрации приложения:

    1. В разделе "Имя" введите понятное имя приложения, которое будет отображаться пользователям приложения, например ciam-ToDoList-api.

    2. В разделе Поддерживаемые типы учетных записей выберите Учетные записи только в этом каталоге организации.

  6. Выберите Зарегистрировать, чтобы создать приложение.

  7. Панель обзора приложения отображается при завершении регистрации. Запишите идентификатор каталога (клиента) и идентификатор приложения (клиента), которые будут использоваться в исходном коде приложения.

Настройка областей API

Этот API должен предоставлять разрешения, которые клиент должен получить для вызова API:

API должен опубликовать как минимум одну область, которая также называется делегированным разрешением, чтобы клиентские приложения получили маркер доступа для пользователя успешно. Чтобы опубликовать область, выполните следующие действия.

  1. На странице Регистрация приложений выберите созданное приложение API (ciam-ToDoList-api), чтобы открыть страницу обзора.

  2. В разделе Управление выберите Предоставление API.

  3. В верхней части страницы рядом с URI идентификатора приложения выберите ссылку "Добавить", чтобы создать универсальный код ресурса (URI), уникальный для этого приложения.

  4. Примите предлагаемый URI идентификатора приложения, например api://{clientId}, и нажмите кнопку "Сохранить". Когда веб-приложение запрашивает маркер доступа для веб-API, он добавляет URI в качестве префикса для каждой области, определяемой для API.

  5. В разделе Области, определенные этим API выберите Добавление области.

  6. Введите следующие значения, определяющие доступ для чтения к API, а затем выберите "Добавить область ", чтобы сохранить изменения:

    Свойство Стоимость
    Имя области ToDoList.Read
    Кто может давать согласие Admins only (Только администраторы)
    Отображаемое имя согласия администратора Чтение списка toDo пользователей с помощью todoListApi
    Описание согласия администратора Разрешить приложению читать список toDo пользователя с помощью todopi TodoListApi.
    Штат Включено

  7. Снова выберите " Добавить область" и введите следующие значения, определяющие область доступа для чтения и записи в API. Выберите " Добавить область ", чтобы сохранить изменения:

    Свойство Стоимость
    Имя области ToDoList.ReadWrite
    Кто может давать согласие Admins only (Только администраторы)
    Отображаемое имя согласия администратора Чтение и запись списка пользователей ToDo с помощью toDoListApi
    Описание согласия администратора Разрешить приложению читать и записывать список ToDo пользователя с помощью toDoListApi
    Штат Включено

  8. В разделе "Управление" выберите "Манифест" , чтобы открыть редактор манифеста API.

  9. Задайте accessTokenAcceptedVersion для свойства 2значение .

  10. Выберите Сохранить.

Узнайте больше о принципе минимальных привилегий при публикации разрешений для веб-API.

Настройка ролей приложения

API должен опубликовать не менее одной роли приложения для приложений, которые также называются разрешениями приложений, чтобы клиентские приложения получили маркер доступа как сами. Разрешения приложений — это тип разрешений, которые api-интерфейсы должны публиковать, когда они хотят разрешить клиентским приложениям успешно проходить проверку подлинности как сами и не должны выполнять вход пользователей. Чтобы опубликовать разрешение приложения, выполните следующие действия.

  1. На странице Регистрация приложений выберите созданное приложение (например, ciam-ToDoList-api), чтобы открыть страницу обзора.

  2. В разделе "Управление" выберите роли приложения.

  3. Выберите " Создать роль приложения", а затем введите следующие значения, а затем нажмите кнопку "Применить ", чтобы сохранить изменения:

    Свойство Значение
    Отображаемое имя ToDoList.Read.All
    Разрешенные типы элементов Приложения
    Значение ToDoList.Read.All
    Description Разрешить приложению считывать список toDo каждого пользователя с помощью todopi TodoListApi.

  4. Снова нажмите кнопку "Создать роль приложения", а затем введите следующие значения для второй роли приложения, а затем нажмите кнопку "Применить ", чтобы сохранить изменения:

    Свойство Значение
    Отображаемое имя ToDoList.ReadWrite.All
    Разрешенные типы элементов Приложения
    Значение ToDoList.ReadWrite.All
    Description Разрешить приложению считывать и записывать список toDopi каждого пользователя с помощью toDoListApi

Настройка необязательных утверждений

Вы можете бездействующее утверждение, чтобы помочь веб-API определить, является ли токен маркером приложения или приложением и маркером пользователя. Хотя вы можете использовать сочетание утверждений scp и ролей для той же цели, используя утверждение idtyp, проще всего определить маркер приложения и приложение + маркер пользователя. Например, значение этого утверждения — это приложение , когда маркер является маркером только для приложений.

Выполните действия, описанные в статье "Настройка необязательных утверждений" , чтобы добавить утверждение idtyp в маркер доступа:

  • Для типа токена выберите Access.
  • В списке необязательных утверждений выберите идентификатор.

Предоставление разрешений API веб-приложению

Чтобы предоставить клиентским приложениям (ciam-client-app) разрешения API, выполните следующие действия:

  1. На странице Регистрация приложений выберите созданное приложение (например, ciam-client-app), чтобы открыть страницу обзора.

  2. В разделе Управление выберите Разрешения API.

  3. В разделе Настроенные разрешения выберите Добавить разрешение.

  4. Щелкните вкладку API, используемые моей организацией.

  5. В списке API выберите API, например ciam-ToDoList-api.

  6. Выберите параметр "Делегированные разрешения".

  7. В списке разрешений выберите ToDoList.Read, ToDoList.ReadWrite (при необходимости используйте поле поиска).

  8. Нажмите кнопку Add permissions (Добавить разрешения). На этом этапе вы правильно назначили разрешения. Тем не менее, поскольку клиент является клиентом клиента, пользователи-потребители сами не могут согласиться с этими разрешениями. Чтобы устранить эту проблему, администратор должен согласиться с этими разрешениями от имени всех пользователей в клиенте:

    1. Выберите "Предоставить согласие администратора" для <имени> клиента, а затем нажмите кнопку "Да".

    2. Выберите "Обновить", а затем убедитесь, что имя> клиента предоставлено <в разделе "Состояние" для обеих областей.

  9. В списке настроенных разрешений выберите разрешения ToDoList.Read и ToDoList.ReadWrite по одному за раз, а затем скопируйте полный универсальный код ресурса (URI) разрешения для последующего использования. Полный универсальный код ресурса (URI) разрешений выглядит примерно так же api://{clientId}/{ToDoList.Read} api://{clientId}/{ToDoList.ReadWrite}или.

Клонирование или скачивание примера веб-приложения и веб-API

Чтобы получить пример приложения, можно клонировать его из GitHub или скачать его в виде файла .zip.

  • Чтобы клонировать пример, откройте командную строку и перейдите к месту создания проекта и введите следующую команду:

    git clone https://github.com/Azure-Samples/ms-identity-ciam-javascript-tutorial.git

  • Скачайте файл .zip. Извлеките его в путь к файлу, где длина имени меньше 260 символов.

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

  1. Откройте окно консоли и перейдите в каталог, содержащий пример приложения Node.js/Express:

    cd 2-Authorization\4-call-api-express\App

  2. Выполните следующие команды, чтобы установить зависимости веб-приложения:

    npm install && npm update

Настройка примера веб-приложения и API

Чтобы использовать регистрацию приложения в примере клиентского веб-приложения, сделайте следующее:

  1. В редакторе кода откройте App\authConfig.js файл.

  2. Найдите заполнитель:

    • Enter_the_Application_Id_Here и замените его идентификатором приложения (клиента) зарегистрированного ранее приложения.
    • Enter_the_Tenant_Subdomain_Here и замените его поддоменом каталога (клиента). Например, если основной домен клиента — это contoso.onmicrosoft.com, используйте contoso. Если у вас нет имени клиента, узнайте, как прочитать сведения о клиенте.
    • Enter_the_Client_Secret_Here и замените его значением секрета приложения, скопированным ранее.
    • Enter_the_Web_Api_Application_Id_Here и замените его идентификатором приложения (клиента) веб-API, скопированного ранее.

Чтобы использовать регистрацию приложения в примере веб-API, сделайте следующее:

  1. В редакторе кода откройте API\ToDoListAPI\appsettings.json файл.

  2. Найдите заполнитель:

    • Enter_the_Application_Id_Here и замените его идентификатором приложения (клиента) скопированного веб-API.
    • Enter_the_Tenant_Id_Here и замените его идентификатором каталога (клиента), скопированным ранее.
    • Enter_the_Tenant_Subdomain_Here и замените его поддоменом каталога (клиента). Например, если основной домен клиента — это contoso.onmicrosoft.com, используйте contoso. Если у вас нет имени клиента, узнайте, как прочитать сведения о клиенте.

Запуск и тестирование примера веб-приложения и API

  1. Откройте окно консоли, а затем запустите веб-API с помощью следующих команд:

    cd 2-Authorization\4-call-api-express\API\ToDoListAPI
dotnet run

  2. Запустите клиент веб-приложения с помощью следующих команд:

    cd 2-Authorization\4-call-api-express\App
npm start

  3. Откройте браузер, а затем перейдите в раздел http://localhost:3000.

  4. Нажмите кнопку Войти. Вам будет предложено выполнить вход.

    Снимок экрана: вход в веб-приложение узла.

  5. На странице входа введите адрес электронной почты, нажмите кнопку "Далее", введите пароль, а затем нажмите кнопку "Войти". Если у вас нет учетной записи, выберите "Нет учетной записи"? Создайте одну ссылку, которая запускает поток регистрации.

  6. Если вы выберете вариант регистрации, после заполнения электронного письма одноразовый секретный код, новый пароль и дополнительные сведения о учетной записи, вы завершите весь поток регистрации. Вы увидите страницу, аналогичную следующему снимку экрана. Вы увидите аналогичную страницу при выборе параметра входа.

    Снимок экрана: вход в веб-приложение узла и вызов API.

Вызов API

  1. Чтобы вызвать API, выберите ссылку "Просмотреть список дел ". Вы увидите страницу, аналогичную следующему снимку экрана.

    Снимок экрана: управление API для выполнения списка действий.

  2. Управляйте списком дел, создавая и удаляя элементы.

Принцип работы

Вызов API активируется при каждом просмотре, добавлении или удалении задачи. При каждом вызове API клиентское веб-приложение получает маркер доступа с необходимыми разрешениями (областями) для вызова конечной точки API. Например, чтобы прочитать задачу, клиентское веб-приложение должно получить маркер доступа с ToDoList.Read разрешением или областью.

Конечная точка веб-API должна проверить, допустимы ли разрешения или области в маркере доступа, предоставляемые клиентским приложением. Если маркер доступа действителен, конечная точка отвечает на HTTP-запрос, в противном случае он отвечает с ошибкой 401 Unauthorized HTTP.

Связанный контент