Краткое руководство: Вход пользователей в одностраничное приложение React с помощью нативной аутентификации

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

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

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

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

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

  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. После регистрации проверьте вход в систему и сброс пароля, выбрав Войти в систему и сброс пароля соответственно.

Включение входа с помощью псевдонима или имени пользователя

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

Вы можете задать имена пользователей для учетных записей вручную через Центр администрирования Microsoft Entra или автоматизировать это в вашем приложении с помощью API Microsoft Graph.

Выполните действия, описанные в статье " Вход" с псевдонимом или именем пользователя , чтобы пользователи могли войти с помощью имени пользователя в приложении:

  1. Включите имя пользователя в входе.
  2. Создайте пользователей с именем пользователя в Центре администрирования или обновите существующих пользователей, добавив имя пользователя. Кроме того, вы также можете автоматизировать создание и обновление пользователей в приложении с помощью API Microsoft Graph.

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

  • Last updated on