Быстрый старт: Авторизация пользователей в одностраничное приложение React с использованием встроенной аутентификации (предварительная версия)

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

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

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

• Учетная запись Azure с активной подпиской. Если у вас еще нет учетной записи, Создайте ее бесплатно.
• Эта учетная запись Azure должна иметь разрешения на управление приложениями. Любые из следующих ролей Microsoft Entra включают необходимые разрешения:
  • Администратор приложений
  • Разработчик приложения
• Внешний арендатор. Чтобы создать его, выберите один из следующих методов:
  • Используйте расширение Microsoft Entra External ID, чтобы настроить внешний клиент непосредственно в Visual Studio Code. (Рекомендуется)
  • создание нового внешнего клиента в Центре администрирования Microsoft Entra.
• Поток пользователя. Дополнительные сведения см. в создании потоков пользователей самообслуживания для приложений в внешних арендаторах. Убедитесь, что поток пользователя включает следующие атрибуты пользователя:
  • заданное имя
  • Фамилия
• Зарегистрируйте новое приложение в Центре администрирования Microsoft Entra, настроенное только для учетных записей в этом каталоге организации. Дополнительные сведения см. в статье "Регистрация приложения ". Запишите следующие значения на странице обзора приложения для последующего использования:
  • Идентификатор приложения (клиента)
  • Идентификатор каталога (арендатора)
• Добавление приложения в поток пользователя
• Node.js.
• Visual Studio Code или другой кодовый редактор.

Включение потоков проверки подлинности для публичных клиентов и встроенных приложений

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

1. На странице регистрации приложений выберите регистрацию приложения, для которой требуется включить общедоступный клиент и собственные потоки проверки подлинности.
2. В разделе Управлениевыберите Аутентификация.
3. В разделе Дополнительные параметрыразрешить общедоступные потоки клиентов:
   1. Для включения следующих потоков для мобильных и настольных компьютеров выберите Да.
   2. Для включения функции собственной аутентификациивыберите Да.
4. Нажмите кнопку Сохранить.

Клонировать или скачать образец SPA

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

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

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

Кроме того, скачайте образец, затем извлеките его в путь к файлу с именем длиной менее 260 символов.

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

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

   cd API\React\ReactAuthSimple
   

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

   npm install
   

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

1. В редакторе кода откройте файл src\config.ts.

2. Найдите заполнитель Enter_the_Application_Id_Here и замените его идентификатором клиента, который был присвоен приложению, зарегистрированному ранее.

3. Сохраните изменения.

Настройка прокси-сервера CORS

Api собственной проверки подлинности не поддерживают совместного использования ресурсов между разными источниками (CORS), поэтому необходимо настроить прокси-сервер между приложением SPA и API.

Этот пример кода включает прокси-сервер CORS, который пересылает запросы к конечным точкам URL-адресов API встроенной аутентификации. Прокси-сервер CORS — это сервер Node.js, который прослушивает порт 3001.

Чтобы настроить прокси-сервер, откройте файл proxy.config.js, а затем найдите заполнитель:

• tenantSubdomain и замените его поддоменом каталога (клиента). Например, если основной домен клиента contoso.onmicrosoft.com, используйте contoso. Если у вас нет поддомена арендатора, узнайте, как просматривать сведения об арендаторе.
• tenantId и замените его идентификатором каталога (клиента). Если у вас нет идентификатора арендатора, узнайте, как прочитать сведения об арендаторе.

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

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

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

   cd API\React\ReactAuthSimple
   npm run cors
   

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

   cd API\React\ReactAuthSimple
   npm start
   

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

4. Чтобы зарегистрироваться для учетной записи, выберите Зарегистрироваться, а затем следуйте инструкциям.

5. После регистрации проверьте вход в систему и сброс пароля, выбрав Войти в систему и сброс пароля соответственно.

Связанное содержимое

• настройка обратного прокси-сервера для одностраничного приложения, использующего собственный API проверки подлинности с помощью приложения-функции Azure.
• Используйте Azure Front Door в качестве обратного прокси-сервера в производственной среде для одностраничного приложения, использующего встроенную проверку подлинности.
• создание одностраничного приложения React, использующего собственный API проверки подлинности с нуля.