Tutorial: Aufrufen einer API und Anzeigen der Ergebnisse

Im vorherigen Tutorialhaben Sie der Anwendung die Anmelde- und Abmeldefunktion hinzugefügt. Die Anwendung kann jetzt so konfiguriert werden, dass sie eine Web-API aufruft. Für die Zwecke dieses Tutorials wird die Microsoft Graph-API aufgerufen, um die Profilinformationen des bzw. der angemeldeten Benutzer*in anzuzeigen.

Dieses Tutorial umfasst folgende Punkte:

Voraussetzungen

• Erfüllen der Voraussetzungen und Schritte im Tutorial: Hinzufügen der Anmeldung zu einer Anwendung

Aufrufen der API und Anzeigen der Ergebnisse

1. Öffnen Sie unter Seiten die Datei Index.cshtml.cs, und ersetzen Sie den gesamten Inhalt der Datei durch den folgenden Codeausschnitt. Überprüfen Sie, ob das Projekt namespace mit Ihrem Projektnamen übereinstimmt.

   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. Öffnen Sie die Datei Index.cshtml, und fügen Sie den folgenden Code am Dateiende hinzu. Hier wird festgelegt, wie die von der API empfangenen Informationen angezeigt werden:

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

Testen der Anwendung

1. Abhängig von Ihrer IDE müssen Sie möglicherweise den Anwendungs-URI in den Browser eingeben, z. B. https://localhost:7100. Nachdem das Anmeldefenster angezeigt wird, wählen Sie das Konto aus, mit dem Sie sich anmelden möchten. Stellen Sie sicher, dass das Konto den Kriterien der App-Registrierung entspricht.

   

2. Nachdem Sie das Konto ausgewählt haben, erscheint ein zweites Fenster, in dem Sie darauf hingewiesen werden, dass ein Code an Ihre E-Mail-Adresse gesendet wird. Wählen Sie Code senden aus, und überprüfen Sie Ihren E-Mail-Posteingang.

   

3. Öffnen Sie die E-Mail des Absenders Microsoft-Kontoteam, und geben Sie den 7-stelligen Einmalcode ein. Wählen Sie nach der Eingabe Anmelden aus.

   

4. Für Angemeldet bleiben können Sie entweder Nein oder Ja auswählen.

   

5. Die Anwendung fordert die Berechtigung an, um den Zugriff auf Daten beizubehalten, auf die Sie ihr Zugriff gewährt haben. Die Anwendung benötigt diese Berechtigung außerdem, um Sie anzumelden und Ihr Profil lesen zu können. Wählen Sie Akzeptieren aus.

   

6. Der folgende Screenshot wird angezeigt. Er besagt, dass Sie sich bei der Anwendung angemeldet und über die Microsoft Graph-API auf Ihre Profildetails zugegriffen haben.

   

Abmelden von der Anwendung

1. Navigieren Sie zum Link Abmelden in der rechten oberen Ecke der Seite, und wählen Sie ihn aus.
2. Sie werden dazu aufgefordert, ein Konto zum Abmelden auszuwählen. Wählen Sie das Konto aus, das Sie für die Anmeldung verwendet haben.
3. Eine Meldung wird angezeigt, die angibt, dass Sie sich abgemeldet haben. Sie können nun das Browserfenster schließen.

Nächste Schritte

Erfahren Sie, wie Sie die Microsoft Identity Platform verwenden, indem Sie mit der folgenden Tutorialreihe eine Web-API erstellen.