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

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

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

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

• Учетная запись Azure с активной подпиской. Если у вас еще нет учетной записи, пожалуйста, зарегистрируйтесь бесплатно.
• Эта учетная запись Azure должна иметь разрешения на управление приложениями. Любые из следующих ролей Microsoft Entra включают необходимые разрешения:
  • Администратор приложений
  • Разработчик приложений
  • Администратор облачных приложений
• Арендатор рабочей силы. Вы можете использовать каталог по умолчанию или настроить новый клиент.
• Visual Studio Code или другой редактор кода.

узел

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

ASP.NET Core

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

Python Flask

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

Добавление секрета клиента приложения или сертификата

узел

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

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

ASP.NET Core

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

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

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

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

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

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

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

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

Python Flask

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

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

При создании учетных данных для конфиденциального клиентского приложения:

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

• В целях тестирования можно создать самозаверяющий сертификат и настроить приложения для проверки подлинности с его помощью. Однако в рабочейнеобходимо приобрести сертификат, подписанный известным центром сертификации, а затем использовать Azure Key Vault для управления доступом к сертификатам и сроком их действия.

Клонирование или скачивание примера веб-приложения

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

узел

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

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

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

ASP.NET Core

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

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

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

Python Flask

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

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

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

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

Для входа пользователей в демонстрационном приложении, необходимо обновить его, добавив сведения о вашем приложении и арендаторе.

узел

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

Переменная	Описание	Примеры
Enter_the_Cloud_Instance_Id_Here	Облачный экземпляр Azure, в котором зарегистрировано приложение	https://login.microsoftonline.com/ (включите конечную косую черту)
Enter_the_Tenant_Info_here	Идентификатор клиента или основной домен	contoso.microsoft.com или aaaabbbb-0000-cccc-1111-dddd2222eeee
Enter_the_Application_Id_Here	Идентификатор клиента зарегистрированного приложения	00001111-aaaa-2222-bbbb-3333cccc4444
Enter_the_Client_Secret_Here	Секрет клиента приложения, которое вы зарегистрировали	A1b-C2d_E3f.H4i,J5k?L6m!N7o-P8q_R9s.T0u
Enter_the_Graph_Endpoint_Here	Экземпляр облачной API Microsoft Graph, на который ссылается ваше приложение	https://graph.microsoft.com/ (включите конечную косую черту)
Enter_the_Express_Session_Secret_Here	Случайная строка символов, используемая для подписывания файла cookie сеанса Express	A1b-C2d_E3f.H4...

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

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

ASP.NET Core

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 отпечатком сертификата, записанного заранее.

Python Flask

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. После согласия пользователя браузер перенаправляет пользователя обратно на домашнюю страницу приложения вместе с идентификатором и маркером доступа.

ASP.NET Core

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. Появится сообщение, указывающее, что вы выполнили выход. Теперь вы можете закрыть окно браузера.

Python Flask

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 Core

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

Python Flask

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

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

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

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

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

узел

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

ASP.NET Core

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

Python Django

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

Python Flask

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

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

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

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

При создании учетных данных для конфиденциального клиентского приложения:

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

• В целях тестирования можно создать самозаверяющий сертификат и настроить приложения для проверки подлинности с его помощью. Однако в рабочейнеобходимо приобрести сертификат, подписанный известным центром сертификации, а затем использовать Azure Key Vault для управления доступом к сертификатам и сроком их действия.

Предоставление согласия администратора

После регистрации приложение получает разрешение User.Read. Однако, поскольку клиент является внешним клиентом, сами пользователи клиента не могут согласиться с этим разрешением. Вы, как администратор клиента, должны предоставить это разрешение от имени всех пользователей в клиенте:

1. На странице регистрации приложений выберите созданное приложение (например, ciam-client-app), чтобы открыть страницу обзора .

2. В разделе Управлениевыберите разрешения API.

   1. Выберите предоставить согласие администратора для <вашего арендатора>, затем выберите Да.
   2. Выберите Обновить, а затем убедитесь, что предоставлено для <вашего имени клиента> отображается в разделе Состояние разрешения.

Клонирование или скачивание примера веб-приложения

узел

Чтобы получить пример приложения, можно клонировать его из 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
   

ASP.NET Core

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

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

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

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

Python Django

Чтобы получить пример приложения, можно клонировать его из 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
   

Python Flask

Чтобы получить пример приложения, можно клонировать его из 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 и замените его значением секрета приложения, скопированным ранее.

ASP.NET Core

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

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

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

3. В Управлениенайдите Enter_the_Tenant_Subdomain_Here и замените его поддоменом вашего арендатора. Например, если основной домен клиента caseyjensen@onmicrosoft.com, то введите значение casyjensen.

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

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

Python Django

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 перенаправления, аналогичный зарегистрированному ранее, должен соответствовать вашей конфигурации.

Python Flask

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.

ASP.NET Core

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

   dotnet run
   

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

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

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

   

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

Python Django

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

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, чтобы уведомить об этом систему. Затем пользователь перенаправляется обратно в веб-приложение.

Python Flask

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

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 Core

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

Python Django

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

Python Flask

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