教程：调用 API 并显示结果

项目
04/03/2024

在上一教程中，你向应用程序添加了登录和注销体验。现在可以将应用程序配置为调用 Web API。在本教程中，将调用 Microsoft Graph API 来显示已登录用户的个人资料信息。

本教程的内容：

调用 API 并显示结果
测试应用程序

先决条件

完成教程：向应用程序添加登录中的先决条件和步骤。

调用 API 并显示结果

在“页面”下，打开 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}");
        }
    }
}

打开 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>

测试应用程序

通过选择“开始执行(不调试)”启动应用程序。

根据 IDE 的不同，可能需要在浏览器中输入应用程序 URI，例如 https://localhost:7100。登录窗口出现后，选择要用于登录的帐户。确保帐户符合应用注册的条件。
选择帐户后，将显示第二个窗口，指示将向电子邮件地址发送代码。选择“发送代码”，然后检查电子邮件收件箱。
打开来自发件人“Microsoft 帐户团队”的电子邮件，然后输入 7 位数的一次性代码。输入后，选择“登录”。
对于“保持登录状态”，可以选择“否”或“是”。
该应用程序将请求权限，以保持访问你已授权访问的数据、登录和阅读配置文件的权限。选择“接受”。
将显示以下屏幕截图，表明你已登录应用程序且已从 Microsoft Graph API 访问个人资料详细信息。