Быстрый старт: Вход пользователей в одностраничное приложение с помощью встроенного JavaScript SDK для аутентификации

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

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

Предпосылки

Включение открытых клиентских и встроенных потоков проверки подлинности

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

  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 typescript/native-auth/react-nextjs-sample

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

    npm install

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

  1. Откройте src/config/auth-config.ts и замените следующие заполнители значениями, полученными из Центра администрирования Microsoft Entra:

    • Найдите заполнитель Enter_the_Application_Id_Here, а затем замените его идентификатором клиентского приложения, зарегистрированного ранее.
    • Найдите заполнитель Enter_the_Tenant_Subdomain_Here , а затем замените его поддоменом клиента в Центре администрирования Microsoft Entra. Например, если основной домен клиента — это contoso.onmicrosoft.com, используйте contoso. Если у вас нет имени арендатора, узнайте, как посмотреть сведения о вашем арендаторе.

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

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

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

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

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

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

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

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

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

    cd typescript/native-auth/react-nextjs-sample/
npm run cors

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

    cd typescript/native-auth/react-nextjs-sample/
npm run dev

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

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

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

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

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

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

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

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

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

  • Last updated on