Öğretici: API çağırma ve sonuçları görüntüleme

Makale
01/19/2024

Önceki öğreticide, uygulamaya oturum açma ve oturum kapatma deneyimlerini eklediniz. Uygulama artık bir web API'sini çağıracak şekilde yapılandırılabilir. Bu öğreticinin amaçları doğrultusunda, oturum açmış kullanıcının profil bilgilerini görüntülemek için Microsoft Graph API'si çağrılır.

Bu öğreticide:

API'yi çağırma ve sonuçları görüntüleme
Uygulamayı test etme

Önkoşullar

Öğretici: Uygulamada oturum açma ekleme bölümünde önkoşulların ve adımların tamamlanması.

API'yi çağırma ve sonuçları görüntüleme

Sayfalar'ın altında Index.cshtml.cs dosyasını açın ve dosyanın içeriğinin tamamını aşağıdaki kod parçacığıyla değiştirin. Projenin proje namespace adınız ile eşleşir olup olmadığını denetleyin.

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

Index.cshtml dosyasını açın ve dosyanın en altına aşağıdaki kodu ekleyin. Bu, API'den alınan bilgilerin nasıl görüntülendiğini işler:

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

Uygulamayı test etme

Hata ayıklamadan başlat'ı seçerek uygulamayı başlatın.

IDE'nize bağlı olarak, tarayıcıya uygulama URI'sini girmeniz gerekebilir, örneğin https://localhost:7100. Oturum açma penceresi görüntülendikten sonra oturum açmak istediğiniz hesabı seçin. Hesabın uygulama kaydı ölçütlerine uygun olduğundan emin olun.
Hesabı seçtikten sonra, e-posta adresinize bir kod gönderileceğini belirten ikinci bir pencere görüntülenir. Kod gönder'i seçin ve e-posta gelen kutunuzu denetleyin.
Gönderen Microsoft hesabı ekibinden gelen e-postayı açın ve 7 basamaklı tek kullanımlık kodu girin. Girdikten sonra Oturum aç'ı seçin.
Oturumunuz açık kalsın için Hayır veya Evet'i seçebilirsiniz.
Uygulama, erişim verdiğiniz verilere erişimi korumak ve oturum açıp profilinizi okumak için izin istemektedir. Kabul Et’i seçin.
Uygulamada oturum açtığınızı ve Profil ayrıntılarınıza Microsoft Graph API'sinden eriştiğnizi gösteren aşağıdaki ekran görüntüsü görüntülenir.

Uygulamadan oturumu kapatma

Sayfanın sağ üst köşesindeki Oturumu kapat bağlantısını bulun ve seçin.
Oturumu kapatmak için bir hesap seçmeniz istenir. Oturum açmak için kullandığınız hesabı seçin.
Oturumunuz kapatıldığını belirten bir ileti görüntülenir. Artık tarayıcı penceresini kapatabilirsiniz.

Sonraki adımlar

Aşağıdaki öğretici serisiyle web API'sini oluşturarak Microsoft kimlik platformu kullanmayı öğrenin.

Öğretici: Microsoft kimlik platformu ile web API'sini kaydetme

Aracılığıyla paylaş