Упражнение. Настройка поставщиков проверки подлинности и доступа

4 мин

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

В этом упражнении вы выполните следующие действия.

Добавите правила в конфигурацию маршрутизации, чтобы отключить некоторых поставщиков проверки подлинности.
Защитите список продуктов, чтобы к нему могли обращаться только пользователи, прошедшие проверку подлинности.
Развернете обновленное приложение.
Проверите, действуют ли ограничения.

Отключение поставщиков проверки подлинности

Мы обновим конфигурацию маршрутизации приложения, чтобы отключить поставщика проверки подлинности Microsoft Entra.

Откройте проект в Visual Studio Code.

Откройте этот файл.

angular-app/staticwebapp.config.json

react-app/staticwebapp.config.json

svelte-app/staticwebapp.config.json

vue-app/staticwebapp.config.json

В корень объекта JSON добавьте следующую конфигурацию маршрутизации.
```
"routes": [
  {
    "route": "/.auth/login/aad",
    "statusCode": 404
  }
]
```
Добавив это правило маршрутизации, мы запрещаем пользователям получать доступ к поставщику проверки подлинности Microsoft Entra.

Защита доступа к списку продуктов

Далее мы хотим защитить список продуктов, чтобы доступ к API был возможен только для пользователей, прошедших проверку подлинности. Для этого мы добавим в файл конфигурации staticwebapp.config.json еще одно правило маршрутизации.

Добавьте следующее правило вверху массива routes.
```
{
  "route": "/api/products/*",
  "allowedRoles": ["authenticated"]
},
```

Завершенный файл staticwebapp.config.json должен выглядеть так, как показано ниже.

{
  "routes": [
    {
      "route": "/api/products/*",
      "allowedRoles": ["authenticated"]
    },
    {
      "route": "/.auth/login/aad",
      "statusCode": 404
    }
  ],
  "navigationFallback": {
    "rewrite": "/index.html",
    "exclude": ["*.{css,scss,js,png,gif,ico,jpg,svg}"]
  }
}

Развертывание изменений

Перед проверкой результата этой конфигурации мы повторно развернем приложение.

Откройте палитру команд Visual Studio Code, нажав клавишу F1.
Введите и выберите Git: зафиксировать в.
Введите сообщение фиксации Secure access и нажмите клавишу ВВОД.
Откройте палитру команд, нажав клавишу F1.
Введите и выберите Git: отправить и нажмите клавишу ВВОД.

После того как изменения отправлены, дождитесь выполнения процесса сборки и развертывания. После этого изменения должны быть видны в развернутом приложении.

Тестирование новых ограничений

После повторного развертывания приложения можно проверить эффективность новых ограничений.

В окне обозревателя Visual Studio Code вернитесь в раздел Статические веб-приложения и щелкните правой кнопкой мыши my-static-web-app-and-authn, а затем выберите Обзор веб-сайта, чтобы просмотреть приложение в браузере.
Если вы не вошли в систему, вместо списка продуктов вы должны увидеть сообщение о недостатке прав для доступа.
Выберите идентификатор Microsoft Entra в списке поставщиков проверки подлинности, чтобы войти в систему.

Вы увидите страницу ошибки 404, подобную следующей.
Нажмите кнопку "Назад" браузера, чтобы вернуться к приложению.
Чтобы войти в систему, в списке поставщиков проверки подлинности выберите GitHub.
При появлении запроса введите учетные данные GitHub, а затем на странице согласия Azure выберите Предоставление согласия.

Теперь вы вошли в систему и должны увидеть список продуктов.

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