Zelfstudie: Een API aanroepen en de resultaten weergeven

Artikel
01/19/2024

In de vorige zelfstudie hebt u de aanmeldings- en afmeldingservaringen aan de toepassing toegevoegd. De toepassing kan nu worden geconfigureerd om een web-API aan te roepen. Voor deze zelfstudie wordt de Microsoft Graph API aangeroepen om de profielgegevens van de aangemelde gebruiker weer te geven.

In deze zelfstudie:

De API aanroepen en de resultaten weergeven
De toepassing testen

Vereisten

Voltooiing van de vereisten en stappen in de zelfstudie: Aanmelding toevoegen aan een toepassing.

De API aanroepen en de resultaten weergeven

Open onder Pagina's het bestand Index.cshtml.cs en vervang de volledige inhoud van het bestand door het volgende fragment. Controleer of het project namespace overeenkomt met uw projectnaam.

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

Open Index.cshtml en voeg de volgende code toe aan de onderkant van het bestand. Hiermee wordt afgehandeld hoe de informatie die van de API wordt ontvangen, wordt weergegeven:

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

De toepassing testen

Start de toepassing door Starten te selecteren zonder foutopsporing.

Afhankelijk van uw IDE moet u mogelijk de toepassings-URI in de browser invoeren, bijvoorbeeld https://localhost:7100. Nadat het aanmeldingsvenster wordt weergegeven, selecteert u het account waarmee u zich wilt aanmelden. Zorg ervoor dat het account overeenkomt met de criteria van de app-registratie.
Wanneer u het account selecteert, verschijnt er een tweede venster dat aangeeft dat er een code naar uw e-mailadres wordt verzonden. Selecteer Code verzenden en schakel uw Postvak IN in.
Open het e-mailbericht van het microsoft-accountteam van de afzender en voer de code voor eenmalig gebruik van 7 cijfers in. Nadat u zich hebt ingevoerd, selecteert u Aanmelden.
Voor Aangemeld blijven kunt u Nee of Ja selecteren.
De toepassing vraagt toestemming om toegang te behouden tot gegevens die u toegang hebt gegeven tot gegevens en om u aan te melden en uw profiel te lezen. Selecteer Accepteren.
De volgende schermopname wordt weergegeven, waarmee wordt aangegeven dat u zich hebt aangemeld bij de toepassing en uw profielgegevens hebt geopend vanuit de Microsoft Graph API.

Afmelden bij de toepassing

Zoek de koppeling Afmelden in de rechterbovenhoek van de pagina en selecteer deze.
U wordt gevraagd een account te kiezen om u af te melden. Selecteer het account dat u hebt gebruikt om u aan te melden.
Er verschijnt een bericht dat aangeeft dat u bent afgemeld. U kunt nu het browservenster sluiten.

Volgende stappen

Meer informatie over het gebruik van het Microsoft Identity Platform door een web-API te bouwen met de volgende reeks zelfstudies.

Zelfstudie: Een web-API registreren bij het Microsoft Identity Platform

Share via