Självstudie: Anropa ett API och visa resultatet

Artikel
01/19/2024

I den föregående självstudien lade du till inloggnings- och utloggningsfunktionerna i programmet. Programmet kan nu konfigureras för att anropa ett webb-API. I den här självstudien anropas Microsoft Graph API för att visa profilinformationen för den inloggade användaren.

I den här självstudien:

Anropa API:et och visa resultatet
Testa programmet

Förutsättningar

Slutförande av förutsättningarna och stegen i Självstudie: Lägg till inloggning i ett program.

Anropa API:et och visa resultatet

Under Sidor öppnar du filen Index.cshtml.cs och ersätter hela innehållet i filen med följande kodfragment. Kontrollera att projektet namespace matchar projektnamnet.

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}");
        }
    }
}

Öppna Index.cshtml och lägg till följande kod längst ned i filen. Detta hanterar hur informationen som tas emot från API:et visas:

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

Testa programmet

Starta programmet genom att välja Starta utan felsökning.

Beroende på din IDE kan du behöva ange programmets URI i webbläsaren, till exempel https://localhost:7100. När inloggningsfönstret visas väljer du det konto som du vill logga in med. Se till att kontot matchar villkoren för appregistreringen.
När du väljer kontot visas ett andra fönster som anger att en kod skickas till din e-postadress. Välj Skicka kod och markera inkorgen för e-post.
Öppna e-postmeddelandet från avsändarens Microsoft-kontoteam och ange den sjusiffriga engångskoden. När du har angett väljer du Logga in.
För Håll dig inloggad kan du välja Antingen Nej eller Ja.
Programmet begär behörighet att behålla åtkomsten till data som du har gett den åtkomst till och logga in dig och läsa din profil. Välj Acceptera.
Följande skärmbild visas som anger att du har loggat in på programmet och har använt din profilinformation från Microsoft Graph-API:et.

Logga ut från programmet

Hitta länken Logga ut i det övre högra hörnet på sidan och välj den.
Du uppmanas att välja ett konto att logga ut från. Välj det konto som du använde för att logga in.
Ett meddelande visas som anger att du har loggat ut. Nu kan du stänga webbläsarfönstret.

Nästa steg

Lär dig hur du använder Microsofts identitetsplattform genom att skapa ett webb-API med följande självstudieserie.

Självstudie: Registrera ett webb-API med Microsofts identitetsplattform

Dela via