Tutoriel : Appeler une API et afficher les résultats

Article
01/22/2024

Dans le tutoriel précédent, vous avez ajouté les expériences de connexion et de déconnexion à l’application. L’application peut maintenant être configurée pour appeler une API web. Dans le cadre de ce tutoriel, l’API Microsoft Graph est appelé pour afficher les informations de profil de l’utilisateur connecté.

Dans ce tutoriel, vous allez :

Appeler l’API et afficher les résultats
Test de l’application

Prérequis

Achèvement des prérequis et des étapes du Tutoriel : Ajouter une connexion à une application.

Appeler l’API et afficher les résultats

Sous Pages, ouvrez le fichier Index.cshtml.cs et remplacez l’intégralité du contenu du fichier par l’extrait de code suivant. Vérifiez que le projet namespace correspond au nom de votre projet.

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

Ajoutez l’exemple de code suivant au bas du fichier Index.cshtml. Cette opération gère la façon dont les informations reçues de l’API sont affichées :

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

Test de l’application

Démarrez l’application en sélectionnant Démarrer sans débogage.

En fonction de votre IDE, vous devrez peut-être entrer l’URI d’application dans le navigateur, par exemple https://localhost:7100. Une fois que la fenêtre de connexion s’affiche, sélectionnez le compte auquel vous souhaitez vous connecter. Vérifiez que le compte correspond aux critères de l’inscription de l’application.
Lorsque vous sélectionnez le compte, une deuxième fenêtre s’affiche pour indiquer qu’un code sera envoyé à votre adresse e-mail. Sélectionnez Envoyer le code, puis vérifiez votre boîte de réception e-mail.
Ouvrez l’e-mail de l’équipe du compte Microsoft de l’expéditeur et entrez le code à usage unique à 7 chiffres. Une fois celui-ci entré, sélectionnez Se connecter.
Pour Rester connecté, vous pouvez sélectionner Non ou Oui.
L’application demande l’autorisation de conserver l’accès aux données auxquelles vous lui avez donné accès, de vous identifier et de lire votre profil. Cliquez sur Accepter.
La capture d’écran suivante s’affiche, indiquant que vous êtes connecté à l’application et que vous avez accédé aux détails de votre profil à partir de l’API Microsoft Graph.

Se déconnecter de l’application

Recherchez le lien Se déconnecter en haut à droite de la page et sélectionnez-le.
Vous êtes invité à choisir un compte à partir duquel vous souhaitez vous déconnecter. Sélectionnez le compte que vous avez utilisé pour vous connecter.
Un message s’affiche, indiquant que vous vous êtes déconnecté. Vous pouvez maintenant fermer la fenêtre du navigateur.

Étapes suivantes

Découvrez comment utiliser la plateforme d’identités Microsoft en créant une API web avec la série de tutoriels suivante.

Tutoriel : Inscrire une API web auprès de la plateforme d’identités Microsoft

Partage via