Tutorial: Memanggil API dan menampilkan hasilnya

Artikel
01/19/2024

Dalam tutorial sebelumnya, Anda menambahkan pengalaman masuk dan keluar ke aplikasi. Aplikasi sekarang dapat dikonfigurasi untuk memanggil API web. Untuk tujuan tutorial ini, Microsoft Graph API dipanggil untuk menampilkan informasi profil pengguna yang masuk.

Dalam tutorial ini:

Panggil API dan tampilkan hasilnya
Uji aplikasi

Prasyarat

Penyelesaian prasyarat dan langkah-langkah dalam Tutorial: Menambahkan masuk ke aplikasi.

Panggil API dan tampilkan hasilnya

Di bawah Halaman, buka file Index.cshtml.cs dan ganti seluruh konten file dengan cuplikan berikut. Periksa apakah proyek namespace cocok dengan nama proyek Anda.

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

Buka Index.cshtml dan tambahkan kode berikut ke bagian bawah file. Ini menangani bagaimana informasi yang diterima dari API ditampilkan:

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

Uji aplikasi

Mulai aplikasi dengan memilih Mulai tanpa penelusuran kesalahan.

Bergantung pada IDE Anda, Anda mungkin perlu memasukkan URI aplikasi ke browser, misalnya https://localhost:7100. Setelah jendela masuk muncul, pilih akun tempat masuk. Pastikan akun cocok dengan kriteria pendaftaran aplikasi.
Setelah memilih akun, jendela kedua muncul yang menunjukkan bahwa kode akan dikirim ke alamat email Anda. Pilih Kirim kode, dan centang kotak masuk email Anda.
Buka email dari tim akun Microsoft pengirim, dan masukkan kode penggunaan tunggal 7 digit. Setelah dimasukkan, pilih Masuk.
Untuk Tetap masuk, Anda dapat memilih Tidak atau Ya.
Aplikasi meminta izin untuk mempertahankan akses ke data yang telah Anda akses, dan untuk memasukkan Anda dan membaca profil Anda. Pilih Terima.
Cuplikan layar berikut muncul, menunjukkan bahwa Anda telah masuk ke aplikasi dan telah mengakses detail profil Anda dari Microsoft Graph API.

Keluar dari aplikasi

Temukan tautan Keluar di sudut kanan atas halaman, dan pilih.
Anda diminta untuk memilih akun untuk keluar. Pilih akun yang Anda gunakan untuk masuk.
Pesan muncul yang menunjukkan bahwa Anda keluar. Anda sekarang dapat menutup jendela browser.

Langkah berikutnya

Pelajari cara menggunakan platform identitas Microsoft dengan membangun API web dengan seri tutorial berikut.

Tutorial: Mendaftarkan API web dengan platform identitas Microsoft

Bagikan melalui