教學課程：呼叫 API 並顯示結果

文章
06/22/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 存取您的設定檔詳細資料。