Tutorial: Llamar a una API y mostrar los resultados

En el tutorial anterior, agregó las experiencias de inicio y cierre de sesión a la aplicación. La aplicación ahora se puede configurar para llamar a una API web. Para los fines de este tutorial, se llama a la Microsoft Graph API para mostrar la información del perfil del usuario que ha iniciado sesión.

En este tutorial, aprenderá a:

• Llamar a la API y mostrar los resultados
• Prueba de la aplicación

Requisitos previos

• Completar los requisitos previos y pasos en Tutorial: Añadir inicio de sesión a una aplicación.

Llamar a la API y mostrar los resultados

1. En Páginas, abra el archivo Index.cshtml.cs y reemplace todo el contenido del archivo por el siguiente fragmento de código. Compruebe que el proyecto namespace coincide con el nombre del proyecto.

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

2. Abra Index.cshtml y añada el siguiente código al final del archivo. Esto controla cómo se muestra la información recibida de la 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>
   

Prueba de la aplicación

Visual Studio

Para iniciar la aplicación, seleccione Iniciar sin depurar.

Visual Studio Code

1. Inicie la aplicación escribiendo lo siguiente en el terminal:

   .NET 6.0

   dotnet run
   

   .NET 7.0

   dotnet run --launch-profile https
   

Visual Studio para Mac

Para iniciar la aplicación, seleccione el icono Reproducir.

Nota:

Visual Studio para Mac está programado para su retirada antes del 31 de agosto de 31, 2024 de acuerdo con la directiva de ciclo de vida moderno de Microsoft. Visual Studio para Mac 17.6 seguirá siendo compatible hasta el 31 de agosto de 2024, con actualizaciones de mantenimiento para problemas de seguridad y plataformas actualizadas de Apple. Consulte ¿Qué ocurre Visual Studio para Mac? para obtener más información.

1. En función de su IDE, es posible que tenga que escribir el URI de la aplicación en el explorador, por ejemplo https://localhost:7100. Una vez que aparezca la ventana de inicio de sesión, seleccione la cuenta con la que iniciar sesión. Asegúrese de que la cuenta coincide con los criterios del registro de la aplicación.

   

2. Al seleccionar la cuenta, aparece una segunda ventana que indica que se enviará un código a su dirección de correo electrónico. Seleccione Enviar código y compruebe la bandeja de entrada de correo electrónico.

   

3. Abra el correo electrónico del remitente equipo de cuentas Microsoft, e introduzca el código de un solo uso de 7 dígitos. Una vez introducido, seleccione Iniciar sesión.

   

4. En Mantener sesión iniciada, puede seleccionar No o Sí.

   

5. La aplicación solicita permiso para mantener el acceso a los datos a los que usted le haya dado acceso, así como para iniciar sesión y leer su perfil. Seleccione Aceptar.

   

6. Aparece la siguiente captura de pantalla, que indica que ha iniciado sesión en la aplicación y ha accedido a los detalles de su perfil desde Microsoft Graph API.

   

Cerrar la sesión en la aplicación

1. Busque el enlace Cerrar sesión en la esquina superior derecha de la página y selecciónelo.
2. Se le pide que elija una cuenta para cerrar sesión. Seleccione la cuenta que utilizó para iniciar sesión.
3. Aparecerá un mensaje indicando que ha cerrado la sesión. Ahora puede cerrar la ventana del explorador.

Pasos siguientes

Aprenda a usar la plataforma de identidad de Microsoft mediante la creación de una API web con la siguiente serie de tutoriales.

Tutorial: Registrar una API web con la plataforma de identidad de Microsoft