Добавление проверки подлинности на статический сайт в Статические веб-приложения Azure

Эта статья является частью двух в серии, которая показывает, как развернуть первый сайт на Статические веб-приложения Azure. Ранее вы создали и развернули статический сайт с выбранной веб-платформой .

В этой статье вы добавите проверку подлинности на сайт и запустите сайт локально перед развертыванием в облаке.

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

Это руководство продолжается из предыдущего руководства и имеет те же предварительные требования.

Проверка подлинности и авторизация

Статические веб-приложения Azure упрощает использование распространенных поставщиков проверки подлинности, таких как Microsoft Entra и Google, без написания кода, связанного с безопасностью.

Примечание.

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

В этой статье вы настроите сайт для проверки подлинности идентификатор Microsoft Entra.

Добавление проверки подлинности

В последней staticwebapp.config.json статье вы создали файл. Этот файл управляет множеством функций для Статические веб-приложения Azure, включая проверку подлинности.

1. Обновите конфигурацию staticwebapp.config.json , соответствующую следующей конфигурации.

   {
     "navigationFallback": {
       "rewrite": "/index.html"
     },
     "routes": [
       {
         "route": "/*",
         "allowedRoles": [ "authenticated" ]
       }
     ],
     "responseOverrides": {
       "401": {
         "statusCode": 302,
         "redirect": "/.auth/login/aad"
       }
     }
   }
   

   В routes этом разделе можно ограничить доступ к именованным ролям. Существует две предопределенные роли: authenticated и anonymous. Если у подключенного пользователя нет разрешенной роли, сервер возвращает ответ "401 Несанкционированный".

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

2. Запустите сайт локально.

   Чтобы запустить сайт локально, выполните команду Статические веб-приложения CLIstart.

   npx swa start
   

   Эта команда запускает эмулятор Статические веб-приложения Azure вhttp://localhost:4280.

   Этот URL-адрес отображается в окне терминала после запуска службы.

3. Выберите URL-адрес для перехода на сайт.

   После открытия сайта в браузере отобразится страница входа в локальную проверку подлинности.

   

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

4. Введите имя пользователя, а затем нажмите кнопку "Войти".

   После проверки подлинности отобразится сайт.

Развертывание сайта в Azure

Разверните сайт так же, как и в последнем руководстве.

1. Создание сайта:

   npx swa build
   

2. Разверните сайт в статическом веб-приложении:

   npx swa deploy --app-name swa-demo-site
   

   URL-адрес сайта отображается после завершения развертывания. Выберите URL-адрес сайта, чтобы открыть сайт в браузере. Отображается стандартная страница входа в Microsoft Entra ID:

   

   Войдите с помощью учетной записи Майкрософт.

Очистка ресурсов (необязательно)

Если вы не продолжаете работу с другими руководствами, удалите группу ресурсов и ресурсы Azure:

az group delete -n swa-tutorial

При удалении группы ресурсов удалите все содержащиеся в ней ресурсы. Отменить это действие невозможно.

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

• Проверка подлинности и авторизация
• Настраиваемая проверка подлинности