Бөлісу құралы:


Руководство. Вызов API и отображение результатов

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

В этом руководстве рассматриваются следующие темы:

  • Вызов API и отображение результатов
  • Тестирование приложения

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

Вызов API и отображение результатов

  1. В разделе Pages откройте файл Index.cshtml.cs и замените все содержимое файла следующим фрагментом кода. Убедитесь, что проект соответствует имени проекта namespace .

    using System.Text.Json;
    using Microsoft.AspNetCore.Mvc.RazorPages;
    using Microsoft.Identity.Web;
    using Microsoft.Identity.Abstractions;
    
    namespace sign_in_webapp.Pages;
    
    [AuthorizeForScopes(ScopeKeySection = "DownstreamApi:Scopes")]
    public class IndexModel : PageModel
    {
        private readonly ILogger<IndexModel> _logger;
    
        private readonly IDownstreamApi  _downstreamWebApi;
    
        public IndexModel(ILogger<IndexModel> logger,
                            IDownstreamApi  downstreamWebApi)
        {
            _logger = logger;
            _downstreamWebApi = downstreamWebApi;
        }
    
        public async Task OnGet()
        {
            using var response = await _downstreamWebApi.CallApiForUserAsync("DownstreamApi").ConfigureAwait(false);
            if (response.StatusCode == System.Net.HttpStatusCode.OK)
            {
                var apiResult = await response.Content.ReadFromJsonAsync<JsonDocument>().ConfigureAwait(false);
                ViewData["ApiResult"] = JsonSerializer.Serialize(apiResult, new JsonSerializerOptions { WriteIndented = true });
            }
            else
            {
                var error = await response.Content.ReadAsStringAsync().ConfigureAwait(false);
                throw new HttpRequestException($"Invalid status code in the HttpResponseMessage: {response.StatusCode}: {error}");
            }
        }
    }
    
  2. Откройте Index.cshtml и добавьте следующий код в нижней части файла. Это определяет, как отображаются сведения, полученные от API:

    <p>Before rendering the page, the Page Model was able to make a call to Microsoft Graph's <code>/me</code> API for your user and received the following:</p>
    
    <p><pre><code class="language-js">@ViewData["ApiResult"]</code></pre></p>
    
    <p>Refreshing this page will continue to use the cached access token acquired for Microsoft Graph, which is valid for future page views will attempt to refresh this token as it nears its expiration.</p>
    

Тестирование приложения

Запустите приложение, выбрав "Пуск" без отладки.

  1. В зависимости от интегрированной среды разработки может потребоваться ввести URI приложения в браузер, например https://localhost:7100. После появления окна входа выберите учетную запись, в которой необходимо войти. Убедитесь, что учетная запись соответствует критериям регистрации приложения.

    Снимок экрана: параметры учетной записи для входа.

  2. При выборе учетной записи появится второе окно, указывающее, что код будет отправлен на ваш адрес электронной почты. Выберите "Отправить код" и проверка папку "Входящие".

    Снимок экрана, на котором показан экран для отправки кода в сообщение электронной почты пользователя.

  3. Откройте сообщение электронной почты от команды учетной записи майкрософт отправителя и введите 7-значный код одноразового использования. После ввода нажмите кнопку "Войти".

    Снимок экрана: процедура единого входа в код.

  4. Чтобы оставаться в системе, можно выбрать "Нет" или "Да".

    Снимок экрана: параметр о том, следует ли оставаться вошедшего в систему.

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

    Снимок экрана: запросы разрешений.

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

    Снимок экрана: результаты вызова API.

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

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

Следующие шаги

Узнайте, как использовать платформа удостоверений Майкрософт, создав веб-API с помощью следующей серии руководств.