Öğretici: Blazor WebAssembly uygulamasından kullanıcıların oturum açması ve korumalı BIR API'yi çağırma

Bu öğreticide, Microsoft kimlik platformunu kullanarak ve Azure Active Directory'ye (Azure AD) kaydederek kullanıcılarda oturum açabilen ve Microsoft Graph'den veri alan bir Blazor WebAssembly uygulaması derlersiniz.

Bu öğreticide:

  • Microsoft kimlik platformunu kullanarak kimlik doğrulaması ve yetkilendirme için Azure Active Directory (Azure AD) kullanmak üzere yapılandırılmış yeni bir Blazor WebAssembly uygulaması oluşturma
  • Korumalı bir web API'sinde verileri alma , bu durumda Microsoft Graph

Bu öğreticide .NET Core 3.1 1 2. .NET belgeleri, ASP.NET Core 5.0 kullanarak Blazor WebAssembly uygulamasının güvenliğini sağlama yönergelerini içerir.

Ayrıca, için bir öğreticimiz Blazor Server.

Önkoşullar

  • .NET Core 3.1 SDK
  • Bir uygulamayı kaydedebilirsiniz Bir Azure AD kiracısı. Azure AD kiracısına erişiminiz yoksa, Microsoft 365 Geliştirici Programı'Microsoft 365 azure ücretsiz hesabı oluşturarak bir kiracı edinebilirsiniz.

Uygulamayı Azure portal

Kimlik doğrulaması için Azure Active Directory (Azure AD) kullanan her uygulamaNın Azure AD'ye kayıtlı olması gerekir. Uygulamayı şu belirtimlerle kaydetme yönergelerini izleyin:

  • Desteklenen hesap türleri için Yalnızca bu kuruluş dizininde hesaplar'ı seçin.
  • Yeniden Yönlendirme URI'sini açılan listesinde Tek sayfalı uygulama (SPA) olarak ayarlayın ve https://localhost:5001/authentication/login-callback girin. Kestrel üzerinde çalışan bir uygulamanın varsayılan bağlantı noktası 5001'tir. Uygulama farklı bir bağlantı noktası üzerinde kullanılabilirse yerine bu bağlantı noktası numarasını 5001 belirtin.

Kaydedildiktan sonra Yönet'in altında Kimlik Doğrulaması Örtülü onay ve > karma akışlar'ı seçin. Erişim belirteçleri ve kimlik belirteçleri'ne ve ardından Kaydet'e tıklayın.

Uygulamayı oluşturmak için .NET Core CLI

Uygulamayı oluşturmak için en son Blazor şablonları gerekir. Bunları aşağıdaki komutla .NET Core CLI için yükleyebilirsiniz:

dotnet new -i Microsoft.Identity.Web.ProjectTemplates::1.6.0

Ardından aşağıdaki komutu çalıştırarak uygulamayı oluşturun. Komutta yer tutucuları, uygulamanın genel bakış sayfasındaki uygun bilgilerle değiştirin ve komutu bir komut kabuğunda yürütün. seçeneğiyle belirtilen çıkış konumu, yoksa bir proje klasörü oluşturur ve -o|--output uygulamanın adının bir parçası olur.

dotnet new blazorwasm2 --auth SingleOrg --calls-graph -o {APP NAME} --client-id "{CLIENT ID}" --tenant-id "{TENANT ID}"
Yer tutucu Azure portal adı Örnek
{APP NAME} BlazorWASMSample
{CLIENT ID} Uygulama (istemci) kimliği 41451fa7-0000-0000-0000-69eff5a761fd
{TENANT ID} Dizin (kiracı) kimliği e86c78e2-0000-0000-0000-918e0565a45e

Uygulamayı test etme

Artık uygulamayı derleme ve çalıştırma. Bu şablon uygulamasını çalıştırarak --framework kullanarak çalıştıracak çerçeveyi belirtmeniz gerekir. Bu öğreticide .NET Standard 2.1 2.1 2 1 2.1'i kullanır, ancak şablon diğer çerçeveleri de destekler.

dotnet run --framework netstandard2.1

Tarayıcınızda,'a gidin ve Bir Azure AD kullanıcı hesabı kullanarak oturum açmak için uygulamayı çalıştırarak ve Microsoft kimlik platformuyla kullanıcıların oturum https://localhost:5001 açmasını açın.

Microsoft kimlik platformunu kullanarak Azure AD'de oturum açmaları etkinleştiren bu şablonun bileşenleri bu konudaki ASP.NET belgesinde açıklanmıştır.

Korumalı bir API'den veri alma (Microsoft Graph)

Microsoft Graph, kullanıcılarınıza Microsoft 365 erişim sağlayan API'ler içerir ve Microsoft kimlik platformu tarafından verilen belirteçleri destekler ve bu da örnek olarak kullanmak için iyi bir korumalı API yapar. Bu bölümde, uygulamanın "Veri Microsoft Graph" sayfasında kullanıcının e-postalarını görüntülemek için kod ekleniyor.

Bu bölüm, adlandırılmış bir istemci kullanarak korunan bir API'yi çağırmaya ilişkin yaygın bir yaklaşım kullanılarak yazılmıştır. Aynı yöntem, çağrısı yapmak istediğiniz diğer korumalı API'ler için de kullanılabilir. Ancak, uygulamanıza bir Microsoft Graph çağırmayı planlıyorsanız, graph SDK'sını kullanarak ortak kullanımları azaltabilirsiniz. .NET belgeleri Graph SDK'sı kullanma yönergelerini içerir.

Başlamadan önce, gerekli izinlerde değişiklik yaptığınız için ve geçerli belirtecin çalışmayarak uygulama oturumu açın. Henüz çalıştırmadısanız, uygulamanızı yeniden çalıştırın ve aşağıdaki kodu güncelleştirmeden önce Oturumu aç'ı seçin.

Şimdi, kullanıcının e-postalarını çekmek ve uygulama içindeki iletileri görüntülemek için uygulamanın kaydını ve kodunu güncelleştirebilirsiniz.

İlk olarak, Uygulamanın kaydına API iznini ekleyin, böylece Azure AD uygulamanın kullanıcılarının e-postalarına Mail.Read erişmesini talep etti.

  1. Uygulama Azure portal'de uygulamanızı Uygulama kayıtları.
  2. Yönet'in altında API izinleri'i seçin.
  3. Erişim izni ekle'yi > Microsoft Graph.
  4. Temsilci İzinleri'ne tıklayın, ardından Mail.Read iznini arayın ve seçin.
  5. İzin ekle'yi seçin.

Ardından, netstandard2.1 ItemGroup'ta projenizin .csproj dosyasına aşağıdakini ekleyin. Bu, sonraki adımda özel HttpClient oluşturmanıza olanak sağlayacak.

<PackageReference Include="Microsoft.Extensions.Http" Version="3.1.7" />

Ardından, sonraki birkaç adımda belirtilen kodu değiştirebilirsiniz. Bu değişiklikler, Microsoft Graph API'nize gönderilen giden isteklere erişim Microsoft Graph ekler. Bu düzen, Core Blazor WebAssembly ASP.NET güvenlik senaryolarında daha ayrıntılı olarak ele alınmıştır.

İlk olarak aşağıdaki kodla GraphAPIAuthorizationMessageHandler.cs adlı yeni bir dosya oluşturun. Bu işleyici, api'nize giden isteklere ve kapsamları için User.Read Mail.Read bir erişim belirteci Microsoft Graph olur.

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.WebAssembly.Authentication;

public class GraphAPIAuthorizationMessageHandler : AuthorizationMessageHandler
{
    public GraphAPIAuthorizationMessageHandler(IAccessTokenProvider provider,
        NavigationManager navigationManager)
        : base(provider, navigationManager)
    {
        ConfigureHandler(
            authorizedUrls: new[] { "https://graph.microsoft.com" },
            scopes: new[] { "https://graph.microsoft.com/User.Read", "https://graph.microsoft.com/Mail.Read" });
    }
}

Ardından Main Program.cs içindeki yönteminin içeriğini aşağıdaki kodla değiştirin. Bu kod, kullanıcı ilk kez oturum aken uygulamanın isteğinde varsayılan kapsamlar olarak yeni ve eklerini GraphAPIAuthorizationMessageHandler User.Read Mail.Read kullanır.

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");

builder.Services.AddScoped<GraphAPIAuthorizationMessageHandler>();

builder.Services.AddHttpClient("GraphAPI",
        client => client.BaseAddress = new Uri("https://graph.microsoft.com"))
    .AddHttpMessageHandler<GraphAPIAuthorizationMessageHandler>();

builder.Services.AddMsalAuthentication(options =>
{
    builder.Configuration.Bind("AzureAd", options.ProviderOptions.Authentication);
    options.ProviderOptions.DefaultAccessTokenScopes.Add("User.Read");
    options.ProviderOptions.DefaultAccessTokenScopes.Add("Mail.Read");
});

await builder.Build().RunAsync();

Son olarak FetchData.razor sayfasının içeriğini aşağıdaki kodla değiştirin. Bu kod, Microsoft Graph API'den kullanıcı e-posta verilerini getirir ve bunları liste olarak görüntüler. içinde, OnInitializedAsync uygun erişim belirteci kullanan yeni oluşturulur ve api'ye istekte Microsoft Graph HttpClient kullanılır.

@page "/fetchdata"
@using System.ComponentModel.DataAnnotations
@using System.Text.Json.Serialization
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
@using Microsoft.Extensions.Logging
@inject IAccessTokenProvider TokenProvider
@inject IHttpClientFactory ClientFactory
@inject IHttpClientFactory HttpClientFactory

<p>This component demonstrates fetching data from a service.</p>

@if (messages == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <h1>Hello @userDisplayName !!!!</h1>
    <table class="table">
        <thead>
            <tr>
                <th>Subject</th>
                <th>Sender</th>
                <th>Received Time</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var mail in messages)
            {
                <tr>
                    <td>@mail.Subject</td>
                    <td>@mail.Sender</td>
                    <td>@mail.ReceivedTime</td>
                </tr>
            }
        </tbody>
    </table>
}

@code {

    private string userDisplayName;
    private List<MailMessage> messages = new List<MailMessage>();

    private HttpClient _httpClient;

    protected override async Task OnInitializedAsync()
    {
        _httpClient = HttpClientFactory.CreateClient("GraphAPI");
        try {
            var dataRequest = await _httpClient.GetAsync("https://graph.microsoft.com/beta/me");

            if (dataRequest.IsSuccessStatusCode)
            {
                var userData = System.Text.Json.JsonDocument.Parse(await dataRequest.Content.ReadAsStreamAsync());
                userDisplayName = userData.RootElement.GetProperty("displayName").GetString();
            }

            var mailRequest = await _httpClient.GetAsync("https://graph.microsoft.com/beta/me/messages?$select=subject,receivedDateTime,sender&$top=10");

            if (mailRequest.IsSuccessStatusCode)
            {
                var mailData = System.Text.Json.JsonDocument.Parse(await mailRequest.Content.ReadAsStreamAsync());
                var messagesArray = mailData.RootElement.GetProperty("value").EnumerateArray();

                foreach (var m in messagesArray)
                {
                    var message = new MailMessage();
                    message.Subject = m.GetProperty("subject").GetString();
                    message.Sender = m.GetProperty("sender").GetProperty("emailAddress").GetProperty("address").GetString();
                    message.ReceivedTime = m.GetProperty("receivedDateTime").GetDateTime();
                    messages.Add(message);
                }
            }
        }
        catch (AccessTokenNotAvailableException ex)
        {
            // Tokens are not valid - redirect the user to log in again
            ex.Redirect();
        }
    }

    public class MailMessage
    {
        public string Subject;
        public string Sender;
        public DateTime ReceivedTime;
    }
}

Şimdi uygulamayı yeniden başlatabilirsiniz. Uygulamaya e-postanızı okumak için erişim vermenizin istendiğinde farkedersiniz. Bu durum, bir uygulamanın kapsam isteğinda olması Mail.Read beklenir.

Onay verdikten sonra bazı e-postaları okumak için "Verileri getir" sayfasına gidin.

Son uygulamanın ekran görüntüsü. Merhaba Merhaba Merhaba Deryalar'ın yer alan başlığında Isea'ya ait e-postaların listesi yer almaktadır.

Sonraki adımlar