Tutorial: Call an API and display the results

Article
04/05/2023

The application can now be configured to call an API. For the purposes of this tutorial, the Microsoft Graph API will be called to display the profile information of the logged-in user.

In this tutorial:

Call the API and display the results
Test the application

Prerequisites

Completion of the prerequisites and steps in Tutorial: Add sign in to an application.

Call the API and display the results

Under Pages, open the Index.cshtml.cs file and replace the entire contents of the file with the following snippet. Check that the project namespace matches your project name.

using System.Net;
using System.Text.Json;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.Identity.Web;

namespace sign_in_webapp.Pages;

[AuthorizeForScopes(ScopeKeySection = "DownstreamApi:Scopes")]
public class IndexModel : PageModel
{
    private readonly ILogger<IndexModel> _logger;

    private readonly IDownstreamWebApi _downstreamWebApi;

    public IndexModel(ILogger<IndexModel> logger,
                        IDownstreamWebApi downstreamWebApi)
    {
        _logger = logger;
        _downstreamWebApi = downstreamWebApi;
    }

    public async Task OnGet()
    {
        using var response = await _downstreamWebApi.CallWebApiForUserAsync("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 and add the following code to the bottom of the file. This will handle how the information received from the API is displayed:

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

Start the application by selecting Start without debugging.

Depending on your IDE, you may need to enter the application URI into the browser, for example https://localhost:7100. After the sign in window appears, select the account in which to sign in with. Ensure the account matches the criteria of the app registration.
Upon selecting the account, a second window appears indicating that a code will be sent to your email address. Select Send code, and check your email inbox.
Open the email from the sender Microsoft account team, and enter the 7-digit single-use code. Once entered, select Sign in.
For Stay signed in, you can select either No or Yes.
The app will ask for permission to sign in and access data. Select Accept to continue.
The web app now displays profile data acquired from the Microsoft Graph API.