ASP.NET Core ile Graph API kullanma Blazor WebAssembly

Makale
09/27/2024

Not

Bu, bu makalenin en son sürümü değildir. Geçerli sürüm için bu makalenin .NET 8 sürümüne bakın.

Uyarı

ASP.NET Core'un bu sürümü artık desteklenmiyor. Daha fazla bilgi için bkz . .NET ve .NET Core Destek İlkesi. Geçerli sürüm için bu makalenin .NET 8 sürümüne bakın.

Önemli

Bu bilgiler, ticari olarak piyasaya sürülmeden önce önemli ölçüde değiştirilebilen bir yayın öncesi ürünle ilgilidir. Burada verilen bilgilerle ilgili olarak Microsoft açık veya zımni hiçbir garanti vermez.

Geçerli sürüm için bu makalenin .NET 8 sürümüne bakın.

Bu makalede, uygulamaların Microsoft Bulut kaynaklarına erişmesini sağlayan uygulamalarda Microsoft Graph'ın Blazor WebAssembly nasıl kullanılacağı açıklanmaktadır.

İki yaklaşım ele alınmıştır:

Grafik SDK'sı: Microsoft Graph SDK'sı, Microsoft Graph'a erişen yüksek kaliteli, verimli ve dayanıklı uygulamalar derlemeyi kolaylaştırır. Bu yaklaşımı benimsemek için bu makalenin üst kısmındaki Grafik SDK'sı düğmesini seçin.
Graph API'sine sahip HttpClient olarak adlandırılmış: Adlandırılmış bir, HttpClient Microsoft Graph API'sini doğrudan Microsoft Graph'a gönderebilir. Bu yaklaşımı benimsemek için bu makalenin üst kısmındaki Named HttpClient with Graph API düğmesini seçin.

Bu makaledeki kılavuz, diğer Microsoft belge kümelerindeki Microsoft Graph belgelerinin ve Azure güvenlik kılavuzunun yerini almak için tasarlanmamıştır. Microsoft Graph'i üretim ortamında uygulamadan önce bu makalenin Ek kaynaklar bölümündeki güvenlik kılavuzunu değerlendirin. Uygulamalarınızın güvenlik açıklarını sınırlamak için Microsoft'un en iyi yöntemlerini izleyin.

Microsoft Graph Blazor WebAssembly ile çalışmaya yönelik ek yaklaşımlar aşağıdaki Microsoft Graph ve Azure örnekleri tarafından sağlanır:

Microsoft Graph örnek Blazor WebAssembly uygulaması: Örnek, Office 365 verilerini almak için Microsoft Graph SDK'sı ile fabrika tabanlı bir yaklaşım benimser. Örnek, Graph istemci isteklerinde bulunmak için varsayılan HttpClient değeri kullanır. Uygulamanın () temel adresiyle varsayılan HttpClient değeri kullanmanız gerekiyorsa(BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) örneğin uygulamanın web kökünden veri yüklemek için), Graph istemci fabrikasını Graph isteklerine ayrılmış adlandırılmış bir ad HttpClient kullanacak şekilde yeniden düzenlemeyi göz önünde bulundurun.
ASP.NET Core 8.0 Blazor WebAssembly | tek başına uygulama | kullanıcı oturum açma, korumalı web API'si erişimi (Microsoft Graph) | Microsoft identity platformu: Örnek, bir yetkilendirme iletisi işleyicisi kullanan ve HttpClient Graph verilerini almak için kullanılan bir Aşamalı Web Uygulamasıdır (PWA). Yukarıdaki örnekte olduğu gibi, bu örnek de Graph istemci istekleri yapmak için bir varsayılan HttpClient kullanır. Örnek, Microsoft Graph SDK'sını kullanmak yerine bir bileşendeki Microsoft Graph API isteği aracılığıyla kullanıcı hesabı verilerini JSON olarak alır. Bu, bu makaledeki Graph API'siyle Adlandırılmış HttpClient yaklaşımına benzer bir tekniktir (kılavuzu görmek için bu makalenin üst kısmındaki düğmeyi kullanın), ancak bu makalenin kılavuzunda Graph isteklerine ayrılmış adlandırılmış bir ad HttpClient kullanılır.

Önceki iki örnekten herhangi biri hakkında geri bildirim sağlamak için örneğin GitHub deposunda bir sorun açın. Azure örneğiyle ilgili bir sorun açıyorsanız, Azure örnek deposu (Azure-Samples) birçok örnek içerdiğinden açılış açıklamanızda örneğe bir bağlantı sağlayın. Sorunu ayrıntılı olarak açıklayın ve gerektiğinde örnek kodu ekleyin. GitHub'a sorunu veya hatayı yeniden oluşturan minimal bir uygulama yerleştirin. Azure hesabı yapılandırma verilerini genel depoya işlemeden önce örnekten kaldırdığınızdan emin olun.

Bu makale veya ASP.NET Core ile ilgili geri bildirim sağlamak veya yardım almak için bkz . ASP.NET Temel Blazor bilgiler.

Önemli

Bu makalede açıklanan senaryolar, AAD B2C'yi değil Microsoft Entra'yı identity (ME-ID) sağlayıcı olarak kullanmak için geçerlidir. Microsoft Graph'ın istemci tarafı Blazor WebAssembly bir uygulamayla ve AAD B2C identity sağlayıcısıyla kullanılması şu anda desteklenmemektedir çünkü uygulama istemci tarafı Blazor uygulamasında güvenli hale getirilmeyecek bir istemci gizli dizisi gerektirebilir. AAD B2C tek başına Blazor WebAssembly uygulaması için Graph API'sini kullanın, kullanıcılar adına Graph API'sine erişmek için bir arka uç sunucusu (web) API'sini oluşturun. İstemci tarafı uygulaması, kullanıcıların kimliğini doğrular ve Microsoft Graph'a güvenli bir şekilde erişmek ve sunucu tabanlı web API'nizden istemci tarafı Blazor uygulamasına veri döndürmek için web API'sini çağırma yetkisi verir. İstemci gizli dizisi, istemcideki uygulamada değil sunucu tabanlı web API'sinde Blazor güvenli bir şekilde korunur. İstemci gizli dizisini hiçbir zaman istemci tarafı uygulamasında depolamayın Blazor .

Barındırılan Blazor WebAssembly bir uygulamanın kullanılması desteklenir. Burada Server uygulama, web API'si aracılığıyla uygulamaya Graph verileri sağlamak için Graph SDK/API'sini Client kullanır. Daha fazla bilgi için bu makalenin Barındırılan Blazor WebAssembly çözümler bölümüne bakın.

Bu makaledeki örneklerde yeni .NET/C# özelliklerinden yararlanılmıştır. .NET 7 veya önceki sürümleriyle örnekleri kullanırken küçük değişiklikler yapılması gerekir. Ancak, Microsoft Graph ile etkileşime yönelik metin ve kod örnekleri, ASP.NET Core'un tüm sürümleri için aynıdır.

Aşağıdaki kılavuz Microsoft Graph v5 için geçerlidir.

Uygulamalarda kullanılmak üzere Microsoft Graph SDK'sı Blazor , Microsoft Graph .NET İstemci Kitaplığı olarak adlandırılır.

Graph SDK örnekleri, tek başına Blazor WebAssembly uygulamada aşağıdaki paket başvurularını gerektirir. Uygulama MSAL kimlik doğrulaması için etkinleştirildiyse, örneğin Microsoft Entra ID ile bir ASP.NET Core Blazor WebAssembly tek başına uygulamasının güvenliğini sağlama başlığındaki yönergeleri izleyerek uygulamayı oluştururken ilk iki pakete zaten başvurulur.

Graph SDK örnekleri, tek başına Blazor WebAssembly uygulamada veya barındırılan Blazor WebAssembly bir çözümün Client uygulamasında aşağıdaki paket başvurularını gerektirir. Uygulama MSAL kimlik doğrulaması için etkinleştirildiyse, örneğin Microsoft Entra ID ile bir ASP.NET Core Blazor WebAssembly tek başına uygulamasının güvenliğini sağlama başlığındaki yönergeleri izleyerek uygulamayı oluştururken ilk iki pakete zaten başvurulur.

Not

.NET uygulamalarına paket ekleme hakkında yönergeler için, Paket tüketimi iş akışında (NuGet belgeleri) paketleri yüklemek ve yönetmek altındaki makalelere bakın. NuGet.org'da doğru paket sürümlerini onaylayın.

Azure portalında, uygulamanın bir kullanıcı adına erişebilmesi gereken Microsoft Graph verileri için temsilci izinleri (kapsamlar) † verin. Bu makaledeki örnekte, uygulamanın kaydı kullanıcı verilerini okumak için temsilci izni içermelidir (Microsoft.Graph>User.ReadAPI izinlerindeki kapsam, Tür: Temsilcili). Kapsam User.Read , kullanıcıların uygulamada oturum açmasına olanak tanır ve uygulamanın oturum açmış kullanıcıların profil ve şirket bilgilerini okumasına olanak tanır. Daha fazla bilgi için bkz. Microsoft platformunda izinlere ve onaylara genel bakış ve Microsoft identity Graph izinlerine genel bakış.

†Etkiler ve kapsamlar aynı anlama gelir ve güvenlik belgelerinde ve Azure portalında birbirinin yerine kullanılır. Metin Azure portalına başvurmadığı sürece, bu makalede Graph izinlerine başvururken kapsam/kapsamları kullanılmaktadır.

Kapsamlar büyük/küçük harfe duyarlı değildir, bu nedenle User.Read ile user.readaynıdır. Her iki biçimi de kullanmaktan çekinmeyin, ancak uygulama kodu genelinde tutarlı bir seçim yapmanızı öneririz.

Azure portalında uygulamanın kaydına Microsoft Graph API kapsamlarını ekledikten sonra, uygulamadaki dosyaya wwwroot/appsettings.json , Microsoft Graph sürümü ve kapsamları ile Graph temel URL'sini içeren aşağıdaki uygulama ayarları yapılandırmasını ekleyin. Aşağıdaki örnekte, bu makalenin User.Read sonraki bölümlerinde yer alan örnekler için kapsam belirtilmiştir. Kapsamlar büyük/küçük harfe duyarlı değildir.

"MicrosoftGraph": {
  "BaseUrl": "https://graph.microsoft.com",
  "Version": "{VERSION}",
  "Scopes": [
    "user.read"
  ]
}

Yukarıdaki örnekte yer tutucu, {VERSION} Microsoft Graph API'sinin sürümüdür (örneğin: v1.0).

Aşağıda, sağlayıcı olarak identity ME-ID kullanan ve Microsoft Graph için kullanıcı verilerinin (user.readkapsam) okunduğu tam wwwroot/appsettings.json yapılandırma dosyası örneği verilmiştir:

{
  "AzureAd": {
    "Authority": "https://login.microsoftonline.com/{TENANT ID}",
    "ClientId": "{CLIENT ID}",
    "ValidateAuthority": true
  },
  "MicrosoftGraph": {
    "BaseUrl": "https://graph.microsoft.com",
    "Version": "v1.0",
    "Scopes": [
      "user.read"
    ]
  }
}

Yukarıdaki örnekte yer {TENANT ID} tutucu Dizin (kiracı) kimliği, {CLIENT ID} yer tutucu ise Uygulama (istemci) kimliğidir. Daha fazla bilgi için bkz. Microsoft Entra ID ile ASP.NET Core Blazor WebAssembly tek başına uygulamasının güvenliğini sağlama.

Aşağıdaki GraphClientExtensions sınıfı tek başına uygulamaya ekleyin. Kapsamlar yönteminde Scopes öğesinin AccessTokenRequestOptions özelliğine AuthenticateRequestAsync sağlanır.

Erişim belirteci alınmazsa, aşağıdaki kod Graph istekleri için taşıyıcı yetkilendirme üst bilgisi ayarlamaz.

GraphClientExtensions.cs:

using Microsoft.AspNetCore.Components.WebAssembly.Authentication;
using Microsoft.Authentication.WebAssembly.Msal.Models;
using Microsoft.Graph;
using Microsoft.Kiota.Abstractions;
using Microsoft.Kiota.Abstractions.Authentication;
using IAccessTokenProvider = 
    Microsoft.AspNetCore.Components.WebAssembly.Authentication.IAccessTokenProvider;

namespace BlazorSample;

internal static class GraphClientExtensions
{
    public static IServiceCollection AddGraphClient(
            this IServiceCollection services, string? baseUrl, List<string>? scopes)
    {
        if (string.IsNullOrEmpty(baseUrl) || scopes?.Count == 0)
        {
            return services;
        }

        services.Configure<RemoteAuthenticationOptions<MsalProviderOptions>>(
            options =>
            {
                scopes?.ForEach((scope) =>
                {
                    options.ProviderOptions.DefaultAccessTokenScopes.Add(scope);
                });
            });

        services.AddScoped<IAuthenticationProvider, GraphAuthenticationProvider>();

        services.AddScoped(sp =>
        {
            return new GraphServiceClient(
                new HttpClient(),
                sp.GetRequiredService<IAuthenticationProvider>(),
                baseUrl);
        });

        return services;
    }

    private class GraphAuthenticationProvider(IAccessTokenProvider tokenProvider, 
        IConfiguration config) : IAuthenticationProvider
    {
        private readonly IConfiguration config = config;

        public IAccessTokenProvider TokenProvider { get; } = tokenProvider;

        public async Task AuthenticateRequestAsync(RequestInformation request, 
            Dictionary<string, object>? additionalAuthenticationContext = null, 
            CancellationToken cancellationToken = default)
        {
            var result = await TokenProvider.RequestAccessToken(
                new AccessTokenRequestOptions()
                {
                    Scopes = 
                        config.GetSection("MicrosoftGraph:Scopes").Get<string[]>() ??
                        [ "user.read" ]
                });

            if (result.TryGetToken(out var token))
            {
                request.Headers.Add("Authorization", 
                    $"{CoreConstants.Headers.Bearer} {token.Value}");
            }
        }
    }
}

Önemli

Yukarıdaki kodun DefaultAccessTokenScopes kapsamları AdditionalScopesToConsenteklemek için yerine neden kullandığını DefaultAccessTokenScopes gösteren bir açıklama için versus AdditionalScopesToConsent bölümüne bakın.

Program dosyasına Graph istemci hizmetlerini ve yapılandırmasını uzantı yöntemiyle AddGraphClient ekleyin. Bu ayarlar uygulama ayarları dosyasında bulunmazsa aşağıdaki kod varsayılan olarak Sürüm 1.0 Microsoft Graph temel adresi ve User.Read kapsamları olarak belirlenmiştir:

var baseUrl = string.Join("/",
    builder.Configuration.GetSection("MicrosoftGraph")["BaseUrl"] ??
        "https://graph.microsoft.com",
    builder.Configuration.GetSection("MicrosoftGraph")["Version"] ??
        "v1.0");
var scopes = builder.Configuration.GetSection("MicrosoftGraph:Scopes")
    .Get<List<string>>() ?? [ "user.read" ];

builder.Services.AddGraphClient(baseUrl, scopes);

Graph SDK'sını kullanarak bir bileşenden Graph API'sini çağırma

Aşağıdaki UserData bileşen, kullanıcının ME-ID profil verilerini almak ve cep telefonu numarasını görüntülemek için eklenen GraphServiceClient öğesini kullanır.

ME-ID'de oluşturduğunuz tüm test kullanıcıları için kullanıcının ME-ID profiline Azure portalında bir cep telefonu numarası verdiğinizden emin olun.

UserData.razor:

@page "/user-data"
@using Microsoft.AspNetCore.Authorization
@using Microsoft.Graph
@attribute [Authorize]
@inject GraphServiceClient Client

<PageTitle>User Data</PageTitle>

<h1>Microsoft Graph User Data</h1>

@if (!string.IsNullOrEmpty(user?.MobilePhone))
{
    <p>Mobile Phone: @user.MobilePhone</p>
}

@code {
    private Microsoft.Graph.Models.User? user;

    protected override async Task OnInitializedAsync()
    {
        user = await Client.Me.GetAsync();
    }
}

Bileşendeki bileşenin sayfasına NavMenu bir bağlantı ekleyin (Layout/NavMenu.razor):

<div class="nav-item px-3">
    <NavLink class="nav-link" href="user-data">
        <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> User Data
    </NavLink>
</div>

İpucu

Bir uygulamaya kullanıcı eklemek için, Uygulama rolleri ile veya uygulama rolleri olmadan uygulama kaydına kullanıcı atama bölümüne bakın.

Graph SDK'sı ile yerel olarak test ederken, kalan tanımlama bilgilerinin testlere müdahale etmesini önlemek için her test için yeni bir InPrivate/gizli tarayıcı oturumu kullanmanızı öneririz. Daha fazla bilgi için bkz. Microsoft Entra ID ile ASP.NET Core Blazor WebAssembly tek başına uygulamasının güvenliğini sağlama.

Graph SDK'sını kullanarak kullanıcı taleplerini özelleştirme

Aşağıdaki örnekte uygulama, ME-ID kullanıcı profili verilerinden bir kullanıcı için cep telefonu numarası ve ofis konumu talepleri oluşturur. Uygulamanın ME-ID'de yapılandırılmış Graph API kapsamı olmalıdır User.Read . Bu senaryoya yönelik tüm test kullanıcılarının ME-ID profilinde azure portalı aracılığıyla eklenebilen bir cep telefonu numarasına ve ofis konumuna sahip olması gerekir.

Aşağıdaki özel kullanıcı hesabı fabrikasında:

ILogger Yöntemdeki bilgileri veya hataları CreateUserAsync günlüğe kaydetmek istemeniz durumunda kolaylık sağlamak için bir (logger) eklenir.
bir AccessTokenNotAvailableException oluşturulursa, kullanıcı kendi hesabında oturum açmak için identity sağlayıcıya yönlendirilir. Erişim belirteci istendiğinde ek veya farklı eylemler yapılabilir. Örneğin, uygulama daha fazla araştırma için öğesini günlüğe AccessTokenNotAvailableException kaydedebilir ve bir destek bileti oluşturabilir.
Çerçeveler RemoteUserAccount kullanıcının hesabını temsil eder. Uygulama genişleten RemoteUserAccountbir özel kullanıcı hesabı sınıfı gerektiriyorsa, aşağıdaki kodda için özel kullanıcı hesabı sınıfınızı RemoteUserAccount değiştirin.

CustomAccountFactory.cs:

using System.Security.Claims;
using Microsoft.AspNetCore.Components.WebAssembly.Authentication;
using Microsoft.AspNetCore.Components.WebAssembly.Authentication.Internal;
using Microsoft.Graph;
using Microsoft.Kiota.Abstractions.Authentication;

public class CustomAccountFactory(IAccessTokenProviderAccessor accessor,
        IServiceProvider serviceProvider, ILogger<CustomAccountFactory> logger,
        IConfiguration config) 
    : AccountClaimsPrincipalFactory<RemoteUserAccount>(accessor)
{
    private readonly ILogger<CustomAccountFactory> logger = logger;
    private readonly IServiceProvider serviceProvider = serviceProvider;
    private readonly string? baseUrl = string.Join("/",
        config.GetSection("MicrosoftGraph")["BaseUrl"] ?? 
            "https://graph.microsoft.com",
        config.GetSection("MicrosoftGraph")["Version"] ??
            "v1.0");

    public override async ValueTask<ClaimsPrincipal> CreateUserAsync(
        RemoteUserAccount account,
        RemoteAuthenticationUserOptions options)
    {
        var initialUser = await base.CreateUserAsync(account, options);

        if (initialUser.Identity is not null &&
            initialUser.Identity.IsAuthenticated)
        {
            var userIdentity = initialUser.Identity as ClaimsIdentity;

            if (userIdentity is not null && !string.IsNullOrEmpty(baseUrl))
            {
                try
                {
                    var client = new GraphServiceClient(
                        new HttpClient(),
                        serviceProvider
                            .GetRequiredService<IAuthenticationProvider>(),
                        baseUrl);

                    var user = await client.Me.GetAsync();

                    if (user is not null)
                    {
                        userIdentity.AddClaim(new Claim("mobilephone",
                            user.MobilePhone ?? "(000) 000-0000"));
                        userIdentity.AddClaim(new Claim("officelocation",
                            user.OfficeLocation ?? "Not set"));
                    }
                }
                catch (AccessTokenNotAvailableException exception)
                {
                    exception.Redirect();
                }
            }
        }

        return initialUser;
    }
}

MSAL kimlik doğrulamasını özel kullanıcı hesabı fabrikasını kullanacak şekilde yapılandırın.

Program Dosyanın ad alanını Microsoft.AspNetCore.Components.WebAssembly.Authentication kullandığını onaylayın:

using Microsoft.AspNetCore.Components.WebAssembly.Authentication;

Bu bölümdeki örnek, dosyadaki bölüm aracılığıyla uygulama yapılandırmasından sürüm ve kapsamlarla temel URL'yi wwwroot/appsettings.json okuma yaklaşımını MicrosoftGraph temel alır. Bu makalenin Program önceki bölümlerinde yer alan yönergeleri izleyerek dosyada aşağıdaki satırların zaten mevcut olması gerekir:

var baseUrl = string.Join("/",
    builder.Configuration.GetSection("MicrosoftGraph")["BaseUrl"] ??
        "https://graph.microsoft.com",
    builder.Configuration.GetSection("MicrosoftGraph")["Version"] ??
        "v1.0");
var scopes = builder.Configuration.GetSection("MicrosoftGraph:Scopes")
    .Get<List<string>>() ?? [ "user.read" ];

builder.Services.AddGraphClient(baseUrl, scopes);

Program dosyasında uzantı yöntemine yapılan çağrıyı AddMsalAuthentication bulun. ile bir hesap talep sorumlusu fabrikası ekleyen bir çağrısı AddAccountClaimsPrincipalFactory içeren kodu aşağıdaki şekilde güncelleştirin CustomAccountFactory.

Uygulama genişleten RemoteUserAccountbir özel kullanıcı hesabı sınıfı kullanıyorsa, aşağıdaki kodda için özel kullanıcı hesabı sınıfını RemoteUserAccount değiştirin.

builder.Services.AddMsalAuthentication<RemoteAuthenticationState,
    RemoteUserAccount>(options =>
    {
        builder.Configuration.Bind("AzureAd", 
            options.ProviderOptions.Authentication);
    })
    .AddAccountClaimsPrincipalFactory<RemoteAuthenticationState, RemoteUserAccount,
        CustomAccountFactory>();

Kullanıcı ME-ID ile kimlik doğrulamasından geçtikten sonra kullanıcının taleplerini incelemek için aşağıdaki UserClaims bileşeni kullanabilirsiniz:

UserClaims.razor:

@page "/user-claims"
@using System.Security.Claims
@using Microsoft.AspNetCore.Authorization
@attribute [Authorize]
@inject AuthenticationStateProvider AuthenticationStateProvider

<h1>User Claims</h1>

@if (claims.Any())
{
    <ul>
        @foreach (var claim in claims)
        {
            <li>@claim.Type: @claim.Value</li>
        }
    </ul>
}
else
{
    <p>No claims found.</p>
}

@code {
    private IEnumerable<Claim> claims = Enumerable.Empty<Claim>();

    protected override async Task OnInitializedAsync()
    {
        var authState = await AuthenticationStateProvider
            .GetAuthenticationStateAsync();
        var user = authState.User;

        claims = user.Claims;
    }
}

Bileşendeki bileşenin sayfasına NavMenu bir bağlantı ekleyin (Layout/NavMenu.razor):

<div class="nav-item px-3">
    <NavLink class="nav-link" href="user-claims">
        <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> User Claims
    </NavLink>
</div>

Aşağıdaki kılavuz Microsoft Graph v4 için geçerlidir. Bir uygulamayı SDK v4'ten v5'e yükseltiyorsanız Microsoft Graph .NET SDK v5 değişiklik günlüğü ve yükseltme kılavuzuna bakın.

Uygulamalarda kullanılmak üzere Microsoft Graph SDK'sı Blazor , Microsoft Graph .NET İstemci Kitaplığı olarak adlandırılır.

Not

"MicrosoftGraph": {
  "BaseUrl": "https://graph.microsoft.com",
  "Version": "{VERSION}",
  "Scopes": [
    "user.read"
  ]
}

Yukarıdaki örnekte yer tutucu, {VERSION} Microsoft Graph API'sinin sürümüdür (örneğin: v1.0).

{
  "AzureAd": {
    "Authority": "https://login.microsoftonline.com/{TENANT ID}",
    "ClientId": "{CLIENT ID}",
    "ValidateAuthority": true
  },
  "MicrosoftGraph": {
    "BaseUrl": "https://graph.microsoft.com",
    "Version": "v1.0",
    "Scopes": [
      "user.read"
    ]
  }
}

Aşağıdaki GraphClientExtensions sınıfı tek başına uygulamaya ekleyin. Kapsamlar yönteminde Scopes öğesinin AccessTokenRequestOptions özelliğine AuthenticateRequestAsync sağlanır. , IHttpProvider.OverallTimeout Microsoft Graph'tan yanıt almak için daha fazla zaman tanımak için varsayılan 100 saniye değerinden HttpClient 300 saniyeye uzatılır.

Barındırılan çözümünBlazor WebAssembly tek başına uygulamasına veya Client uygulamasına aşağıdaki GraphClientExtensions sınıfı ekleyin. Kapsamlar yönteminde Scopes öğesinin AccessTokenRequestOptions özelliğine AuthenticateRequestAsync sağlanır. , IHttpProvider.OverallTimeout Microsoft Graph'tan yanıt almak için daha fazla zaman tanımak için varsayılan 100 saniye değerinden HttpClient 300 saniyeye uzatılır.

Erişim belirteci alınmazsa, aşağıdaki kod Graph istekleri için taşıyıcı yetkilendirme üst bilgisi ayarlamaz.

GraphClientExtensions.cs:

using System.Net.Http.Headers;
using Microsoft.AspNetCore.Components.WebAssembly.Authentication;
using Microsoft.Authentication.WebAssembly.Msal.Models;
using Microsoft.Graph;

namespace BlazorSample;

internal static class GraphClientExtensions
{
    public static IServiceCollection AddGraphClient(
        this IServiceCollection services, string? baseUrl, List<string>? scopes)
    {
        if (string.IsNullOrEmpty(baseUrl) || scopes?.Count == 0)
        {
            return services;
        }

        services.Configure<RemoteAuthenticationOptions<MsalProviderOptions>>(
            options =>
            {
                scopes?.ForEach((scope) =>
                {
                    options.ProviderOptions.DefaultAccessTokenScopes.Add(scope);
                });
            });

        services.AddScoped<IAuthenticationProvider, GraphAuthenticationProvider>();

        services.AddScoped<IHttpProvider, HttpClientHttpProvider>(sp =>
            new HttpClientHttpProvider(new HttpClient()));

        services.AddScoped(sp =>
        {
            return new GraphServiceClient(
                baseUrl,
                sp.GetRequiredService<IAuthenticationProvider>(),
                sp.GetRequiredService<IHttpProvider>());
        });

        return services;
    }

    private class GraphAuthenticationProvider(IAccessTokenProvider tokenProvider, 
        IConfiguration config) : IAuthenticationProvider
    {
        private readonly IConfiguration config = config;

        public IAccessTokenProvider TokenProvider { get; } = tokenProvider;

        public async Task AuthenticateRequestAsync(HttpRequestMessage request)
        {
            var result = await TokenProvider.RequestAccessToken(
                new AccessTokenRequestOptions()
                { 
                    Scopes = config.GetSection("MicrosoftGraph:Scopes").Get<string[]>()
                });

            if (result.TryGetToken(out var token))
            {
                request.Headers.Authorization ??= new AuthenticationHeaderValue(
                    "Bearer", token.Value);
            }
        }
    }

    private class HttpClientHttpProvider(HttpClient client) : IHttpProvider
    {
        private readonly HttpClient client = client;

        public ISerializer Serializer { get; } = new Serializer();

        public TimeSpan OverallTimeout { get; set; } = TimeSpan.FromSeconds(300);

        public Task<HttpResponseMessage> SendAsync(HttpRequestMessage request)
        {
            return client.SendAsync(request);
        }

        public Task<HttpResponseMessage> SendAsync(HttpRequestMessage request,
            HttpCompletionOption completionOption,
            CancellationToken cancellationToken)
        {
            return client.SendAsync(request, completionOption, cancellationToken);
        }

        public void Dispose()
        {
        }
    }
}

Önemli

Program dosyasına Graph istemci hizmetlerini ve yapılandırmasını uzantı yöntemiyle AddGraphClient ekleyin:

var baseUrl = string.Join("/",
    builder.Configuration.GetSection("MicrosoftGraph")["BaseUrl"] ??
        "https://graph.microsoft.com",
    builder.Configuration.GetSection("MicrosoftGraph")["Version"] ??
        "v1.0");
var scopes = builder.Configuration.GetSection("MicrosoftGraph:Scopes")
    .Get<List<string>>() ?? [ "user.read" ];

builder.Services.AddGraphClient(baseUrl, scopes);

Graph SDK'sını kullanarak bir bileşenden Graph API'sini çağırma

Aşağıdaki UserData bileşen, kullanıcının ME-ID profil verilerini almak ve cep telefonu numarasını görüntülemek için eklenen GraphServiceClient öğesini kullanır. ME-ID'de oluşturduğunuz tüm test kullanıcıları için kullanıcının ME-ID profiline Azure portalında bir cep telefonu numarası verdiğinizden emin olun.

UserData.razor:

@page "/user-data"
@using Microsoft.AspNetCore.Authorization
@using Microsoft.Graph
@attribute [Authorize]
@inject GraphServiceClient Client

<PageTitle>User Data</PageTitle>

<h1>Microsoft Graph User Data</h1>

@if (!string.IsNullOrEmpty(user?.MobilePhone))
{
    <p>Mobile Phone: @user.MobilePhone</p>
}

@code {
    private Microsoft.Graph.User? user;

    protected override async Task OnInitializedAsync()
    {
        var request = Client.Me.Request();
        user = await request.GetAsync();
    }
}

Bileşendeki bileşenin sayfasına NavMenu bir bağlantı ekleyin (Layout/NavMenu.razor):

<div class="nav-item px-3">
    <NavLink class="nav-link" href="user-data">
        <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> User Data
    </NavLink>
</div>

İpucu

Bir uygulamaya kullanıcı eklemek için, Uygulama rolleri ile veya uygulama rolleri olmadan uygulama kaydına kullanıcı atama bölümüne bakın.

Graph SDK'sını kullanarak kullanıcı taleplerini özelleştirme

Aşağıdaki özel kullanıcı hesabı fabrikasında:

ILogger Yöntemdeki bilgileri veya hataları CreateUserAsync günlüğe kaydetmek istemeniz durumunda kolaylık sağlamak için bir (logger) eklenir.
bir AccessTokenNotAvailableException oluşturulursa, kullanıcı kendi hesabında oturum açmak için identity sağlayıcıya yönlendirilir. Erişim belirteci istendiğinde ek veya farklı eylemler yapılabilir. Örneğin, uygulama daha fazla araştırma için öğesini günlüğe AccessTokenNotAvailableException kaydedebilir ve bir destek bileti oluşturabilir.
Çerçeveler RemoteUserAccount kullanıcının hesabını temsil eder. Uygulama genişleten RemoteUserAccountbir özel kullanıcı hesabı sınıfı gerektiriyorsa, aşağıdaki kodda için özel kullanıcı hesabı sınıfınızı RemoteUserAccount değiştirin.

CustomAccountFactory.cs:

using System.Security.Claims;
using Microsoft.AspNetCore.Components.WebAssembly.Authentication;
using Microsoft.AspNetCore.Components.WebAssembly.Authentication.Internal;
using Microsoft.Graph;

public class CustomAccountFactory(IAccessTokenProviderAccessor accessor, 
        IServiceProvider serviceProvider, ILogger<CustomAccountFactory> logger)
    : AccountClaimsPrincipalFactory<RemoteUserAccount>(accessor)
{
    private readonly ILogger<CustomAccountFactory> logger = logger;
    private readonly IServiceProvider serviceProvider = serviceProvider;

    public override async ValueTask<ClaimsPrincipal> CreateUserAsync(
        RemoteUserAccount account,
        RemoteAuthenticationUserOptions options)
    {
        var initialUser = await base.CreateUserAsync(account, options);

        if (initialUser.Identity is not null && 
            initialUser.Identity.IsAuthenticated)
        {
            var userIdentity = initialUser.Identity as ClaimsIdentity;

            if (userIdentity is not null)
            {
                try
                {
                    var client = ActivatorUtilities
                        .CreateInstance<GraphServiceClient>(serviceProvider);
                    var request = client.Me.Request();
                    var user = await request.GetAsync();

                    if (user is not null)
                    {
                        userIdentity.AddClaim(new Claim("mobilephone",
                            user.MobilePhone ?? "(000) 000-0000"));
                        userIdentity.AddClaim(new Claim("officelocation",
                            user.OfficeLocation ?? "Not set"));
                    }
                }
                catch (AccessTokenNotAvailableException exception)
                {
                    exception.Redirect();
                }
            }
        }

        return initialUser;
    }
}

MSAL kimlik doğrulamasını özel kullanıcı hesabı fabrikasını kullanacak şekilde yapılandırın.

Program Dosyanın ad alanını Microsoft.AspNetCore.Components.WebAssembly.Authentication kullandığını onaylayın:

using Microsoft.AspNetCore.Components.WebAssembly.Authentication;

var baseUrl = string.Join("/",
    builder.Configuration.GetSection("MicrosoftGraph")["BaseUrl"] ??
        "https://graph.microsoft.com",
    builder.Configuration.GetSection("MicrosoftGraph")["Version"] ??
        "v1.0");
var scopes = builder.Configuration.GetSection("MicrosoftGraph:Scopes")
    .Get<List<string>>() ?? [ "user.read" ];

builder.Services.AddGraphClient(baseUrl, scopes);

Uygulama genişleten RemoteUserAccountbir özel kullanıcı hesabı sınıfı kullanıyorsa, aşağıdaki kodda için özel kullanıcı hesabı sınıfını RemoteUserAccount değiştirin.

builder.Services.AddMsalAuthentication<RemoteAuthenticationState,
    RemoteUserAccount>(options =>
    {
        builder.Configuration.Bind("AzureAd", 
            options.ProviderOptions.Authentication);
    })
    .AddAccountClaimsPrincipalFactory<RemoteAuthenticationState, RemoteUserAccount,
        CustomAccountFactory>();

Kullanıcı ME-ID ile kimlik doğrulamasından geçtikten sonra kullanıcının taleplerini incelemek için aşağıdaki UserClaims bileşeni kullanabilirsiniz:

UserClaims.razor:

@page "/user-claims"
@using System.Security.Claims
@using Microsoft.AspNetCore.Authorization
@attribute [Authorize]
@inject AuthenticationStateProvider AuthenticationStateProvider

<h1>User Claims</h1>

@if (claims.Any())
{
    <ul>
        @foreach (var claim in claims)
        {
            <li>@claim.Type: @claim.Value</li>
        }
    </ul>
}
else
{
    <p>No claims found.</p>
}

@code {
    private IEnumerable<Claim> claims = Enumerable.Empty<Claim>();

    protected override async Task OnInitializedAsync()
    {
        var authState = await AuthenticationStateProvider
            .GetAuthenticationStateAsync();
        var user = authState.User;

        claims = user.Claims;
    }
}

Bileşendeki bileşenin sayfasına NavMenu bir bağlantı ekleyin (Layout/NavMenu.razor):

<div class="nav-item px-3">
    <NavLink class="nav-link" href="user-claims">
        <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> User Claims
    </NavLink>
</div>

Aşağıdaki örneklerde, bir aramayı işlemek üzere kullanıcının cep telefonu numarasını almak veya kullanıcının taleplerini bir cep telefonu numarası talebi ve bir ofis konumu talebi içerecek şekilde özelleştirmek için Graph API çağrıları için adlı HttpClient bir kullanılır.

Örnekler, tek başına Blazor WebAssembly uygulama için Microsoft.Extensions.Http paket başvurusu gerektirir.

Örnekler, tek başına Blazor WebAssembly uygulama veya barındırılan Blazor WebAssembly bir çözümün Client uygulaması için Microsoft.Extensions.Http paket başvurusu gerektirir.

Not

"MicrosoftGraph": {
  "BaseUrl": "https://graph.microsoft.com",
  "Version": "{VERSION}",
  "Scopes": [
    "user.read"
  ]
}

Yukarıdaki örnekte yer tutucu, {VERSION} Microsoft Graph API'sinin sürümüdür (örneğin: v1.0).

{
  "AzureAd": {
    "Authority": "https://login.microsoftonline.com/{TENANT ID}",
    "ClientId": "{CLIENT ID}",
    "ValidateAuthority": true
  },
  "MicrosoftGraph": {
    "BaseUrl": "https://graph.microsoft.com",
    "Version": "v1.0",
    "Scopes": [
      "user.read"
    ]
  }
}

Graph API ile çalışmak için dosyasında aşağıdaki GraphAuthorizationMessageHandler sınıf ve proje yapılandırmasını Program oluşturun. Temel URL ve kapsamlar yapılandırmadan işleyiciye sağlanır.

GraphAuthorizationMessageHandler.cs:

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

namespace BlazorSample;

public class GraphAuthorizationMessageHandler : AuthorizationMessageHandler
{
    public GraphAuthorizationMessageHandler(IAccessTokenProvider provider,
        NavigationManager navigation, IConfiguration config)
        : base(provider, navigation)
    {
        ConfigureHandler(
            authorizedUrls: [ 
                string.Join("/",
                    config.GetSection("MicrosoftGraph")["BaseUrl"] ??
                        "https://graph.microsoft.com",
                    config.GetSection("MicrosoftGraph")["Version"] ??
                        "v1.0")
            ],
            scopes: config.GetSection("MicrosoftGraph:Scopes")
                        .Get<List<string>>() ?? [ "user.read" ]);
    }
}

Yetkili URL'nin sondaki eğik çizgi (/) gereklidir. Yukarıdaki kod, uygulama ayarları yapılandırmasından aşağıdaki yetkili URL'yi oluşturur veya uygulama ayarları yapılandırması eksikse varsayılan olarak aşağıdaki yetkili URL'ye ayarlanır: https://graph.microsoft.com/v1.0/.

Program Dosyasında, graph API'sinin adlandırılmış öğesini HttpClient yapılandırın:

builder.Services.AddTransient<GraphAuthorizationMessageHandler>();

builder.Services.AddHttpClient("GraphAPI",
        client => client.BaseAddress = new Uri(
            string.Join("/",
                builder.Configuration.GetSection("MicrosoftGraph")["BaseUrl"] ??
                    "https://graph.microsoft.com",
                builder.Configuration.GetSection("MicrosoftGraph")["Version"] ??
                    "v1.0",
                string.Empty)))
    .AddHttpMessageHandler<GraphAuthorizationMessageHandler>();

Yukarıdaki örnekte , GraphAuthorizationMessageHandler DelegatingHandler için AddHttpMessageHandlergeçici bir hizmet olarak kaydedilir. kendi DI kapsamlarını yöneten için IHttpClientFactorygeçici kayıt önerilir. Daha fazla bilgi edinmek için aşağıdaki kaynaklara bakın:

Temel adreste sondaki eğik çizgi (/) gereklidir. Yukarıdaki kodda, için üçüncü bağımsız değişken string.Join sondaki eğik çizginin mevcut olduğundan emin olmaktır string.Empty : https://graph.microsoft.com/v1.0/.

Adlı bir bileşeni kullanarak bir bileşenden Graph API'lerini çağırma `HttpClient`

sınıfı, UserInfo.cs me-id tarafından kullanılan özniteliği ve JSON adı ile JsonPropertyNameAttribute gerekli kullanıcı profili özelliklerini belirler. Aşağıdaki örnek, kullanıcının cep telefonu numarası ve ofis konumu için özellikleri ayarlar.

UserInfo.cs:

using System.Text.Json.Serialization;

namespace BlazorSample;

public class UserInfo
{
    [JsonPropertyName("mobilePhone")]
    public string? MobilePhone { get; set; }

    [JsonPropertyName("officeLocation")]
    public string? OfficeLocation { get; set; }
}

Aşağıdaki UserData bileşende, graph API'sinin kullanıcının profil verilerine yönelik bir istek göndermesi için bir HttpClient oluşturulur. Kaynak me (me), Graph API isteğinin sürümüyle temel URL'ye eklenir. Graph tarafından döndürülen JSON verileri, sınıf özelliklerinde seri durumdan UserInfo çıkarılır. Aşağıdaki örnekte, cep telefonu numarası alınır. İsterseniz kullanıcının ME-ID profil ofisi konumunu eklemek için benzer kod ekleyebilirsiniz.userInfo.OfficeLocation Erişim belirteci isteği başarısız olursa, kullanıcı yeni bir erişim belirteci için uygulamada oturum açmak üzere yeniden yönlendirilir.

UserData.razor:

@page "/user-data"
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
@attribute [Authorize]
@inject IConfiguration Config
@inject IHttpClientFactory ClientFactory

<PageTitle>User Data</PageTitle>

<h1>Microsoft Graph User Data</h1>

@if (!string.IsNullOrEmpty(userInfo?.MobilePhone))
{
    <p>Mobile Phone: @userInfo.MobilePhone</p>
}

@code {
    private UserInfo? userInfo;

    protected override async Task OnInitializedAsync()
    {
        try
        {
            var client = ClientFactory.CreateClient("GraphAPI");

            userInfo = await client.GetFromJsonAsync<UserInfo>("me");
        }
        catch (AccessTokenNotAvailableException exception)
        {
            exception.Redirect();
        }
    }
}

Bileşendeki bileşenin sayfasına NavMenu bir bağlantı ekleyin (Layout/NavMenu.razor):

<div class="nav-item px-3">
    <NavLink class="nav-link" href="user-data">
        <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> User Data
    </NavLink>
</div>

İpucu

Bir uygulamaya kullanıcı eklemek için, Uygulama rolleri ile veya uygulama rolleri olmadan uygulama kaydına kullanıcı atama bölümüne bakın.

Aşağıdaki dizi, Graph API kapsamları için yeni kullanıcı akışını açıklar:

Yeni kullanıcı uygulamada ilk kez oturum açar.
Kullanıcı, Uygulamayı Azure onayı kullanıcı arabiriminde kullanmayı kabul eder.
Kullanıcı, Graph API verilerini ilk kez isteyen bir bileşen sayfasına erişir.
Kullanıcı, Graph API kapsamlarına onay vermek için Azure onay kullanıcı arabirimine yönlendirilir.
Graph API kullanıcı verileri döndürülür.

İlk oturum açmada kapsam sağlamanın (Graph API kapsamları için onay) gerçekleşmesini tercih ediyorsanız, MSAL kimlik doğrulaması kapsamlarını dosyada varsayılan erişim belirteci kapsamları olarak sağlayın Program :

+ var scopes = builder.Configuration.GetSection("MicrosoftGraph:Scopes")
+     .Get<List<string>>() ?? [ "user.read" ];

builder.Services.AddMsalAuthentication(options =>
{
    builder.Configuration.Bind("AzureAd", options.ProviderOptions.Authentication);

+   foreach (var scope in scopes)
+   {
+       options.ProviderOptions.DefaultAccessTokenScopes.Add(scope);
+   }
});

Önemli

Uygulamada önceki değişiklikler yapıldığında, kullanıcı akışı aşağıdaki sırayı benimser:

Yeni kullanıcı uygulamada ilk kez oturum açar.
Kullanıcı, Azure onayı kullanıcı arabiriminde uygulamayı ve Graph API kapsamlarını kullanmayı kabul eder.
Kullanıcı, Graph API verilerini ilk kez isteyen bir bileşen sayfasına erişir.
Graph API kullanıcı verileri döndürülür.

Graph API'siyle yerel olarak test ederken, kalan tanımlama bilgilerinin teste müdahale etmesini önlemek için her test için yeni bir InPrivate/gizli tarayıcı oturumu kullanmanızı öneririz. Daha fazla bilgi için bkz. Microsoft Entra ID ile ASP.NET Core Blazor WebAssembly tek başına uygulamasının güvenliğini sağlama.

Kullanıcı taleplerini adlandırılmış bir ad kullanarak özelleştirme `HttpClient`

Aşağıdaki örnekte uygulama, ME-ID kullanıcı profilinin verilerinden kullanıcı için cep telefonu numarası ve ofis konumu talepleri oluşturur. Uygulamanın ME-ID'de yapılandırılmış Graph API kapsamı olmalıdır User.Read . ME-ID'deki kullanıcı hesaplarını test etmek için cep telefonu numarası ve ofis konumu için azure portalı aracılığıyla kullanıcı profillerine eklenebilecek bir giriş gerekir.

Bu makalenin önceki bölümlerinde yer UserInfo alan yönergeleri izleyerek sınıfı uygulamaya eklemediyseniz, aşağıdaki sınıfı ekleyin ve gerekli kullanıcı profili özelliklerini ME-ID tarafından kullanılan öznitelik ve JSON adıyla JsonPropertyNameAttribute belirleyin. Aşağıdaki örnek, kullanıcının cep telefonu numarası ve ofis konumu için özellikleri ayarlar.

UserInfo.cs:

using System.Text.Json.Serialization;

namespace BlazorSample;

public class UserInfo
{
    [JsonPropertyName("mobilePhone")]
    public string? MobilePhone { get; set; }

    [JsonPropertyName("officeLocation")]
    public string? OfficeLocation { get; set; }
}

Aşağıdaki özel kullanıcı hesabı fabrikasında:

ILogger Yöntemdeki bilgileri veya hataları CreateUserAsync günlüğe kaydetmek istemeniz durumunda kolaylık sağlamak için bir (logger) eklenir.
bir AccessTokenNotAvailableException oluşturulursa, kullanıcı kendi hesabında oturum açmak için identity sağlayıcıya yönlendirilir. Erişim belirteci istendiğinde ek veya farklı eylemler yapılabilir. Örneğin, uygulama daha fazla araştırma için öğesini günlüğe AccessTokenNotAvailableException kaydedebilir ve bir destek bileti oluşturabilir.
Çerçeveler RemoteUserAccount kullanıcının hesabını temsil eder. Uygulama genişleten RemoteUserAccountbir özel kullanıcı hesabı sınıfı gerektiriyorsa, aşağıdaki kodda için özel kullanıcı hesabı sınıfını RemoteUserAccount değiştirin.

CustomAccountFactory.cs:

using System.Net.Http.Json;
using System.Security.Claims;
using Microsoft.AspNetCore.Components.WebAssembly.Authentication;
using Microsoft.AspNetCore.Components.WebAssembly.Authentication.Internal;

public class CustomAccountFactory(IAccessTokenProviderAccessor accessor,
        IHttpClientFactory clientFactory,
        ILogger<CustomAccountFactory> logger)
    : AccountClaimsPrincipalFactory<RemoteUserAccount>(accessor)
{
    private readonly ILogger<CustomAccountFactory> logger = logger;
    private readonly IHttpClientFactory clientFactory = clientFactory;

    public override async ValueTask<ClaimsPrincipal> CreateUserAsync(
        RemoteUserAccount account,
        RemoteAuthenticationUserOptions options)
    {
        var initialUser = await base.CreateUserAsync(account, options);

        if (initialUser.Identity is not null && 
            initialUser.Identity.IsAuthenticated)
        {
            var userIdentity = initialUser.Identity as ClaimsIdentity;

            if (userIdentity is not null)
            {
                try
                {
                    var client = clientFactory.CreateClient("GraphAPI");

                    var userInfo = await client.GetFromJsonAsync<UserInfo>("me");

                    if (userInfo is not null)
                    {
                        userIdentity.AddClaim(new Claim("mobilephone",
                            userInfo.MobilePhone ?? "(000) 000-0000"));
                        userIdentity.AddClaim(new Claim("officelocation",
                            userInfo.OfficeLocation ?? "Not set"));
                    }
                }
                catch (AccessTokenNotAvailableException exception)
                {
                    exception.Redirect();
                }
            }
        }

        return initialUser;
    }
}

MSAL kimlik doğrulaması, özel kullanıcı hesabı fabrikasını kullanacak şekilde yapılandırılmıştır. Dosyanın ad alanını kullandığını Microsoft.AspNetCore.Components.WebAssembly.Authentication onaylayarak Program başlayın:

using Microsoft.AspNetCore.Components.WebAssembly.Authentication;

Uygulama genişleten RemoteUserAccountbir özel kullanıcı hesabı sınıfı kullanıyorsa, aşağıdaki kodda uygulamanızın özel kullanıcı hesabı sınıfını ile RemoteUserAccount değiştirin.

builder.Services.AddMsalAuthentication<RemoteAuthenticationState, 
    RemoteUserAccount>(options =>
    {
        builder.Configuration.Bind("AzureAd", 
            options.ProviderOptions.Authentication);
    })
    .AddAccountClaimsPrincipalFactory<RemoteAuthenticationState, RemoteUserAccount, 
        CustomAccountFactory>();

Yukarıdaki örnek, MSAL ile ME-ID kimlik doğrulaması kullanan bir uygulamaya yöneliktir. OIDC ve API kimlik doğrulaması için benzer desenler vardır. Daha fazla bilgi için, ASP.NET Core Blazor WebAssembly ek güvenlik senaryoları makalesinin Yük talebiyle kullanıcıyı özelleştirme bölümündeki örneklere bakın.

Kullanıcı ME-ID ile kimlik doğrulamasından geçtikten sonra kullanıcının taleplerini incelemek için aşağıdaki UserClaims bileşeni kullanabilirsiniz:

UserClaims.razor:

@page "/user-claims"
@using System.Security.Claims
@using Microsoft.AspNetCore.Authorization
@attribute [Authorize]
@inject AuthenticationStateProvider AuthenticationStateProvider

<h1>User Claims</h1>

@if (claims.Any())
{
    <ul>
        @foreach (var claim in claims)
        {
            <li>@claim.Type: @claim.Value</li>
        }
    </ul>
}
else
{
    <p>No claims found.</p>
}

@code {
    private IEnumerable<Claim> claims = Enumerable.Empty<Claim>();

    protected override async Task OnInitializedAsync()
    {
        var authState = await AuthenticationStateProvider
            .GetAuthenticationStateAsync();
        var user = authState.User;

        claims = user.Claims;
    }
}

Bileşendeki bileşenin sayfasına NavMenu bir bağlantı ekleyin (Layout/NavMenu.razor):

<div class="nav-item px-3">
    <NavLink class="nav-link" href="user-claims">
        <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> User Claims
    </NavLink>
</div>

Uygulama rolleri olan veya olmayan bir uygulama kaydına kullanıcı atama

Azure portalında aşağıdaki adımlarla bir uygulama kaydına kullanıcı ekleyebilir ve kullanıcılara roller atayabilirsiniz.

Kullanıcı eklemek için Azure portalının ME-ID alanından Kullanıcılar'ı seçin:

Yeni kullanıcı Yeni kullanıcı> oluştur'u seçin.
Kullanıcı oluştur şablonunu kullanın.
Kullanıcının bilgilerini bölgede sağlayın Identity .
İlk parolayı oluşturabilir veya kullanıcının ilk kez oturum açarken değiştirebileceği bir başlangıç parolası atayabilirsiniz. Portal tarafından oluşturulan parolayı kullanıyorsanız, bunu şimdi not edin.
Kullanıcıyı oluşturmak için Oluştur'u seçin. Yeni kullanıcı arabirimi oluştur kapatıldığında Yenile'yi seçerek kullanıcı listesini güncelleştirin ve yeni kullanıcıyı gösterin.
Bu makaledeki örnekler için, kullanıcı listesinden adını seçerek, Özellikler'i seçerek ve iletişim bilgilerini düzenleyerek yeni kullanıcıya bir cep telefonu numarası atayın.

Uygulama rolleri olmadan uygulamaya kullanıcı atamak için:

Azure portalının ME-ID alanında Kurumsal uygulamalar'ı açın.
Listeden uygulamayı seçin.
Kullanıcı ve gruplar'ı seçin.
Kullanıcı/grup ekle'yi seçin.
Bir kullanıcı seçin.
Ata düğmesini seçin.

Uygulamaya uygulama rolleri ile kullanıcı atamak için:

Microsoft Entra Id grupları ve rolleri ile ASP.NET Core'daki Blazor WebAssembly yönergeleri izleyerek Azure portalında uygulamanın kaydına roller ekleyin.
Azure portalının ME-ID alanında Kurumsal uygulamalar'ı açın.
Listeden uygulamayı seçin.
Kullanıcı ve gruplar'ı seçin.
Kullanıcı/grup ekle'yi seçin.
Bir kullanıcı seçin ve uygulamaya erişmek için kendi rolünü seçin. Bir kullanıcının tüm rolleri atanana kadar kullanıcıyı uygulamaya ekleme işlemi yinelenerek kullanıcıya birden çok rol atanır. Birden çok rolü olan kullanıcılar, uygulamanın Kullanıcılar ve gruplar listesinde atanan her rol için bir kez listelenir.
Ata düğmesini seçin.

`DefaultAccessTokenScopes` ile `AdditionalScopesToConsent`

Bu makaledeki örnekler Graph API kapsamlarını yerine ile DefaultAccessTokenScopes AdditionalScopesToConsentsağlar.

AdditionalScopesToConsent , Azure onayı kullanıcı arabirimi aracılığıyla MSAL ile uygulamada ilk kez oturum açtıklarında kullanıcılar için Graph API kapsamları sağlayamadığı için kullanılmaz. Kullanıcı Graph SDK'sı ile Graph API'sine ilk kez erişmeye çalıştığında, bir özel durumla karşılaşır:

Microsoft.Graph.Models.ODataErrors.ODataError: Access token is empty.

Kullanıcı aracılığıyla DefaultAccessTokenScopessağlanan Graph API kapsamlarını sağladıktan sonra, uygulama sonraki bir kullanıcı oturumu açmak için kullanabilir AdditionalScopesToConsent . Ancak, uygulama kodunu değiştirmek, temsilci Graph kapsamlarına sahip yeni kullanıcıların düzenli aralıklarla eklenmesini veya uygulamaya yeni temsilci Graph API kapsamları eklenmesini gerektiren bir üretim uygulaması için anlamlı değildir.

Kullanıcı uygulamada ilk kez oturum açtığında Graph API erişimi için kapsam sağlamanın önceki tartışması yalnızca şunlar için geçerlidir:

Graph SDK'sını benimseyen uygulamalar.
Kullanıcılardan uygulamada ilk kez oturum açmalarında Graph kapsamlarına onay vermelerini isteyen Graph API erişimi için adlandırılmış bir ad HttpClient kullanan uygulamalar.

Kullanıcılardan ilk oturum açmalarında Graph kapsamlarına onay vermelerini istemeyen bir ad HttpClient kullanırken, kullanıcılar önceden yapılandırılmış olan adlı HttpClientaracılığıyla Graph API'sine ilk kez erişim istediklerinde Graph API DelegatingHandler kapsamları için Azure onay kullanıcı arabirimine yönlendirilir. Graph kapsamları başlangıçta adlandırılmış HttpClient yaklaşımla onaylanmamışsa veya DefaultAccessTokenScopes AdditionalScopesToConsent uygulama tarafından çağrılmadığında. Daha fazla bilgi için bu makaledeki adlandırılmış HttpClient kapsam bölümüne bakın.

Barındırılan Blazor WebAssembly çözümler

Bu makaledeki örnekler, Doğrudan tek başına Blazor WebAssembly bir uygulamadan veya doğrudan barındırılanBlazor WebAssembly bir çözümün uygulamasından Graph SDK'sını veya graph API'siyle Client adlandırılmış HttpClient bir uygulamayı kullanmayla ilgilidir. Bu makalenin kapsamında yer almayan ek bir senaryo, barındırılan bir Client çözüm uygulamasının web API'si aracılığıyla çözümün uygulamasını çağırmasına Server yöneliktir ve ardından Server uygulama Microsoft Graph'ı çağırmak ve uygulamaya veri döndürmek için Graph SDK'sını/API'sini Client kullanır. Bu desteklenen bir yaklaşım olsa da, bu makalede ele alınmıyor. Bu yaklaşımı benimsemek istiyorsanız:

Uygulamadan uygulamaya istek gönderme ve uygulamaya veri Client döndürme konusunda web API'sinin özellikleri için ASP.NET Core Blazor uygulamasından Server web API'sini Client çağırma sayfasındaki yönergeleri izleyin.
Graph SDK'sını bu senaryoda Server çözümün uygulaması olan tipik bir ASP.NET Core uygulamasıyla kullanmak için birincil Microsoft Graph belgelerindeki yönergeleri izleyin. Kurumsal yetkilendirme (tek kuruluş/ veya birden çok kuruluş/) ile barındırılan Blazor WebAssembly Blazor WebAssembly çözümü (ASP.NET Temel Barındırılan/-h|--hosted) ve Microsoft Graph seçeneğini (Microsoft identity platformu>Bağlı Hizmetler>Visual Studio'da Microsoft Graph izinleri ekleme veya --calls-graph .NET CLI dotnet new komutuyla seçeneği) oluşturmak için proje şablonunu kullanırsanız,ServerSingleOrgMultiOrg çözümün uygulaması, proje şablonundan çözüm oluşturulduğunda Graph SDK'sını kullanacak şekilde yapılandırılır.

Ek kaynaklar

Genel kılavuz

Microsoft Graph belgeleri
Microsoft Graph örnek Blazor WebAssembly uygulaması: Bu örnek, Uygulamalardan Office 365'teki verilere erişmek için Microsoft Graph .NET SDK'sının Blazor WebAssembly nasıl kullanılacağını gösterir.
Microsoft Graph öğreticisi ve Microsoft Graph örnek ASP.NET Core uygulaması ile .NET uygulamaları oluşturma: Bu kaynaklar istemci tarafıBlazor WebAssembly uygulamalardan Graph'ı çağırmak için doğrudan geçerli olmasa da, bağlı kaynaklardaki ME-ID uygulama yapılandırması ve Microsoft Graph kodlama uygulamaları tek başına Blazor WebAssembly uygulamalarla ilgilidir ve genel en iyi uygulamalar için danışılmalıdır.

Microsoft Graph belgeleri
Microsoft Graph örnek Blazor WebAssembly uygulaması: Bu örnek, Uygulamalardan Office 365'teki verilere erişmek için Microsoft Graph .NET SDK'sının Blazor WebAssembly nasıl kullanılacağını gösterir.
Microsoft Graph öğreticisi ve Microsoft Graph örnek ASP.NET Core uygulaması ile .NET uygulamaları oluşturma: Bu kaynaklar, uygulamanın uygulama adına tipik bir ASP.NET Core uygulaması olarak Microsoft Graph'a erişecek şekilde yapılandırıldığı Server barındırılanClientBlazor WebAssembly çözümler için en uygun olanlardır. Uygulama, Client Graph verileri için uygulamaya istekte bulunmak için web API'sini Server kullanır. Bu kaynaklar graph'ı istemci tarafıBlazor WebAssembly uygulamalardan çağırmak için doğrudan geçerli olmasa da, bağlı kaynaklardaki ME-ID uygulama yapılandırması ve Microsoft Graph kodlama uygulamaları tek başına Blazor WebAssembly uygulamalar için geçerlidir ve genel en iyi yöntemler için danışılmalıdır.

Aracılığıyla paylaş

ASP.NET Core ile Graph API kullanma Blazor WebAssembly

Graph SDK'sını kullanarak bir bileşenden Graph API'sini çağırma

Graph SDK'sını kullanarak kullanıcı taleplerini özelleştirme

Graph SDK'sını kullanarak bir bileşenden Graph API'sini çağırma

Graph SDK'sını kullanarak kullanıcı taleplerini özelleştirme

Adlı bir bileşeni kullanarak bir bileşenden Graph API'lerini çağırma `HttpClient`

Kullanıcı taleplerini adlandırılmış bir ad kullanarak özelleştirme `HttpClient`

Uygulama rolleri olan veya olmayan bir uygulama kaydına kullanıcı atama

`DefaultAccessTokenScopes` ile `AdditionalScopesToConsent`

Barındırılan Blazor WebAssembly çözümler

Ek kaynaklar

Genel kılavuz

Güvenlik kılavuzu

Ek kaynaklar

Aracılığıyla paylaş

ASP.NET Core ile Graph API kullanma Blazor WebAssembly

Graph SDK'sını kullanarak bir bileşenden Graph API'sini çağırma

Graph SDK'sını kullanarak kullanıcı taleplerini özelleştirme

Graph SDK'sını kullanarak bir bileşenden Graph API'sini çağırma

Graph SDK'sını kullanarak kullanıcı taleplerini özelleştirme

Adlı bir bileşeni kullanarak bir bileşenden Graph API'lerini çağırma HttpClient

Kullanıcı taleplerini adlandırılmış bir ad kullanarak özelleştirme HttpClient

Uygulama rolleri olan veya olmayan bir uygulama kaydına kullanıcı atama

DefaultAccessTokenScopes ile AdditionalScopesToConsent

Barındırılan Blazor WebAssembly çözümler

Ek kaynaklar

Genel kılavuz

Güvenlik kılavuzu

Ek kaynaklar

Adlı bir bileşeni kullanarak bir bileşenden Graph API'lerini çağırma `HttpClient`

Kullanıcı taleplerini adlandırılmış bir ad kullanarak özelleştirme `HttpClient`

`DefaultAccessTokenScopes` ile `AdditionalScopesToConsent`