Краткое руководство: Вход пользователей в образец веб-приложения

• Зарегистрируйте новое приложение в центре администрирования Microsoft Entra с помощью следующей конфигурации. Дополнительные сведения см. в разделе Регистрация приложения.
  • имя: identity-client-web-app
  • Поддерживаемые типы учетных записей: учетные записи в этом каталоге организации (только один клиент)
  • конфигурация платформы: Web
  • URI перенаправления: http://localhost:3000/auth/redirect
  • URL-адрес выхода фронтального канала: https://localhost:5001/signout-callback-oidc
• Node.js

• Зарегистрируйте новое приложение в центре администрирования Microsoft Entra с помощью следующей конфигурации. Дополнительные сведения см. в разделе Регистрация приложения.
  • Имя: identity-client-web-app
  • Поддерживаемые типы учетных записей: учетные записи в этом каталоге организации (только один клиент)
  • конфигурация платформы: Web
  • URI перенаправления: https://localhost:5001/signin-oidc
  • URL для выхода по фронтальному каналу: https://localhost:5001/signout-callback-oidc
• Минимальное требование пакета SDK для .NET 8.0

• Зарегистрируйте новое приложение в центре администрирования Microsoft Entra с помощью следующей конфигурации. Дополнительные сведения см. в разделе Регистрация приложения.
  • Название: identity-client-web-app
  • Поддерживаемые типы учетных записей: учетные записи в этом каталоге организации (только один клиент)
  • конфигурация платформы: Web
  • URI перенаправления: http://localhost:5000/getAToken
• Python 3 +

Создайте секрет клиента для зарегистрированного приложения. Приложение использует секрет клиента для подтверждения своей личности, когда запрашивает токены.

1. На странице регистрации приложений выберите созданное приложение (например, секрет клиента веб-приложения), чтобы открыть страницу обзора.
2. В разделе Управлениевыберите Сертификаты & секреты>секреты клиента>новый секрет клиента.
3. Введите в поле описания описание ключа клиента (например, ключ клиента веб-приложения).
4. В разделе "Срок действия истекает"выберите продолжительность действия секрета в соответствии с правилами безопасности вашей организации, а затем нажмите "Добавить".
5. Запишите значение секрета. Это значение используется для настройки на следующем шаге. Значение секрета не будет отображаться снова и не может быть извлечено ни одним способом после выхода из раздела Сертификаты и секреты. Обязательно запишите его.

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

1. Используя терминал, перейдите к каталогу, а затем создайте самозаверяющий сертификат с помощью следующей команды.

   dotnet dev-certs https -ep ./certificate.crt --trust
   

2. Вернитесь в Центр администрирования Microsoft Entra и в разделе Управлениевыберите Сертификаты, & секреты,>Загрузить сертификат.

3. Перейдите на вкладку сертификатов (0), а затем выберите Загрузить сертификат.

4. Появится панель отправки сертификата. Используйте значок, чтобы перейти к файлу сертификата, созданному на предыдущем шаге, и выберите Открыть.

5. Введите описание сертификата, например сертификат для aspnet-web-app, и выберите Добавить.

6. Запишите значение отпечатка для использования на следующем шаге.

Создайте секрет клиента для зарегистрированного приложения. Приложение использует секрет клиента для подтверждения своей личности, когда запрашивает токены.

1. На странице регистрации приложений выберите созданное приложение (например, секрет клиента веб-приложения), чтобы открыть страницу обзора.
2. В разделе Управлениевыберите Сертификаты & секреты>секреты клиента>новый секрет клиента.
3. Введите в поле описания описание ключа клиента (например, ключ клиента веб-приложения).
4. В разделе "Срок действия истекает"выберите продолжительность действия секрета в соответствии с правилами безопасности вашей организации, а затем нажмите "Добавить".
5. Запишите значение секрета. Это значение используется для настройки на следующем шаге. Значение секрета не будет отображаться снова и не может быть извлечено ни одним способом после выхода из раздела Сертификаты и секреты. Обязательно запишите его.

• Скачайте файл .zip, затем распакуйте его в папку с именем, содержащим менее 260 символов, или клонируйте репозиторий:

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

  git clone https://github.com/Azure-Samples/ms-identity-node.git
  

• Скачайте файл .zip, а затем извлеките его в путь к файлу, где длина имени меньше 260 символов, или клонируйте репозиторий:

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

  git clone https://github.com/Azure-Samples/ms-identity-docs-code-dotnet.git
  

• Скачайте пример кода Python затем извлеките его в путь к файлу, где длина имени меньше 260 символов или клонируйте репозиторий:

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

git clone https://github.com/Azure-Samples/ms-identity-docs-code-python/

В папке ms-identity-node откройте файл App/.env и замените следующие заполнители:

После внесения изменений файл должен выглядеть следующим фрагментом кода:

CLOUD_INSTANCE=https://login.microsoftonline.com/
TENANT_ID=aaaabbbb-0000-cccc-1111-dddd2222eeee
CLIENT_ID=00001111-aaaa-2222-bbbb-3333cccc4444
CLIENT_SECRET=A1b-C2d_E3f.H4...

REDIRECT_URI=http://localhost:3000/auth/redirect
POST_LOGOUT_REDIRECT_URI=http://localhost:3000

GRAPH_API_ENDPOINT=https://graph.microsoft.com/

EXPRESS_SESSION_SECRET=6DP6v09eLiW7f1E65B8k

1. В интегрированной среде разработки откройте папку проекта, ms-identity-docs-code-dotnet\web-app-aspnet, содержащую пример.

2. Откройте appsettings.json и замените содержимое файла следующим фрагментом кода;

   {
   "AzureAd": {
     "Instance": "https://login.microsoftonline.com/",
     "TenantId": "Enter the tenant ID obtained from the Microsoft Entra admin center",
     "ClientId": "Enter the client ID obtained from the Microsoft Entra admin center",
     "ClientCredentials": [
       {
         "SourceType": "StoreWithThumbprint",
         "CertificateStorePath": "CurrentUser/My",
         "CertificateThumbprint": "Enter the certificate thumbprint obtained the Microsoft Entra admin center"
       }   
     ],
     "CallbackPath": "/signin-oidc"
   },
     "DownstreamApis": {
       "MicrosoftGraph" :{
         "BaseUrl": "https://graph.microsoft.com/v1.0/",
         "RelativePath": "me",
         "Scopes": [ 
           "user.read" 
         ]
      }
     },
     "Logging": {
       "LogLevel": {
         "Default": "Information",
         "Microsoft.AspNetCore": "Warning"
       }
     },
     "AllowedHosts": "*"
   }
   

   • TenantId — идентификатор клиента, в котором зарегистрировано приложение. Замените текст в кавычках на Directory (tenant) ID, записанный ранее на странице обзора зарегистрированного приложения.
   • ClientId — идентификатор приложения, который также называется клиентом. Замените текст в кавычках значением Application (client) ID, записанным ранее на странице обзора зарегистрированного приложения.
   • ClientCertificates . Самозаверяющий сертификат используется для проверки подлинности в приложении. Замените текст из CertificateThumbprint отпечатком сертификата, записанного заранее.

1. Откройте приложение, скачаемое в интегрированной среде разработки, и перейдите в корневую папку примера приложения.

   cd flask-web-app
   

2. Создайте файл .env в корневой папке проекта с помощью .env.sample.entra-id в качестве руководства.

   # The following variables are required for the app to run.
   CLIENT_ID=<Enter_your_client_id>
   CLIENT_SECRET=<Enter_your_client_secret>
   AUTHORITY=<Enter_your_authority_url>
   

   • Установите значение CLIENT_ID как идентификатор приложения (клиента) для зарегистрированного приложения, который доступен на странице обзора.
   • Установите значение CLIENT_SECRET в ключ клиента, созданный в разделе Сертификаты и секреты для зарегистрированного приложения.
   • Установите значение AUTHORITY на https://login.microsoftonline.com/<TENANT_GUID>. Идентификатор каталога (клиента) с ID доступен на странице обзора регистрации приложения.

   Переменные среды упоминаются в app_config.pyи хранятся в отдельном .env файле, чтобы они не попадали в систему управления версиями. Предоставленный файл .gitignore предотвращает добавление файла .env в репозиторий.

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

   cd App
   npm install
   npm start
   

2. Перейдите к http://localhost:3000/.

3. Выберите войти, чтобы запустить процесс входа.

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

Как работает приложение

В примере размещен веб-сервер на локальном узле, порт 3000. Когда веб-браузер обращается к этому адресу, приложение отображает домашнюю страницу. После того как пользователь выберет Войти, приложение перенаправит браузер на экран входа в Microsoft Entra по URL-адресу, созданному библиотекой MSAL Node. После согласия пользователя браузер перенаправляет пользователя обратно на домашнюю страницу приложения вместе с идентификатором и маркером доступа.

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

   cd ms-identity-docs-code-dotnet/web-app-aspnet
   dotnet run
   

2. Скопируйте URL-адрес https, который отображается в терминале, например https://localhost:5001, и вставьте его в браузер. Рекомендуется использовать частный или инкогнито браузерный сеанс.

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

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

   

Выход из приложения

1. Найдите ссылку "Выйти из системы" в правом верхнем углу страницы и выберите её.
2. Вас просят выбрать учетную запись для выхода. Выберите учетную запись, используемую для входа.
3. Появится сообщение, указывающее, что вы выполнили выход. Теперь вы можете закрыть окно браузера.

1. Создайте виртуальную среду для приложения:

   • Для Windowsвыполните следующие команды:

   py -m venv .venv
   .venv\scripts\activate
   

   • Для macOS/Linuxвыполните следующие команды:

   python3 -m venv .venv
   source .venv/bin/activate
   

2. Установите требования с помощью pip:

   pip install -r requirements.txt
   

3. Запустите приложение из командной строки. Убедитесь, что приложение работает на том же порту, что и URI перенаправления, настроенный ранее.

   flask run --debug --host=localhost --port=5000
   

4. Скопируйте URL-адрес https, отображаемый в терминале, например, https://localhost:5000, и вставьте его в браузер. Рекомендуется использовать частный или инкогнито браузерный сеанс.

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

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

   

7. Откроется следующий снимок экрана, указывающий, что вы успешно вошли в приложение.

Как работает приложение

На следующей схеме показано, как работает пример приложения:

1. Приложение использует пакет identity для получения токена доступа на платформе идентификаций Microsoft. Этот пакет основан на библиотеке проверки подлинности Майкрософт (MSAL) для Python для упрощения проверки подлинности и авторизации в веб-приложениях.

2. Маркер доступа, получаемый на предыдущем шаге, используется в качестве маркера носителя для проверки подлинности пользователя при вызове API Microsoft Graph.

• Узнайте, как создать веб-приложение Node.js, которое выполняет вход пользователей и вызывает API Microsoft Graph в учебнике . Выполняйте вход пользователей и получайте токен Microsoft Graph в веб-приложении Node.js & Express.

• Узнайте, создавая это веб-приложение ASP.NET в рамках серии обучающих материалов : Урок. Регистрация приложения в платформе идентификации Microsoft.
• Краткое руководство: защита веб-API ASP.NET Core с помощью Платформы удостоверений Microsoft.
• Быстрый старт: Развертывание веб-приложения ASP.NET в Azure App Service

• Узнайте, как создать веб-приложение на Python, которое осуществляет вход пользователей и вызывает защищенный веб-API в руководстве : веб-приложение, которое осуществляет вход пользователей.

• Зарегистрируйте новое приложение в Центре администрирования Microsoft Entra со следующей конфигурацией и запишите его идентификаторы на странице обзора приложения. Дополнительные сведения см. в разделе Регистрация приложения.
  • имя: identity-client-web-app
  • Поддерживаемые типы учетных записей: учетные записи в этом каталоге организации (только один клиент)
  • конфигурация платформы: Web
  • URI перенаправления: http://localhost:3000/auth/redirect
• Добавление приложения в поток пользователя
• Node.js.

• Зарегистрируйте новое приложение в Центре администрирования Microsoft Entra со следующей конфигурацией и запишите его идентификаторы на странице обзора приложения. Дополнительные сведения см. в разделе Регистрация приложения.
  • имя: identity-client-web-app
  • Поддерживаемые типы учетных записей: учетные записи в этом каталоге организации (только один клиент)
  • конфигурация платформы: Web
  • URI перенаправления: https://localhost:7274/signin-oidc
  • URL-адрес выхода фронтального канала: https://localhost:7274/signout-callback-oidc
• Добавление приложения в поток пользователя
• Минимальная версия пакета SDK для .NET 8.0 .

• Зарегистрируйте новое приложение в Центре администрирования Microsoft Entra со следующей конфигурацией и запишите его идентификаторы на странице обзора приложения. Дополнительные сведения см. в разделе Регистрация приложения.
  • имя: identity-client-web-app
  • Поддерживаемые типы учетных записей: учетные записи в этом каталоге организации (только один клиент)
  • конфигурация платформы: Web
  • URI перенаправления: http://localhost:5000/getAToken
• Добавление приложения в поток пользователя
• Python 3+.

• Зарегистрируйте новое приложение в Центре администрирования Microsoft Entra со следующей конфигурацией и запишите его идентификаторы на странице обзора приложения. Дополнительные сведения см. в разделе Регистрация приложения.
  • Имя: identity-client-web-app
  • Поддерживаемые типы учетных записей: учетные записи в этом каталоге организации (только один клиент)
  • конфигурация платформы: Web
  • URI перенаправления: http://localhost:3000/getAToken
• Добавление приложения в поток пользователя
• Python 3+

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

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

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

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

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

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

   cd 1-Authentication\5-sign-in-express\App
   

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

   npm install
   

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

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

  git clone https://github.com/Azure-Samples/ms-identity-ciam-dotnet-tutorial.git
  

• Скачайтефайл .zip. Извлеките его в каталог, где длина названия файла меньше 260 символов.

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

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

  git clone https://github.com/Azure-Samples/ms-identity-docs-code-python.git
  

• Скачайтефайл .zip. Извлеките его в каталог, где длина названия файла меньше 260 символов.

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

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

   cd django-web-app
   

2. Настройка виртуальной среды:

   • Для Windowsвыполните следующие команды:

   py -m venv .venv
   .venv\scripts\activate
   

   • Для macOS/Linuxвыполните следующие команды:

   python3 -m venv .venv
   source .venv/bin/activate
   

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

   python3 -m pip install -r requirements.txt
   

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

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

  git clone https://github.com/Azure-Samples/ms-identity-docs-code-python.git
  

• Скачайтефайл .zip. Извлеките его в каталог, где длина названия файла меньше 260 символов.

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

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

   cd flask-web-app
   

2. Настройка виртуальной среды:

   • Для Windowsвыполните следующие команды:

   py -m venv .venv
   .venv\scripts\activate
   

   • Для macOS/Linuxвыполните следующие команды:

   python3 -m venv .venv
   source .venv/bin/activate
   

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

   python3 -m pip install -r requirements.txt
   

1. В редакторе кода откройте файл приложения\authConfig.js.

2. Найдите плейсхолдер:

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

1. Перейдите в корневой каталог, содержащий пример приложения ASP.NET Core:

   cd 1-Authentication\1-sign-in-aspnet-core-mvc
   

2. Откройте файл appsettings.json.

3. В Управлениенайдите Enter_the_Tenant_Subdomain_Here и замените его поддоменом вашего арендатора. Например, если основной домен клиента [email protected], то введите значение casyjensen.

4. Найдите значение Enter_the_Application_Id_Here и замените его идентификатором приложения (clientId) приложения, зарегистрированного в Центре администрирования Microsoft Entra.

5. Замените Enter_the_Client_Secret_Here значением секрета клиента, настроенным в Добавление секрета клиента приложения.

1. Откройте файлы проекта в Visual Studio Code или редакторе, который вы используете.

2. Создайте файл .env в корневой папке проекта, используя файл .env.sample.external-id в качестве руководства.

3. В файле .env укажите следующие переменные среды:

   1. CLIENT_ID, который является идентификатором клиента приложения, зарегистрированного ранее.
   2. CLIENT_SECRET, которое является значением секрета приложения, которое вы скопировали ранее.
   3. AUTHORITY, который является URL-адресом, определяющим центр авторизации токена. Он должен иметь формат https://{поддомен}.ciamlogin.com/{поддомен}.onmicrosoft.com. Замените поддомен на поддомен каталога (арендатора). Например, если основной домен клиента contoso.onmicrosoft.com, используйте contoso. Если у вас нет поддомена арендатора, узнайте, как просматривать сведения о вашем арендаторе.
   4. REDIRECT_URI, URI перенаправления, аналогичный зарегистрированному ранее, должен соответствовать вашей конфигурации.

1. Откройте файлы проекта в Visual Studio Code или редакторе, который вы используете.

2. Создайте файл .env в корневой папке проекта, используя файл .env.sample.external-id в качестве руководства.

3. В файле .env укажите следующие переменные среды:

   • CLIENT_ID, который является идентификатором клиента приложения, зарегистрированного ранее.
   • CLIENT_SECRET, которое является значением секрета приложения, которое вы скопировали ранее.
   • AUTHORITY, который является URL-адресом, идентифицирующим орган по токенам. Он должен иметь формат https://{поддомен}.ciamlogin.com/{поддомен}.onmicrosoft.com. Замените поддомен на поддомен каталога (арендатора). Например, если основной домен клиента contoso.onmicrosoft.com, используйте contoso. Если у вас нет поддомена арендатора, узнайте, как просматривать сведения о вашем арендаторе.

4. Убедитесь, что URI перенаправления правильно настроен. URI перенаправления, зарегистрированный ранее, должен соответствовать конфигурации. По умолчанию в этом примере путь перенаправления URI установлен на /getAToken. Эта конфигурация находится в файле app_config.py в виде REDIRECT_PATH.

Теперь можно протестировать пример веб-приложения Node.js. Необходимо запустить сервер Node.js и получить доступ к нему через браузер в http://localhost:3000.

1. В терминале выполните следующую команду:

   npm start 
   

2. Откройте браузер, а затем перейдите к http://localhost:3000. Вы увидите страницу, аналогичную следующему снимку экрана:

   

3. После завершения загрузки страницы выберите Войти при появлении запроса.

4. На странице входа в систему введите адрес электронной почты, выберите Далее, введите пароль, а затем выберите Войти. Если у вас нет учетной записи, выберите Нет учетной записи? Создайте одну ссылку, которая запускает поток регистрации.

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

   

6. Выберите Выйти, чтобы выйти пользователя из веб-приложения, или выберите Просмотреть утверждения токена идентификатора, чтобы увидеть утверждения, возвращаемые Microsoft Entra.

Принцип работы

Когда пользователи выбирают ссылку Войти, приложение инициирует запрос проверки подлинности и перенаправляет пользователей на Microsoft Entra External ID. На появившейся странице входа или регистрации после успешного входа пользователя или создания учетной записи Microsoft Entra External ID возвращает маркер идентификатора приложению. Приложение проверяет маркер идентификатора, считывает утверждения и возвращает безопасную страницу пользователям.

Когда пользователи выбирают ссылку "Выйти из аккаунта", приложение очищает сеанс, а затем перенаправляет пользователя на конечную точку выхода Microsoft Entra External ID, чтобы уведомить, что пользователь вышел из системы.

Если вы хотите создать приложение, аналогичное примеру, выполните шаги, описанные в статье Авторизация пользователей в вашем веб-приложении Node.js.

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

   dotnet run
   

2. Откройте веб-браузер и перейдите к https://localhost:7274.

3. Войдите с учетной записью, зарегистрированной во внешнем клиенте.

4. После входа отображаемое имя показывается рядом с кнопкой Выход, как показано на следующем снимке экрана.

   

5. Чтобы выйти из приложения, нажмите кнопку Выйти.

Запустите приложение, чтобы просмотреть интерфейс входа во время игры.

1. В терминале выполните следующую команду:

   python manage.py runserver localhost:5000                                             
   

   Вы можете использовать нужный номер порта.

2. Откройте браузер, а затем перейдите к http://localhost:5000. Вы увидите страницу, аналогичную следующему снимку экрана:

   

3. После завершения загрузки страницы выберите ссылку Войти. Вам будет предложено войти.

4. На странице входа в систему введите адрес электронной почты, выберите Далее, введите пароль, а затем выберите Войти. Если у вас нет учетной записи, выберите Нет учетной записи? Создайте одну ссылку, которая запускает поток регистрации.

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

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

   

7. Выберите выход, чтобы выйти из учетной записи пользователя в веб-приложении, или выберите Обратиться к нижестоящему API, чтобы выполнить вызов конечной точки Microsoft Graph.

Принцип работы

Когда пользователи выбирают ссылку Войти, приложение инициирует запрос проверки подлинности и перенаправляет пользователей на Microsoft Entra External ID. Затем пользователь войдёт или зарегистрируется на появившейся странице. После предоставления необходимых учетных данных и согласия на необходимые области внешний идентификатор Microsoft Entra перенаправляет пользователя обратно в веб-приложение с кодом авторизации. Затем веб-приложение использует этот код авторизации для получения токена из Microsoft Entra External ID.

Когда пользователи выбирают ссылку Выход, приложение очищает свой сеанс и перенаправляет пользователя на конечную точку выхода Microsoft Entra External ID, чтобы уведомить об этом систему. Затем пользователь перенаправляется обратно в веб-приложение.

Запустите приложение, чтобы просмотреть интерфейс входа во время игры.

1. В терминале выполните следующую команду:

   python3 -m flask run --debug --host=localhost --port=3000
   

   Вы можете использовать нужный порт. Это должно быть похоже на порт URI перенаправления, зарегистрированного ранее.

2. Откройте браузер, а затем перейдите к http://localhost:3000. Вы увидите страницу, аналогичную следующему снимку экрана:

   

3. После завершения загрузки страницы выберите ссылку Войти. Вам будет предложено войти.

4. На странице входа в систему введите адрес электронной почты, выберите Далее, введите пароль, а затем выберите Войти. Если у вас нет учетной записи, выберите Нет учетной записи? Создайте одну ссылку, которая запускает поток регистрации.

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

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

   

7. Выберите выход, чтобы выйти из учетной записи пользователя в веб-приложении, или выберите Обратиться к нижестоящему API, чтобы выполнить вызов конечной точки Microsoft Graph.

Принцип работы

Когда пользователи выбирают ссылку Войти, приложение инициирует запрос проверки подлинности и перенаправляет пользователей на Microsoft Entra External ID. Затем пользователь войдёт или зарегистрируется на появившейся странице. После предоставления необходимых учетных данных и согласия на необходимые области внешний идентификатор Microsoft Entra перенаправляет пользователя обратно в веб-приложение с кодом авторизации. Затем веб-приложение использует этот код авторизации для получения токена из Microsoft Entra External ID.

Когда пользователи выбирают ссылку Выход, приложение очищает свой сеанс и перенаправляет пользователя на конечную точку выхода Microsoft Entra External ID, чтобы уведомить об этом систему. Затем пользователь перенаправляется обратно в веб-приложение.

• Авторизация пользователей в вашем веб-приложении Node.js
• Быстрый старт по - вход пользователей и вызов веб-API в примере веб-приложения Node.js
• Быстрый старт - Изменение профиля в образце веб-приложения Node.js

• Используйте нашу серию учебников с несколькими частями, чтобы создать это веб-приложение ASP.NET с нуля
• Включить сброс пароля
• Настройка фирменной символики по умолчанию

• Выполнение входа пользователей с помощью примера веб-приложения Flask
• Включить сброс пароля
• Настройка фирменной символики по умолчанию

• Включить сброс пароля
• Настройка фирменной символики по умолчанию