Краткое руководство. Вход пользователей в одностраничное приложение (SPA) и вызов API Microsoft Graph с помощью Blazor WebAssembly

В этом кратком руководстве используется пример одностраничного приложения Blazor WebAssembly (WASM) для входа пользователей с помощью потока кода авторизации с помощью ключа проверки подлинности для Exchange (PKCE) и вызова API Microsoft Graph. В этом примере для обработки проверки подлинности используется Microsoft.Authentication.WebAssembly.MSAL .

Необходимые компоненты

• Учетная запись Azure с активной подпиской. Если у вас еще нет учетной записи, создайте ее бесплатно.
• Пакет SDK для .NET
• Visual Studio 2022 или Visual Studio Code

Регистрация идентификаторов приложения и записей

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

1. Войдите в центр администрирования Microsoft Entra.

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

3. Перейдите к приложениям> удостоверений>Регистрация приложений выберите "Создать регистрацию".

4. Введите имя приложения, например identity-client-spa.

5. Для параметра Поддерживаемые типы учетных записей выберите Учетные записи только в этом каталоге организации. Для получения сведений о различных типах учетных записей выберите параметр "Справка ".

6. Выберите Зарегистрировать.

   

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

   

   Примечание.

   Поддерживаемые типы учетных записей можно изменить, ссылаясь на изменение учетных записей, поддерживаемых приложением.

Добавление URI перенаправления платформы

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

1. В разделе Управление выберите Проверка подлинности.
2. На странице конфигураций платформы выберите "Добавить платформу" и выберите параметр SPA.
3. Введите http://localhost:5000/authentication/login-callbackURI перенаправления.
4. Нажмите кнопку "Настроить", чтобы сохранить изменения.

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

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

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

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

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

Настройка проекта

1. В интегрированной среде разработки откройте папку проекта ms-identity-docs-code-dotnet /spa-blazor-wasm, содержащую пример.

2. Откройте wwwroot/appsettings.json и обновите следующие значения с информацией, записанной ранее в Центре администрирования.

   {
     "AzureAd": {
       "Authority": "https://login.microsoftonline.com/<Enter the tenant ID obtained from the Microsoft Entra admin center>",
       "ClientId": "Enter the client ID obtained from the Microsoft Entra admin center",
       "ValidateAuthority": true
     }
   }
   

   • Authority — центр — это URL-адрес, указывающий каталог, из который MSAL может запрашивать маркеры. Замените Enter_the_Tenant_Info_Here значением идентификатора каталога (клиента), записанного ранее.
   • ClientId — идентификатор приложения, который также называется клиентом. Замените текст в кавычках значением идентификатора приложения (клиента), записанного ранее.

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

Запустите проект с веб-сервером с помощью .NET:

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

   dotnet run
   

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

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

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

   

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

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

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

См. также

• Краткое руководство. Защита веб-API ASP.NET Core с помощью платформа удостоверений Майкрософт.

• Дополнительные сведения см. в руководстве по созданию SPA React SPA с нуля с помощью следующего руководства. Вход пользователей и вызов Microsoft Graph