Blazor WebAssemblyAzure Active Directory B2C ile ASP.NET Core barındırılan bir uygulamanın güvenliğini sağlama

Makale
11/09/2021
Okumak için 26 dakika

bu makalede kimlik doğrulaması için Azure Active Directory (AAD) B2C kullanan bir barındırılan Blazor WebAssembly çözümün nasıl oluşturulacağı açıklanır.

uygulamaları AAD B2C kaydetme ve çözüm oluşturma

Kiracı oluşturma

öğretici: bir AAD B2C kiracı oluşturmak için Azure Active Directory B2C kiracısı oluşturma ' daki yönergeleri izleyin. Kullanmak üzere bir kiracı oluşturduktan veya tanımladıktan hemen sonra bu makaleye geri dönün.

AAD B2C örneğini kaydedin (örneğin, https://contoso.b2clogin.com/ sonunda eğik çizgi içeren). Örnek, Azure portal uygulama kayıtları sayfasından uç noktalar penceresi AÇıLARAK bulunan bir Azure B2C uygulama kaydının şeması ve barındırmadır.

Sunucu API 'SI uygulaması kaydetme

sunucu apı uygulaması için bir AAD B2C uygulaması kaydetme:

Azure portal Azure Active Directory gidin. Kenar çubuğunda uygulama kayıtları seçin. Yeni kayıt düğmesini seçin.
uygulama için bir ad sağlayın (örneğin, Blazor Server AAD B2C).
Desteklenen hesap türleri için, çok kiracılı seçeneğini belirleyin: herhangi bir kimlik sağlayıcısındaki veya kuruluş dizinindeki hesaplar (Kullanıcı akışları olan kullanıcıların kimliğini doğrulamak için)
Sunucu API 'si uygulaması Bu senaryoda yeniden yönlendirme URI 'si gerektirmez, bu nedenle açılan kutudan Web 'e ve yeniden yönlendirme URI 'si girmeyin.
Doğrulanmamış bir yayımcı etki alanıkullanıyorsanız, izinlerin > OpenID 'ye yönetici onayı verdiğini ve offline_access izinlerinin seçili olduğunu onaylayın. Yayımcı etki alanı doğrulanırsa, bu onay kutusu mevcut değildir.
Kaydet’i seçin.

Aşağıdaki bilgileri kaydedin:

Sunucu API 'si uygulaması Uygulama (istemci) KIMLIĞI (örneğin, 41451fa7-82d9-4673-8fa5-69eff5a761fd )
AAD birincil/Publisher/tenant etki alanı (örneğin, contoso.onmicrosoft.com ): etki alanı, kayıtlı uygulama Azure portal marka dikey penceresinde Publisher etki alanı olarak kullanılabilir.

API 'Yi kullanıma sunma bölümünde:

Kapsam ekle’yi seçin.
Kaydet ve devam et’i seçin.
Bir kapsam adı sağlayın (örneğin, API.Access ).
Yönetici izni görünen adı sağlayın (örneğin, Access API ).
Yönetici onay açıklaması sağlayın (örneğin, Allows the app to access server app API endpoints. ).
Durumun etkin olarak ayarlandığını onaylayın.
Kapsam Ekle' yi seçin.

Aşağıdaki bilgileri kaydedin:

Uygulama KIMLIĞI URI 'SI (örneğin, api://41451fa7-82d9-4673-8fa5-69eff5a761fd , https://contoso.onmicrosoft.com/41451fa7-82d9-4673-8fa5-69eff5a761fd veya belirttiğiniz özel değer)
Kapsam adı (örneğin, API.Access )

İstemci uygulamasını kaydetme

istemci uygulaması için bir AAD B2C uygulaması kaydetme:

Azure portal Azure Active Directory gidin. Kenar çubuğunda uygulama kayıtları seçin. Yeni kayıt düğmesini seçin.
uygulama için bir ad sağlayın (örneğin, Blazor istemci AAD B2C).
Desteklenen hesap türleri için, çok kiracılı seçeneğini belirleyin: herhangi bir kimlik sağlayıcısındaki veya kuruluş dizinindeki hesaplar (Kullanıcı akışları olan kullanıcıların kimliğini doğrulamak için)
Yeniden yönlendirme URI 'si açılan öğesini tek SAYFALı uygulama (Spa) olarak ayarlayın ve aşağıdaki yeniden yönlendirme URI 'sini sağlayın: https://localhost:{PORT}/authentication/login-callback . Üzerinde çalışan bir uygulamanın varsayılan bağlantı noktası Kestrel 5001 ' dir. Uygulama farklı bir Kestrel bağlantı noktasında çalışıyorsa, uygulamanın bağlantı noktasını kullanın. IIS Express için, uygulama için rastgele oluşturulan bağlantı noktası, Server hata ayıklama panelinde uygulamanın özelliklerinde bulunabilir. uygulama bu noktada mevcut olmadığından ve IIS Express bağlantı noktası bilinmediğinden, uygulama oluşturulduktan sonra bu adıma geri dönün ve yeniden yönlendirme urı 'sini güncelleştirin. uygulama oluştur bölümünde, kullanıcıların yeniden yönlendirme urı 'sini güncelleştirmesi IIS Express hatırlatmak için bir açıklama belirir.
Doğrulanmamış bir yayımcı etki alanıkullanıyorsanız, izinlerin > OpenID 'ye yönetici onayı verdiğini ve offline_access izinlerinin seçili olduğunu onaylayın. Yayımcı etki alanı doğrulanırsa, bu onay kutusu mevcut değildir.
Kaydet’i seçin.
Uygulama (istemci) KIMLIĞINI (örneğin, 4369008b-21fa-427c-abaa-9b53bf58e538 ) kaydedin.

Kimlik doğrulama > platformu yapılandırmalarında > tek sayfalı uygulama (Spa):

Yeniden YÖNLENDIRME URI 'sinin https://localhost:{PORT}/authentication/login-callback mevcut olduğunu onaylayın.
Örtük izin Için, erişim belirteçleri ve Kimlik belirteçleri onay kutularının seçili olmadığından emin olun.
Uygulamanın kalan varsayılan değerleri bu deneyim için kabul edilebilir.
Kaydet düğmesini seçin.

API izinleri:

Izin Ekle ' yi ve ardından API 'lerim' i seçin.
ad sütunundan sunucu apı uygulamasını seçin (örneğin, Blazor Server AAD B2C).
API listesini açın.
API 'ye erişimi etkinleştirin (örneğin, API.Access ).
Izin Ekle' yi seçin.
{Tenant Name} için yönetici onayı Izni ver düğmesini seçin. Onaylamak için Evet’i seçin.

Home > Azure AD B2C > Kullanıcı akışları:

Kaydolma ve oturum açma Kullanıcı akışı oluşturma

En azından, > context.User.Identity.Name LoginDisplay bileşen () içinde doldurmak için uygulama talepleri görünen adı Kullanıcı özniteliğini seçin Shared/LoginDisplay.razor .

Uygulama için oluşturulan kaydolma ve oturum açma Kullanıcı akış adını kaydedin (örneğin, B2C_1_signupsignin ).

Uygulama oluşturma

Aşağıdaki komutta yer tutucuları, daha önce kaydedilen bilgilerle değiştirin ve komutu bir komut kabuğu 'nda yürütün:

dotnet new blazorwasm -au IndividualB2C --aad-b2c-instance "{AAD B2C INSTANCE}" --api-client-id "{SERVER API APP CLIENT ID}" --app-id-uri "{SERVER API APP ID URI}" --client-id "{CLIENT APP CLIENT ID}" --default-scope "{DEFAULT SCOPE}" --domain "{TENANT DOMAIN}" -ho -o {APP NAME} -ssp "{SIGN UP OR SIGN IN POLICY}"

Uyarı

-Uygulama adında, {APP NAME} OIDC uygulama tanımlayıcısının boyutunu kesen tireler () kullanmaktan kaçının. Blazor WebAssemblyProje şablonundaki mantık, çözümün yapılandırmasındaki OIDC uygulama tanımlayıcısı için proje adını kullanır. Pascal Case ( BlazorSample ) veya alt çizgi ( Blazor_Sample ), kabul edilebilir alternatiflerdir. Daha fazla bilgi için bkz. barındırılan bir Blazor WebAssembly Proje adı kesmesi OIDC güvenliğine ilişkin çizgiler (DotNet/aspnetcore #35337).

Yer tutucu	Azure portal adı	Örnek
`{AAD B2C INSTANCE}`	Örnek	`https://contoso.b2clogin.com/` (sondaki eğik çizgiyi içerir)
`{APP NAME}`	—	`BlazorSample`
`{CLIENT APP CLIENT ID}`	Uygulamanın uygulama (istemci) KIMLIĞI `Client`	`4369008b-21fa-427c-abaa-9b53bf58e538`
`{DEFAULT SCOPE}`	Kapsam adı	`API.Access`
`{SERVER API APP CLIENT ID}`	Sunucu API uygulaması için uygulama (ISTEMCI) kimliği	`41451fa7-82d9-4673-8fa5-69eff5a761fd`
`{SERVER API APP ID URI}`	Uygulama KIMLIĞI URI 'SI†	`41451fa7-82d9-4673-8fa5-69eff5a761fd`†
`{SIGN UP OR SIGN IN POLICY}`	Kaydolma/oturum açma Kullanıcı akışı	`B2C_1_signupsignin1`
`{TENANT DOMAIN}`	birincil/Publisher/tenant etki alanı	`contoso.onmicrosoft.com`

†Blazor WebAssemblyŞablon, api:// komutta GEÇIRILEN uygulama kimliği URI bağımsız değişkenine otomatik olarak bir şeması ekler dotnet new . Yer tutucu için uygulama KIMLIĞI URI 'SI sağlarken {SERVER API APP ID URI} ve düzen ise, api:// api:// Yukarıdaki tabloda örnek değer olarak gösterildiği gibi, bağımsız değişkenden düzeni () kaldırın. Uygulama KIMLIĞI URI 'SI özel bir değer ise veya başka bir şemaya sahipse (örneğin, https:// öğesine benzer bir doğrulanmamış yayımcı etki alanı için https://contoso.onmicrosoft.com/41451fa7-82d9-4673-8fa5-69eff5a761fd ), varsayılan kapsam URI 'sini el ile güncelleştirmeniz ve api:// Client uygulama şablon tarafından oluşturulduktan sonra düzeni kaldırmanız gerekir. Daha fazla bilgi için, erişim belirteci kapsamları bölümündeki nota bakın. Blazor WebAssemblyşablon bu senaryolara yönelik ASP.NET Core gelecek bir sürümünde değiştirilebilir. Daha fazla bilgi için bkz. IStream şablonuyla uygulama kimliği URI 'si Için çift düzen ( Blazor barındırılan, tek kuruluş) (DotNet/aspnetcore #27417).

Seçeneğiyle belirtilen çıktı konumu, -o|--output mevcut değilse bir proje klasörü oluşturur ve uygulamanın adının bir parçası haline gelir. -Uygulama adında, OıDC uygulama tanımlayıcısının boyutunu kesen tireler () kullanmaktan kaçının (ÖNCEKI uyarıya bakın).

Not

Blazor WebAssembly Blazor WebAssembly Proje şablonu tarafından barındırılan bir ÇÖZÜMDE ayarlanan kapsamın uygulama kimliği URI 'si ana bilgisayarı yineleniyor olabilir. Koleksiyon için yapılandırılan kapsamın DefaultAccessTokenScopes uygulamada doğru olduğundan emin olun Program.cs Client .

Not

Azure portal, Client uygulamanın platform yapılandırması yeniden yönlendirme URI 'si , Kestrel sunucuda varsayılan ayarlarla çalışan uygulamalar için bağlantı noktası 5001 için yapılandırılır.

Client uygulama rastgele bir IIS Express bağlantı noktasında çalışıyorsa, uygulamanın bağlantı noktası hata ayıklama panelindeki sunucu apı 'si uygulamasının özelliklerinde bulunabilir.

Bağlantı noktası, Client uygulamanın bilinen bağlantı noktasıyla daha önce yapılandırılmamışsa, Client Azure Portal uygulamanın kaydına dönün ve yenıden yönlendirme URI 'sini doğru bağlantı noktasıyla güncelleştirin.

`Server` Uygulama yapılandırması

Bu bölüm, çözümün uygulaması ile ilgilidir Server .

Kimlik doğrulama paketi

Microsoft platformu ile ASP.NET Core web apı 'lerine yönelik kimlik doğrulama ve yetkilendirme desteği Identity paket tarafından sağlanır Microsoft.Identity.Web :

<PackageReference Include="Microsoft.Identity.Web" Version="{VERSION}" />

{VERSION}yer tutucu, uygulamanın paylaşılan framework sürümüyle eşleşen ve paketin sürüm geçmişinde NuGet galerisindebulunan en son kararlı sürümünü temsil eder.

Server Şablondan oluşturulan bir barındırılan çözümün uygulaması, Blazor Blazor WebAssembly Microsoft.Identity.Web.UI paketi varsayılan olarak içerir. Paket, Web Apps 'te Kullanıcı kimlik doğrulaması için kullanıcı ARABIRIMI ekler ve Framework tarafından kullanılmaz Blazor . Server Uygulama hiçbir daha doğrudan Kullanıcı kimliğini doğrulamak için kullanılmıyorsa, paket başvurusunu Server uygulamanın proje dosyasından kaldırmak güvenlidir.

Kimlik doğrulama hizmeti desteği

AddAuthenticationYöntemi, uygulama içinde kimlik doğrulama hizmetlerini ayarlar ve JWT taşıyıcı işleyicisini varsayılan kimlik doğrulama yöntemi olarak yapılandırır. AddMicrosoftIdentityWebApiYöntemi, Web API 'Sini Microsoft Platformu v 2.0 ile korumak için hizmetleri yapılandırır Identity . Bu yöntem AzureAdB2C , kimlik doğrulama seçeneklerini başlatmak için gerekli ayarlarla uygulamanın yapılandırmasında bir bölüm bekler.

services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
    .AddMicrosoftIdentityWebApi(Configuration.GetSection("AzureAdB2C"));

UseAuthentication UseAuthorizationaşağıdakileri doğrulayın:

Uygulama, gelen isteklerde belirteçleri ayrıştırmaya ve doğrulamaya çalışır.
Uygun kimlik bilgileri olmadan korunan kaynağa erişmeye çalışan istekler başarısız olur.

app.UseAuthentication();
app.UseAuthorization();

Kullanıcı. Identity . Ada

Varsayılan olarak, User.Identity.Name doldurulmaz.

Uygulamayı talep türünden değeri alacak şekilde yapılandırmak için name :

İçin bir ad alanı Microsoft.AspNetCore.Authentication.JwtBearer ekleyin Program.cs :
```
using Microsoft.AspNetCore.Authentication.JwtBearer;
```

TokenValidationParameters.NameClaimTypeİçindeki öğesinin öğesini yapılandırın JwtBearerOptions Program.cs :

builder.Services.Configure<JwtBearerOptions>(
    JwtBearerDefaults.AuthenticationScheme, options =>
    {
        options.TokenValidationParameters.NameClaimType = "name";
    });

Uygulama ayarları

appsettings.jsonDosya, erişim belirteçlerini doğrulamak için kullanılan JWT taşıyıcı işleyicisini yapılandırma seçeneklerini içerir.

{
  "AzureAdB2C": {
    "Instance": "https://{TENANT}.b2clogin.com/",
    "ClientId": "{SERVER API APP CLIENT ID}",
    "Domain": "{TENANT DOMAIN}",
    "SignUpSignInPolicyId": "{SIGN UP OR SIGN IN POLICY}"
  }
}

Örnek:

{
  "AzureAdB2C": {
    "Instance": "https://contoso.b2clogin.com/",
    "ClientId": "41451fa7-82d9-4673-8fa5-69eff5a761fd",
    "Domain": "contoso.onmicrosoft.com",
    "SignUpSignInPolicyId": "B2C_1_signupsignin1",
  }
}

Hava tahmin denetleyicisi

Dalgalı tahmin denetleyicisi (denetleyiciler/dalgalı Therforetcontroller. cs [Authorize] ), bir korumalı API 'yi denetleyiciye uygulanmış şekilde gösterir. Bunun anlaşılması önemlidir :

Bu API denetleyicisindeki [Authorize] özniteliği , bu API 'yi yetkisiz erişime karşı koruyan tek şeydir.
Uygulamada kullanılan [Authorize] özniteliği yalnızca uygulamanın, Blazor WebAssembly uygulamanın düzgün şekilde çalışması için yetkilendirilmiş olması gerektiğine yönelik bir ipucu görevi görür.

[Authorize]
[ApiController]
[Route("[controller]")]
public class WeatherForecastController : ControllerBase
{
    [HttpGet]
    public IEnumerable<WeatherForecast> Get()
    {
        ...
    }
}

`Client` Uygulama yapılandırması

Bu bölüm, çözümün uygulaması ile ilgilidir Client .

Kimlik doğrulama paketi

Tek bir B2C hesabı () kullanmak üzere bir uygulama oluşturulduğunda IndividualB2C , uygulama otomatik olarak Microsoft kimlik doğrulama kitaplığı () için bir paket başvurusu alır Microsoft.Authentication.WebAssembly.Msal . Paket, uygulamanın kullanıcıların kimliğini doğrulamasına ve korunan API 'Leri çağırmak için belirteçleri almasına yardımcı olan bir dizi temel sunar.

Bir uygulamaya kimlik doğrulaması ekliyorsanız, paketi uygulamanın proje dosyasına el ile ekleyin:

<PackageReference Include="Microsoft.Authentication.WebAssembly.Msal" 
  Version="{VERSION}" />

yer tutucu için {VERSION} , paketin, uygulamanın paylaşılan framework sürümüyle eşleşen en son kararlı sürümü, NuGet. orgkonumundaki paketin sürüm geçmişinde bulunabilir.

Microsoft.Authentication.WebAssembly.MsalPaket geçişli Microsoft.AspNetCore.Components.WebAssembly.Authentication olarak uygulamayı uygulamaya ekler.

Kimlik doğrulama hizmeti desteği

HttpClientSunucu projesine istek yaparken erişim belirteçlerini içeren örnekler için destek eklenmiştir.

Program.cs:

builder.Services.AddHttpClient("{APP ASSEMBLY}.ServerAPI", client => 
    client.BaseAddress = new Uri(builder.HostEnvironment.BaseAddress))
    .AddHttpMessageHandler<BaseAddressAuthorizationMessageHandler>();

builder.Services.AddScoped(sp => sp.GetRequiredService<IHttpClientFactory>()
    .CreateClient("{APP ASSEMBLY}.ServerAPI"));

Yer tutucu, {APP ASSEMBLY} uygulamanın derleme adıdır (örneğin, BlazorSample.Client ).

Kullanıcıları kimlik doğrulama desteği, hizmet kapsayıcısında AddMsalAuthentication paket tarafından sağlanmış uzantı yöntemiyle kaydedilir Microsoft.Authentication.WebAssembly.Msal . Bu yöntem, uygulamanın Identity sağlayıcı (IP) ile etkileşim kurması için gereken hizmetleri ayarlar.

Program.cs:

builder.Services.AddMsalAuthentication(options =>
{
    builder.Configuration.Bind("AzureAdB2C", options.ProviderOptions.Authentication);
    options.ProviderOptions.DefaultAccessTokenScopes.Add("{SCOPE URI}");
});

AddMsalAuthenticationYöntemi, bir uygulamanın kimliğini doğrulamak için gereken parametreleri yapılandırmak için bir geri çağırma işlemini kabul eder. uygulamayı kaydettiğinizde, uygulamayı yapılandırmak için gereken değerler Azure portalından AAD yapılandırmasından elde edilebilir.

Yapılandırma dosya tarafından sağlanır wwwroot/appsettings.json :

{
  "AzureAdB2C": {
    "Authority": "{AAD B2C INSTANCE}{TENANT DOMAIN}/{SIGN UP OR SIGN IN POLICY}",
    "ClientId": "{CLIENT APP CLIENT ID}",
    "ValidateAuthority": false
  }
}

Önceki yapılandırmada, {AAD B2C INSTANCE} sonunda eğik çizgi bulunur.

Örnek:

{
  "AzureAdB2C": {
    "Authority": "https://contoso.b2clogin.com/contoso.onmicrosoft.com/B2C_1_signupsignin1",
    "ClientId": "4369008b-21fa-427c-abaa-9b53bf58e538",
    "ValidateAuthority": false
  }
}

Erişim belirteci kapsamları

Varsayılan erişim belirteci kapsamları, erişim belirteci kapsamlarının listesini temsil eder:

Oturum açma isteğine varsayılan olarak dahildir.
Kimlik doğrulamasından hemen sonra bir erişim belirteci sağlamak için kullanılır.

tüm kapsamlar Azure Active Directory kuralları başına aynı uygulamaya ait olmalıdır. Gerektiğinde ek API uygulamaları için ek kapsamlar eklenebilir:

builder.Services.AddMsalAuthentication(options =>
{
    ...
    options.ProviderOptions.DefaultAccessTokenScopes.Add("{SCOPE URI}");
});

Not

Blazor WebAssemblyŞablon, api:// komutta GEÇIRILEN uygulama kimliği URI bağımsız değişkenine otomatik olarak bir şeması ekler dotnet new . Blazor Proje şablonundanbir uygulama oluştururken, varsayılan erişim belirteci kapsamı değerinin Azure Portal belirttiğiniz doğru özel uygulama kimliği URI değerini ya da aşağıdaki biçimlerden birine sahip bir değeri kullandığını doğrulayın:

Dizinin yayımcı etki alanına güvenilirse, varsayılan erişim belirteci kapsamı genellikle aşağıdaki örneğe benzer bir değerdir; burada API.Access varsayılan kapsam adıdır:
```
options.ProviderOptions.DefaultAccessTokenScopes.Add(
    "api://41451fa7-82d9-4673-8fa5-69eff5a761fd/API.Access");
```
Çift düzen () için değeri inceleyin api://api://... . Bir çift düzen varsa, ilk api:// düzeni değerden kaldırın.
Dizinin yayımcı etki alanı güvenilir olmadığında, varsayılan erişim belirteci kapsamı genellikle aşağıdaki örneğe benzer bir değerdir; burada API.Access varsayılan kapsam adıdır:
```
options.ProviderOptions.DefaultAccessTokenScopes.Add(
    "https://contoso.onmicrosoft.com/41451fa7-82d9-4673-8fa5-69eff5a761fd/API.Access");
```
Ek bir api:// düzenin () değerini inceleyin api://https://contoso.onmicrosoft.com/... . Ek bir api:// düzen varsa, api:// düzeni değerden kaldırın.

Blazor WebAssemblyşablon bu senaryolara yönelik ASP.NET Core gelecek bir sürümünde değiştirilebilir. Daha fazla bilgi için bkz. IStream şablonuyla uygulama kimliği URI 'si Için çift düzen ( Blazor barındırılan, tek kuruluş) (DotNet/aspnetcore #27417).

İle ek kapsamlar belirtin AdditionalScopesToConsent :

options.ProviderOptions.AdditionalScopesToConsent.Add("{ADDITIONAL SCOPE URI}");

Daha fazla bilgi için ek senaryolar makalesinin aşağıdaki bölümlerine bakın:

Çerçeve, açılır oturum açma modunu varsayılan olarak alır ve bir açılır pencere açılamadıklarında oturum açma moduna geri döner. ' İ özelliğini olarak ayarlayarak MSAL 'i yeniden yönlendirme modunu kullanacak şekilde yapılandırın LoginMode MsalProviderOptions redirect :

builder.Services.AddMsalAuthentication(options =>
{
    ...
    options.ProviderOptions.LoginMode = "redirect";
});

Varsayılan ayar popup ve dize değeri büyük/küçük harfe duyarlı değildir.

Dosya içeri aktarmalar

Microsoft.AspNetCore.Components.AuthorizationAd alanı, uygulama boyunca dosya aracılığıyla kullanılabilir hale getirilir _Imports.razor :

@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.AspNetCore.Components.WebAssembly.Http
@using Microsoft.JSInterop
@using {APPLICATION ASSEMBLY}.Client
@using {APPLICATION ASSEMBLY}.Client.Shared

Dizin sayfası

Dizin sayfası ( wwwroot/index.html ) sayfası, JavaScript'te tanımlayan bir AuthenticationService betik içerir. AuthenticationService OIDC protokolünün alt düzey ayrıntılarını işleme. Uygulama, kimlik doğrulama işlemlerini gerçekleştirmek için betikte tanımlanan yöntemleri dahili olarak çağırıyor.

<script src="_content/Microsoft.Authentication.WebAssembly.Msal/
    AuthenticationService.js"></script>

Uygulama bileşeni

Bileşeni App ( ) uygulamalarda bulunan App.razor App bileşene Blazor Server benzer:

Bileşeni, CascadingAuthenticationState uygulamanın geri AuthenticationState kalanına ifşayı yönetir.
Bileşen, AuthorizeRouteView geçerli kullanıcının belirli bir sayfaya erişme yetkisine sahip olduğundan veya başka bir şekilde bileşeni işlemeye yetkili olduğundan emin RedirectToLogin olur.
Bileşen, RedirectToLogin yetkisiz kullanıcıları oturum açma sayfasına yeniden yönlendirmeyi yönetir.

ASP.NET Core'nin yayınlarında çerçevede yapılan değişikliklerden dolayı, bu bölümde Razor App bileşenin ( App.razor ) işaretlemesi gösterilmez. Bileşenin verilen bir sürüme yönelik işaretlemelerini incelemek için aşağıdaki yaklaşımlardan birini kullanın:

Kullanmak istediğiniz uygulamanın sürümü için varsayılan proje şablonundan kimlik Blazor WebAssembly doğrulaması için ASP.NET Core bir uygulama oluşturun. Oluşturulan App uygulamada bileşeni App.razor ( ) inceleme.
Başvuru App kaynağında App.razor bileşeni ( ) inceleme.

Not

Belge, ASP.NET Core kaynağı yüklemesi için ürün biriminin bir sonraki sürümü için geçerli geliştirmeyi temsil eden deponun dal main ASP.NET Core. Farklı bir sürümün dallarını seçmek için Dalları veya etiketleri değiştir açılan listesini kullanarak dalı seçin. Örneğin, ASP.NET Core release/5.0 5.0 sürümü için dalı seçin.

RedirectToLogin bileşeni

RedirectToLoginBileşen ( Shared/RedirectToLogin.razor ):

Yetkisiz kullanıcıların oturum açma sayfasına yeniden yönlendirildiğini yönetir.
Kimlik doğrulaması başarılı olursa bu sayfaya döndürülmeleri için kullanıcının erişmeye çalışan geçerli URL 'YI korur.

@inject NavigationManager Navigation
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
@code {
    protected override void OnInitialized()
    {
        Navigation.NavigateTo(
            $"authentication/login?returnUrl={Uri.EscapeDataString(Navigation.Uri)}");
    }
}

LoginDisplay bileşeni

Bileşeni LoginDisplay ( Shared/LoginDisplay.razor ) bileşeninde işlenir ( ) ve aşağıdaki MainLayout davranışları Shared/MainLayout.razor yönetir:

Kimliği doğrulanmış kullanıcılar için:
- Geçerli kullanıcı adını görüntüler.
- Uygulamada oturumun açık olduğu bir düğme sunar.
Anonim kullanıcılar için oturum açma seçeneği sunar.

@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
@inject NavigationManager Navigation
@inject SignOutSessionStateManager SignOutManager

<AuthorizeView>
    <Authorized>
        Hello, @context.User.Identity.Name!
        <button class="nav-link btn btn-link" @onclick="BeginLogout">
            Log out
        </button>
    </Authorized>
    <NotAuthorized>
        <a href="authentication/login">Log in</a>
    </NotAuthorized>
</AuthorizeView>

@code {
    private async Task BeginLogout(MouseEventArgs args)
    {
        await SignOutManager.SetSignOutState();
        Navigation.NavigateTo("authentication/logout");
    }
}

Kimlik doğrulama bileşeni

Bileşeni ( ) tarafından Authentication üretilen Pages/Authentication.razor sayfa, farklı kimlik doğrulama aşamalarını işleme için gereken yolları tanımlar.

RemoteAuthenticatorViewBileşen:

Paketi tarafından Microsoft.AspNetCore.Components.WebAssembly.Authentication sağlanır.
Kimlik doğrulamasının her aşamasında uygun eylemleri gerçekleştirmeyi yönetir.

@page "/authentication/{action}"
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication

<RemoteAuthenticatorView Action="@Action" />

@code {
    [Parameter]
    public string Action { get; set; }
}

FetchData bileşeni

Bileşen FetchData şunların nasıl olduğunu gösterir:

Erişim belirteci sağlama.
Sunucu uygulamasında korumalı bir kaynak API'sini aramak için erişim belirteci kullanın.

@attribute [Authorize]yönergesi, yetkilendirme sistemine kullanıcının bu bileşeni ziyaret etmek için Blazor WebAssembly yetkilendirilmiş olması gerektiğini gösterir. Uygulamada özniteliğinin Client olması, sunucu üzerinde API'nin düzgün kimlik bilgileri olmadan çağrılması engellemez. Uygulamanın Server bunları doğru şekilde korumak için uygun uç noktaları da [Authorize] kullanması gerekir.

IAccessTokenProvider.RequestAccessToken , API'yi çağırma isteğine eklen bir erişim belirteci isteğiyle ilgilenmeyi sağlar. Belirteç önbelleğe alınmışsa veya hizmet kullanıcı etkileşimi olmadan yeni bir erişim belirteci sağlandı ise, belirteç isteği başarılı olur. Aksi takdirde, belirteç isteği deyiminde AccessTokenNotAvailableException yakalanan ile başarısız try-catch olur.

İstekte yer alan gerçek belirteci elde etmek için, uygulamanın çağırarak isteğin başarılı olup olduğunu denetlemesi tokenResult.TryGetToken(out var token) gerekir.

İstek başarılı olursa, belirteç değişkeni erişim belirteci ile doldurulur. AccessToken.ValueBelirteci özelliği, istek üst bilgisinde yer alan değişmez Authorization dizeyi gösterir.

belirteç kullanıcı etkileşimi olmadan sağlanamadı nedeniyle istek başarısız olursa, belirteç sonucu bir yeniden yönlendirme URL'si içerir. Bu URL'ye giderek kullanıcı, başarılı bir kimlik doğrulamasının ardından oturum açma sayfasına ve geçerli sayfaya geri döner.

@page "/fetchdata"
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
@using {APP NAMESPACE}.Shared
@attribute [Authorize]
@inject HttpClient Http

...

@code {
    private WeatherForecast[] forecasts;

    protected override async Task OnInitializedAsync()
    {
        try
        {
            forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("WeatherForecast");
        }
        catch (AccessTokenNotAvailableException exception)
        {
            exception.Redirect();
        }
    }
}

Uygulamayı çalıştırma

Uygulamayı sunucu projesinden çalıştırın. Visual Studio kullanırken şunlardan birini yapın:

Araç çubuğundaki başlangıç projeleri açılan listesini sunucu API 'si uygulamasına ayarlayın ve Çalıştır düğmesini seçin.
Çözüm Gezgini ' de sunucu projesini seçin ve araç çubuğundaki Çalıştır düğmesini seçin veya uygulamayı Hata Ayıkla menüsünden başlatın.

Özel kullanıcı akışları

Microsoft Authentication Library ( Microsoft.Authentication.WebAssembly.Msal , NuGet paketi), varsayılan olarak AAD B2C akışlarını desteklemez. Geliştirici kodunda özel kullanıcı akışları oluşturun.

Özel bir kullanıcı akışı için bir zorluk oluşturma hakkında daha fazla bilgi için bkz. B2C'de Azure Active Directory akışları.

Sorun giderme

Sık karşılaşılan hatalar

Uygulamanın veya Identity sağlayıcının (IP) yanlış yapılandırılması

En yaygın hatalar yanlış yapılandırma nedeniyle oluşur. Aşağıda birkaç örnek verilmiştir:
- Senaryonun gereksinimlerine bağlı olarak, eksik veya yanlış bir yetkili, örnek, kiracı KIMLIĞI, kiracı etki alanı, Istemci KIMLIĞI veya yeniden yönlendirme URI 'SI, bir uygulamanın istemcilerin kimliğini doğrulamasını önler.
- Yanlış bir erişim belirteci kapsamı, istemcilerin sunucu Web API uç noktalarına erişmesini önler.
- Yanlış veya eksik sunucu API izinleri istemcilerin sunucu Web API uç noktalarına erişmesini önler.
- Uygulamayı, sağlayıcının uygulama kaydının yeniden yönlendirme URI 'sinde yapılandırılmış olandan farklı bir bağlantı noktasında çalıştırmak Identity .
Bu makalenin kılavuzunun yapılandırma bölümlerinde doğru yapılandırma örnekleri gösterilmektedir. Uygulama ve IP yanlış yapılandırmayla ilgili makalenin her bölümüne dikkatle göz atın.

Yapılandırma doğru görünüyorsa:
- Uygulama günlüklerini analiz edin.
- Tarayıcı geliştirici araçlarıyla istemci uygulaması ile IP veya sunucu uygulaması arasındaki ağ trafiğini inceleyin. Genellikle, bir istek yapıldıktan sonra, hataya neden olan bir hata iletisi veya bir sorun olduğunu bir ileti, IP veya sunucu uygulaması tarafından istemciye döndürülür. Geliştirici araçları Kılavuzu aşağıdaki makalelerde bulunur:
  - Google Chrome (Google belgeleri)
  - Microsoft Edge
  - Mozilla Firefox (Mozilla belgeleri)
- Bir istemcinin kimliğini doğrulamak için kullanılan bir JSON Web Token (JWT) içeriğinin kodunu çözün veya sorunun nerede oluştuğunu bağlı olarak bir sunucu Web API 'sine erişim. Daha fazla bilgi için bkz. bir JSON Web token (JWT) Içeriğini İnceleme.
Belgeler, makalelerdeki belge geri bildirimlerine ve hatalara yanıt veriyor ( Bu sayfa geri bildirimi bölümünden bir sorun açar), ancak ürün desteği sağlayamadı. Bir uygulamanın sorunlarını gidermeye yardımcı olmak için çeşitli genel destek forumları vardır. Şunları öneririz:
Önceki Forumlar Microsoft tarafından sahip değil veya denetlenmiyor.

güvenlikle ilgili olmayan, hassas olmayan ve gizli olmayan bir dizi framework hata raporu için ASP.NET Core ürün birimiyle bir sorun açın. Bir sorunun nedenini iyice araştırmadan ve bir genel destek forumundaki topluluk yardımıyla, ürün birimiyle ilgili bir sorun açmayın. Ürün birimi, basit yanlış yapılandırma veya üçüncü taraf hizmetleri içeren durumlar nedeniyle bozuk olan ayrı uygulamalarla ilgili sorunları gideremez. bir rapor hassas veya gizli ise ve saldırganların yararlanabilecek potansiyel bir güvenlik kusurunu kullanıyorsa, bkz. raporlama güvenlik sorunları ve hataları (dotnet/aspnetcore GitHub repository).
AAD için yetkisiz istemci

bilgi: Microsoft. AspNetCore. Authorization. DefaultAuthorizationService [2] yetkilendirmesi başarısız oldu. Bu gereksinimler karşılanmadı: DenyAnonymousAuthorizationRequirement: kimliği doğrulanmış bir kullanıcı gerektirir.

AAD oturum açma geri çağırma hatası:
- Hata: unauthorized_client
- Açıklaması AADB2C90058: The provided application is not configured to allow public clients.
Hatayı gidermek için:
1. Azure portal, uygulamanın bildirimineerişin.
2. allowPublicClient Özniteliğini veya olarak ayarlayın null true .

Cookies ve site verileri

Cookies ve site verileri, uygulama güncelleştirmelerinde devam edebilir ve test ve sorun giderme işlemlerini etkileyebilir. Uygulama kodu değişiklikleri yaparken, sağlayıcı ile Kullanıcı hesabı değişiklikleri veya sağlayıcı uygulama yapılandırma değişiklikleri yaparken aşağıdakileri temizleyin:

Kullanıcı oturum açma cookie öğeleri
Uygulama cookie s
Önbelleğe alınmış ve depolanan site verileri

Kalan cookie s ve site verilerinin test ve sorun giderme konusunda kesintiye uğramasını önleyen bir yaklaşım:

Tarayıcı yapılandırma
- cookieTarayıcı her kapatıldığında tüm ve site verilerini silmek üzere yapılandırabileceğiniz test için bir tarayıcı kullanın.
- Uygulamanın, test kullanıcısının veya sağlayıcı yapılandırmasının herhangi bir değişikliği için tarayıcının el ile veya IDE tarafından kapatıldığından emin olun.
Visual Studio ' deki bir tarayıcıyı veya özel modda açmak için özel bir komut kullanın:
- Visual Studio çalıştır düğmesinden , iletişim kutusunu açın.
- Ekle düğmesini seçin.
- Program alanında tarayıcınızın yolunu belirtin. Aşağıdaki yürütülebilir yollar Windows 10 için tipik yükleme konumlarıdır. tarayıcınız farklı bir konuma yüklenirse veya Windows 10 kullanmıyorsanız, tarayıcının yürütülebilir dosyasının yolunu belirtin.
  - Microsoft Edge:C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe
  - Google Chrome: C:\Program Files (x86)\Google\Chrome\Application\chrome.exe
  - Mozilla Firefox: C:\Program Files\Mozilla Firefox\firefox.exe
- Bağımsız değişkenler alanında, tarayıcının ınbilito veya Private modunda açmak için kullandığı komut satırı seçeneğini belirtin. Bazı tarayıcılar uygulamanın URL 'sini gerektirir.
  - Microsoft Edge: kullanın -inprivate .
  - Google Chrome: Use --incognito --new-window {URL} , yer tutucunun {URL} açılacağı URL (örneğin, https://localhost:5001 ).
  - Mozilla Firefox: Use -private -url {URL} , yer tutucunun {URL} açılacağı URL (örneğin, https://localhost:5001 ).
- Kolay ad alanına bir ad girin. Örneğin, Firefox Auth Testing.
- Tamam düğmesini seçin.
- Her bir uygulamayla test yinelemesi için tarayıcı profilini seçmek zorunda kalmamak için, profili varsayılan olarak Ayarla düğmesi ile varsayılan olarak ayarlayın.
- Uygulamanın, test kullanıcısının veya sağlayıcı yapılandırmasındaki herhangi bir değişiklik için, tarayıcının IDE tarafından kapatıldığından emin olun.

Uygulama yükseltmeleri

Çalışan bir uygulama, geliştirme makinesindeki .NET Core SDK yükseltmeden veya uygulama içindeki paket sürümlerini değiştirirken hemen başarısız olabilir. Bazı durumlarda, önemli paketler ana yükseltmeler gerçekleştirirken bir uygulamayı bozabilir. Bu sorunların çoğu aşağıdaki yönergeleri izleyerek düzeltilebilir:

bir komut kabuğundan yürüterek yerel sistemin NuGet paketi önbelleklerini temizleyin dotnet nuget locals all --clear .
Proje bin ve obj klasörlerini silin.
Projeyi geri yükleyin ve yeniden derleyin.
Uygulamayı yeniden dağıtmadan önce sunucusundaki dağıtım klasöründeki tüm dosyaları silin.

Not

Uygulamanın hedef çerçevesiyle uyumsuz paket sürümlerinin kullanımı desteklenmez. bir paket hakkında daha fazla bilgi için NuGet galerisi veya fuget paket gezgininikullanın.

Sunucu uygulamasını çalıştırma

Barındırılan bir çözümü test etmek ve sorunlarını giderirken Blazor , uygulamayı projeden çalıştırdığınızdan emin olun Server . örneğin Visual Studio ' de, aşağıdaki yaklaşımlardan biriyle uygulamaya başlamadan önce sunucu projesinin Çözüm Gezgini vurgulandığını doğrulayın:

Çalıştır düğmesini seçin.
Menüden hata > ayıklamayı Başlat komutunu kullanın.
F5tuşuna basın.

JSON Web Token (JWT) içeriğini İnceleme

Bir JSON Web Token (JWT) kodunu çözmek için Microsoft 'un JWT.MS aracını kullanın. Kullanıcı arabirimindeki değerler hiçbir şekilde tarayıcınızdan bırakmayın.

Örnek kodlanmış JWT (görüntülenmek üzere kısaltıldı):

eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImtpZCI6Ilg1ZVhrNHh5b2pORnVtMWtsMll0djhkbE5QNC1j ... bQdHBHGcQQRbW7Wmo6SWYG4V_bU55Ug_PW4pLPr20tTS8Ct7_uwy9DWrzCMzpD-EiwT5IjXwlGX3IXVjHIlX50IVIydBoPQtadvT7saKo1G5Jmutgq41o-dmz6-yBMKV2_nXA25Q

Azure AAD B2C 'da kimlik doğrulayan bir uygulama için araç tarafından kodu çözülen örnek JWT:

{
  "typ": "JWT",
  "alg": "RS256",
  "kid": "X5eXk4xyojNFum1kl2Ytv8dlNP4-c57dO6QGTVBwaNk"
}.{
  "exp": 1610059429,
  "nbf": 1610055829,
  "ver": "1.0",
  "iss": "https://mysiteb2c.b2clogin.com/5cc15ea8-a296-4aa3-97e4-226dcc9ad298/v2.0/",
  "sub": "5ee963fb-24d6-4d72-a1b6-889c6e2c7438",
  "aud": "70bde375-fce3-4b82-984a-b247d823a03f",
  "nonce": "b2641f54-8dc4-42ca-97ea-7f12ff4af871",
  "iat": 1610055829,
  "auth_time": 1610055822,
  "idp": "idp.com",
  "tfp": "B2C_1_signupsignin"
}.[Signature]

Ek kaynaklar

bu makalede kimlik doğrulaması için Azure Active Directory (AAD) B2C kullanan bir barındırılan Blazor WebAssembly çözümün nasıl oluşturulacağı açıklanır.

uygulamaları AAD B2C kaydetme ve çözüm oluşturma

Kiracı oluşturma

Sunucu API 'SI uygulaması kaydetme

sunucu apı uygulaması için bir AAD B2C uygulaması kaydetme:

Azure portal Azure Active Directory gidin. Kenar çubuğunda uygulama kayıtları seçin. Yeni kayıt düğmesini seçin.
uygulama için bir ad sağlayın (örneğin, Blazor Server AAD B2C).
Desteklenen hesap türleri için, çok kiracılı seçeneğini belirleyin: herhangi bir kimlik sağlayıcısındaki veya kuruluş dizinindeki hesaplar (Kullanıcı akışları olan kullanıcıların kimliğini doğrulamak için)
Sunucu API 'si uygulaması Bu senaryoda yeniden yönlendirme URI 'si gerektirmez, bu nedenle açılan kutudan Web 'e ve yeniden yönlendirme URI 'si girmeyin.
Doğrulanmamış bir yayımcı etki alanıkullanıyorsanız, izinlerin > OpenID 'ye yönetici onayı verdiğini ve offline_access izinlerinin seçili olduğunu onaylayın. Yayımcı etki alanı doğrulanırsa, bu onay kutusu mevcut değildir.
Kaydet’i seçin.

Aşağıdaki bilgileri kaydedin:

Sunucu API 'si uygulaması Uygulama (istemci) KIMLIĞI (örneğin, 41451fa7-82d9-4673-8fa5-69eff5a761fd )
AAD birincil/Publisher/tenant etki alanı (örneğin, contoso.onmicrosoft.com ): etki alanı, kayıtlı uygulama Azure portal marka dikey penceresinde Publisher etki alanı olarak kullanılabilir.

API 'Yi kullanıma sunma bölümünde:

Kapsam ekle’yi seçin.
Kaydet ve devam et’i seçin.
Bir kapsam adı sağlayın (örneğin, API.Access ).
Yönetici izni görünen adı sağlayın (örneğin, Access API ).
Yönetici onay açıklaması sağlayın (örneğin, Allows the app to access server app API endpoints. ).
Durumun etkin olarak ayarlandığını onaylayın.
Kapsam Ekle' yi seçin.

Aşağıdaki bilgileri kaydedin:

Uygulama KIMLIĞI URI 'SI (örneğin, api://41451fa7-82d9-4673-8fa5-69eff5a761fd , https://contoso.onmicrosoft.com/41451fa7-82d9-4673-8fa5-69eff5a761fd veya belirttiğiniz özel değer)
Kapsam adı (örneğin, API.Access )

İstemci uygulamasını kaydetme

istemci uygulaması için bir AAD B2C uygulaması kaydetme:

Azure portal Azure Active Directory gidin. Kenar çubuğunda uygulama kayıtları seçin. Yeni kayıt düğmesini seçin.
uygulama için bir ad sağlayın (örneğin, Blazor istemci AAD B2C).
Desteklenen hesap türleri için, çok kiracılı seçeneğini belirleyin: herhangi bir kimlik sağlayıcısındaki veya kuruluş dizinindeki hesaplar (Kullanıcı akışları olan kullanıcıların kimliğini doğrulamak için)
Yeniden yönlendirme URI 'si açılan öğesini tek SAYFALı uygulama (Spa) olarak ayarlayın ve aşağıdaki yeniden yönlendirme URI 'sini sağlayın: https://localhost:{PORT}/authentication/login-callback . Üzerinde çalışan bir uygulamanın varsayılan bağlantı noktası Kestrel 5001 ' dir. Uygulama farklı bir Kestrel bağlantı noktasında çalışıyorsa, uygulamanın bağlantı noktasını kullanın. IIS Express için, uygulama için rastgele oluşturulan bağlantı noktası, Server hata ayıklama panelinde uygulamanın özelliklerinde bulunabilir. uygulama bu noktada mevcut olmadığından ve IIS Express bağlantı noktası bilinmediğinden, uygulama oluşturulduktan sonra bu adıma geri dönün ve yeniden yönlendirme urı 'sini güncelleştirin. uygulama oluştur bölümünde, kullanıcıların yeniden yönlendirme urı 'sini güncelleştirmesi IIS Express hatırlatmak için bir açıklama belirir.
Doğrulanmamış bir yayımcı etki alanıkullanıyorsanız, izinlerin > OpenID 'ye yönetici onayı verdiğini ve offline_access izinlerinin seçili olduğunu onaylayın. Yayımcı etki alanı doğrulanırsa, bu onay kutusu mevcut değildir.
Kaydet’i seçin.
Uygulama (istemci) KIMLIĞINI (örneğin, 4369008b-21fa-427c-abaa-9b53bf58e538 ) kaydedin.

Kimlik doğrulama > platformu yapılandırmalarında > tek sayfalı uygulama (Spa):

Yeniden YÖNLENDIRME URI 'sinin https://localhost:{PORT}/authentication/login-callback mevcut olduğunu onaylayın.
Örtük izin Için, erişim belirteçleri ve Kimlik belirteçleri onay kutularının seçili olmadığından emin olun.
Uygulamanın kalan varsayılan değerleri bu deneyim için kabul edilebilir.
Kaydet düğmesini seçin.

API izinleri:

Izin Ekle ' yi ve ardından API 'lerim' i seçin.
ad sütunundan sunucu apı uygulamasını seçin (örneğin, Blazor Server AAD B2C).
API listesini açın.
API 'ye erişimi etkinleştirin (örneğin, API.Access ).
Izin Ekle' yi seçin.
{Tenant Name} için yönetici onayı Izni ver düğmesini seçin. Onaylamak için Evet’i seçin.

Home > Azure AD B2C > Kullanıcı akışları:

Kaydolma ve oturum açma Kullanıcı akışı oluşturma

En azından, > context.User.Identity.Name LoginDisplay bileşen () içinde doldurmak için uygulama talepleri görünen adı Kullanıcı özniteliğini seçin Shared/LoginDisplay.razor .

Uygulama için oluşturulan kaydolma ve oturum açma Kullanıcı akış adını kaydedin (örneğin, B2C_1_signupsignin ).

Uygulama oluşturma

Aşağıdaki komutta yer tutucuları, daha önce kaydedilen bilgilerle değiştirin ve komutu bir komut kabuğu 'nda yürütün:

dotnet new blazorwasm -au IndividualB2C --aad-b2c-instance "{AAD B2C INSTANCE}" --api-client-id "{SERVER API APP CLIENT ID}" --app-id-uri "{SERVER API APP ID URI}" --client-id "{CLIENT APP CLIENT ID}" --default-scope "{DEFAULT SCOPE}" --domain "{TENANT DOMAIN}" -ho -o {APP NAME} -ssp "{SIGN UP OR SIGN IN POLICY}"

Uyarı

Yer tutucu	Azure portal adı	Örnek
`{AAD B2C INSTANCE}`	Örnek	`https://contoso.b2clogin.com/`
`{APP NAME}`	—	`BlazorSample`
`{CLIENT APP CLIENT ID}`	Uygulamanın uygulama (istemci) KIMLIĞI `Client`	`4369008b-21fa-427c-abaa-9b53bf58e538`
`{DEFAULT SCOPE}`	Kapsam adı	`API.Access`
`{SERVER API APP CLIENT ID}`	Sunucu API uygulaması için uygulama (ISTEMCI) kimliği	`41451fa7-82d9-4673-8fa5-69eff5a761fd`
`{SERVER API APP ID URI}`	Uygulama KIMLIĞI URI 'SI†	`41451fa7-82d9-4673-8fa5-69eff5a761fd`†
`{SIGN UP OR SIGN IN POLICY}`	Kaydolma/oturum açma Kullanıcı akışı	`B2C_1_signupsignin1`
`{TENANT DOMAIN}`	birincil/Publisher/tenant etki alanı	`contoso.onmicrosoft.com`

Not

`Server` Uygulama yapılandırması

Bu bölüm, çözümün uygulaması ile ilgilidir Server .

Kimlik doğrulama paketi

Microsoft platformu ile ASP.NET Core web apı 'lerine yönelik kimlik doğrulama ve yetkilendirme desteği Identity paket tarafından sağlanır Microsoft.Identity.Web :

<PackageReference Include="Microsoft.Identity.Web" Version="{VERSION}" />

{VERSION}yer tutucu, uygulamanın paylaşılan framework sürümüyle eşleşen ve paketin sürüm geçmişinde NuGet galerisindebulunan en son kararlı sürümünü temsil eder.

Kimlik doğrulama hizmeti desteği

services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
    .AddMicrosoftIdentityWebApi(Configuration.GetSection("AzureAdB2C"));

UseAuthentication UseAuthorizationaşağıdakileri doğrulayın:

Uygulama, gelen isteklerde belirteçleri ayrıştırmaya ve doğrulamaya çalışır.
Uygun kimlik bilgileri olmadan korunan kaynağa erişmeye çalışan istekler başarısız olur.

app.UseAuthentication();
app.UseAuthorization();

Kullanıcı. Identity . Ada

Varsayılan olarak, User.Identity.Name doldurulmaz.

Uygulamayı talep türünden değeri alacak şekilde yapılandırmak için name :

İçin bir ad alanı Microsoft.AspNetCore.Authentication.JwtBearer ekleyin Startup.cs :
```
using Microsoft.AspNetCore.Authentication.JwtBearer;
```

TokenValidationParameters.NameClaimTypeİçindeki öğesinin öğesini yapılandırın JwtBearerOptions Startup.ConfigureServices :

services.Configure<JwtBearerOptions>(
    JwtBearerDefaults.AuthenticationScheme, options =>
    {
        options.TokenValidationParameters.NameClaimType = "name";
    });

Uygulama ayarları

appsettings.jsonDosya, erişim belirteçlerini doğrulamak için kullanılan JWT taşıyıcı işleyicisini yapılandırma seçeneklerini içerir.

{
  "AzureAdB2C": {
    "Instance": "https://{TENANT}.b2clogin.com/",
    "ClientId": "{SERVER API APP CLIENT ID}",
    "Domain": "{TENANT DOMAIN}",
    "SignUpSignInPolicyId": "{SIGN UP OR SIGN IN POLICY}"
  }
}

Örnek:

{
  "AzureAdB2C": {
    "Instance": "https://contoso.b2clogin.com/",
    "ClientId": "41451fa7-82d9-4673-8fa5-69eff5a761fd",
    "Domain": "contoso.onmicrosoft.com",
    "SignUpSignInPolicyId": "B2C_1_signupsignin1",
  }
}

Hava tahmin denetleyicisi

Bu API denetleyicisindeki [Authorize] özniteliği , bu API 'yi yetkisiz erişime karşı koruyan tek şeydir.
Uygulamada kullanılan [Authorize] özniteliği yalnızca uygulamanın, Blazor WebAssembly uygulamanın düzgün şekilde çalışması için yetkilendirilmiş olması gerektiğine yönelik bir ipucu görevi görür.

[Authorize]
[ApiController]
[Route("[controller]")]
public class WeatherForecastController : ControllerBase
{
    [HttpGet]
    public IEnumerable<WeatherForecast> Get()
    {
        ...
    }
}

`Client` Uygulama yapılandırması

Bu bölüm, çözümün uygulaması ile ilgilidir Client .

Kimlik doğrulama paketi

Bir uygulamaya kimlik doğrulaması ekliyorsanız, paketi uygulamanın proje dosyasına el ile ekleyin:

<PackageReference Include="Microsoft.Authentication.WebAssembly.Msal" 
  Version="{VERSION}" />

yer tutucu için {VERSION} , paketin, uygulamanın paylaşılan framework sürümüyle eşleşen en son kararlı sürümü, NuGet. orgkonumundaki paketin sürüm geçmişinde bulunabilir.

Microsoft.Authentication.WebAssembly.MsalPaket geçişli Microsoft.AspNetCore.Components.WebAssembly.Authentication olarak uygulamayı uygulamaya ekler.

Kimlik doğrulama hizmeti desteği

HttpClientSunucu projesine istek yaparken erişim belirteçlerini içeren örnekler için destek eklenmiştir.

Program.cs:

builder.Services.AddHttpClient("{APP ASSEMBLY}.ServerAPI", client => 
    client.BaseAddress = new Uri(builder.HostEnvironment.BaseAddress))
    .AddHttpMessageHandler<BaseAddressAuthorizationMessageHandler>();

builder.Services.AddScoped(sp => sp.GetRequiredService<IHttpClientFactory>()
    .CreateClient("{APP ASSEMBLY}.ServerAPI"));

Yer tutucu, {APP ASSEMBLY} uygulamanın derleme adıdır (örneğin, BlazorSample.Client ).

Program.cs:

builder.Services.AddMsalAuthentication(options =>
{
    builder.Configuration.Bind("AzureAdB2C", options.ProviderOptions.Authentication);
    options.ProviderOptions.DefaultAccessTokenScopes.Add("{SCOPE URI}");
});

Yapılandırma dosya tarafından sağlanır wwwroot/appsettings.json :

{
  "AzureAdB2C": {
    "Authority": "{AAD B2C INSTANCE}{TENANT DOMAIN}/{SIGN UP OR SIGN IN POLICY}",
    "ClientId": "{CLIENT APP CLIENT ID}",
    "ValidateAuthority": false
  }
}

Örnek:

{
  "AzureAdB2C": {
    "Authority": "https://contoso.b2clogin.com/contoso.onmicrosoft.com/B2C_1_signupsignin1",
    "ClientId": "4369008b-21fa-427c-abaa-9b53bf58e538",
    "ValidateAuthority": false
  }
}

Erişim belirteci kapsamları

Varsayılan erişim belirteci kapsamları, erişim belirteci kapsamlarının listesini temsil eder:

Oturum açma isteğine varsayılan olarak dahildir.
Kimlik doğrulamasından hemen sonra bir erişim belirteci sağlamak için kullanılır.

tüm kapsamlar Azure Active Directory kuralları başına aynı uygulamaya ait olmalıdır. Gerektiğinde ek API uygulamaları için ek kapsamlar eklenebilir:

builder.Services.AddMsalAuthentication(options =>
{
    ...
    options.ProviderOptions.DefaultAccessTokenScopes.Add("{SCOPE URI}");
});

Not

Dizinin yayımcı etki alanına güvenilirse, varsayılan erişim belirteci kapsamı genellikle aşağıdaki örneğe benzer bir değerdir; burada API.Access varsayılan kapsam adıdır:
```
options.ProviderOptions.DefaultAccessTokenScopes.Add(
    "api://41451fa7-82d9-4673-8fa5-69eff5a761fd/API.Access");
```
Çift düzen () için değeri inceleyin api://api://... . Bir çift düzen varsa, ilk api:// düzeni değerden kaldırın.
Dizinin yayımcı etki alanı güvenilir olmadığında, varsayılan erişim belirteci kapsamı genellikle aşağıdaki örneğe benzer bir değerdir; burada API.Access varsayılan kapsam adıdır:
```
options.ProviderOptions.DefaultAccessTokenScopes.Add(
    "https://contoso.onmicrosoft.com/41451fa7-82d9-4673-8fa5-69eff5a761fd/API.Access");
```
Ek bir api:// düzenin () değerini inceleyin api://https://contoso.onmicrosoft.com/... . Ek bir api:// düzen varsa, api:// düzeni değerden kaldırın.

İle ek kapsamlar belirtin AdditionalScopesToConsent :

options.ProviderOptions.AdditionalScopesToConsent.Add("{ADDITIONAL SCOPE URI}");

Daha fazla bilgi için ek senaryolar makalesinin aşağıdaki bölümlerine bakın:

builder.Services.AddMsalAuthentication(options =>
{
    ...
    options.ProviderOptions.LoginMode = "redirect";
});

Varsayılan ayar popup ve dize değeri büyük/küçük harfe duyarlı değildir.

Dosya içeri aktarmalar

Microsoft.AspNetCore.Components.AuthorizationAd alanı, uygulama boyunca dosya aracılığıyla kullanılabilir hale getirilir _Imports.razor :

@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.AspNetCore.Components.WebAssembly.Http
@using Microsoft.JSInterop
@using {APPLICATION ASSEMBLY}.Client
@using {APPLICATION ASSEMBLY}.Client.Shared

Dizin sayfası

<script src="_content/Microsoft.Authentication.WebAssembly.Msal/
    AuthenticationService.js"></script>

Uygulama bileşeni

Bileşeni App ( ) uygulamalarda bulunan App.razor App bileşene Blazor Server benzer:

Bileşeni, CascadingAuthenticationState uygulamanın geri AuthenticationState kalanına ifşayı yönetir.
Bileşen, AuthorizeRouteView geçerli kullanıcının belirli bir sayfaya erişme yetkisine sahip olduğundan veya başka bir şekilde bileşeni işlemeye yetkili olduğundan emin RedirectToLogin olur.
Bileşen, RedirectToLogin yetkisiz kullanıcıları oturum açma sayfasına yeniden yönlendirmeyi yönetir.

Kullanmak istediğiniz uygulamanın sürümü için varsayılan proje şablonundan kimlik Blazor WebAssembly doğrulaması için ASP.NET Core bir uygulama oluşturun. Oluşturulan App uygulamada bileşeni App.razor ( ) inceleme.
Başvuru App kaynağında App.razor bileşeni ( ) inceleme.

Not

Belge, ASP.NET Core kaynağı yüklemesi için ürün biriminin bir sonraki sürümü için geçerli geliştirmeyi temsil eden deponun dal main ASP.NET Core. Farklı bir sürümün dallarını seçmek için Dalları veya etiketleri değiştir açılan listesini kullanarak dalı seçin. Örneğin, ASP.NET Core release/5.0 5.0 sürümü için dalı seçin.

RedirectToLogin bileşeni

RedirectToLoginBileşen ( Shared/RedirectToLogin.razor ):

Yetkisiz kullanıcıların oturum açma sayfasına yeniden yönlendirildiğini yönetir.
Kimlik doğrulaması başarılı olursa bu sayfaya döndürülmeleri için kullanıcının erişmeye çalışan geçerli URL 'YI korur.

@inject NavigationManager Navigation
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
@code {
    protected override void OnInitialized()
    {
        Navigation.NavigateTo(
            $"authentication/login?returnUrl={Uri.EscapeDataString(Navigation.Uri)}");
    }
}

LoginDisplay bileşeni

Bileşeni LoginDisplay ( Shared/LoginDisplay.razor ) bileşeninde işlenir ( ) ve aşağıdaki MainLayout davranışları Shared/MainLayout.razor yönetir:

Kimliği doğrulanmış kullanıcılar için:
- Geçerli kullanıcı adını görüntüler.
- Uygulamada oturumun açık olduğu bir düğme sunar.
Anonim kullanıcılar için oturum açma seçeneği sunar.

@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
@inject NavigationManager Navigation
@inject SignOutSessionStateManager SignOutManager

<AuthorizeView>
    <Authorized>
        Hello, @context.User.Identity.Name!
        <button class="nav-link btn btn-link" @onclick="BeginLogout">
            Log out
        </button>
    </Authorized>
    <NotAuthorized>
        <a href="authentication/login">Log in</a>
    </NotAuthorized>
</AuthorizeView>

@code {
    private async Task BeginLogout(MouseEventArgs args)
    {
        await SignOutManager.SetSignOutState();
        Navigation.NavigateTo("authentication/logout");
    }
}

Kimlik doğrulama bileşeni

Bileşeni ( ) tarafından Authentication üretilen Pages/Authentication.razor sayfa, farklı kimlik doğrulama aşamalarını işleme için gereken yolları tanımlar.

RemoteAuthenticatorViewBileşen:

Paketi tarafından Microsoft.AspNetCore.Components.WebAssembly.Authentication sağlanır.
Kimlik doğrulamasının her aşamasında uygun eylemleri gerçekleştirmeyi yönetir.

@page "/authentication/{action}"
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication

<RemoteAuthenticatorView Action="@Action" />

@code {
    [Parameter]
    public string Action { get; set; }
}

FetchData bileşeni

Bileşen FetchData şunların nasıl olduğunu gösterir:

Erişim belirteci sağlama.
Sunucu uygulamasında korumalı bir kaynak API'sini aramak için erişim belirteci kullanın.

İstekte yer alan gerçek belirteci elde etmek için, uygulamanın çağırarak isteğin başarılı olup olduğunu denetlemesi tokenResult.TryGetToken(out var token) gerekir.

İstek başarılı olursa, belirteç değişkeni erişim belirteci ile doldurulur. AccessToken.ValueBelirteci özelliği, istek üst bilgisinde yer alan değişmez Authorization dizeyi gösterir.

@page "/fetchdata"
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
@using {APP NAMESPACE}.Shared
@attribute [Authorize]
@inject HttpClient Http

...

@code {
    private WeatherForecast[] forecasts;

    protected override async Task OnInitializedAsync()
    {
        try
        {
            forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("WeatherForecast");
        }
        catch (AccessTokenNotAvailableException exception)
        {
            exception.Redirect();
        }
    }
}

Uygulamayı çalıştırma

Uygulamayı sunucu projesinden çalıştırın. Visual Studio kullanırken şunlardan birini yapın:

Araç çubuğundaki başlangıç projeleri açılan listesini sunucu API 'si uygulamasına ayarlayın ve Çalıştır düğmesini seçin.
Çözüm Gezgini ' de sunucu projesini seçin ve araç çubuğundaki Çalıştır düğmesini seçin veya uygulamayı Hata Ayıkla menüsünden başlatın.

Özel kullanıcı akışları

Özel bir kullanıcı akışı için bir zorluk oluşturma hakkında daha fazla bilgi için bkz. B2C'de Azure Active Directory akışları.

Sorun giderme

Sık karşılaşılan hatalar

Uygulamanın veya Identity sağlayıcının (IP) yanlış yapılandırılması

En yaygın hatalar yanlış yapılandırma nedeniyle oluşur. Aşağıda birkaç örnek verilmiştir:
- Senaryonun gereksinimlerine bağlı olarak, eksik veya yanlış bir yetkili, örnek, kiracı KIMLIĞI, kiracı etki alanı, Istemci KIMLIĞI veya yeniden yönlendirme URI 'SI, bir uygulamanın istemcilerin kimliğini doğrulamasını önler.
- Yanlış bir erişim belirteci kapsamı, istemcilerin sunucu Web API uç noktalarına erişmesini önler.
- Yanlış veya eksik sunucu API izinleri istemcilerin sunucu Web API uç noktalarına erişmesini önler.
- Uygulamayı, sağlayıcının uygulama kaydının yeniden yönlendirme URI 'sinde yapılandırılmış olandan farklı bir bağlantı noktasında çalıştırmak Identity .
Bu makalenin kılavuzunun yapılandırma bölümlerinde doğru yapılandırma örnekleri gösterilmektedir. Uygulama ve IP yanlış yapılandırmayla ilgili makalenin her bölümüne dikkatle göz atın.

Yapılandırma doğru görünüyorsa:
- Uygulama günlüklerini analiz edin.
- Tarayıcı geliştirici araçlarıyla istemci uygulaması ile IP veya sunucu uygulaması arasındaki ağ trafiğini inceleyin. Genellikle, bir istek yapıldıktan sonra, hataya neden olan bir hata iletisi veya bir sorun olduğunu bir ileti, IP veya sunucu uygulaması tarafından istemciye döndürülür. Geliştirici araçları Kılavuzu aşağıdaki makalelerde bulunur:
  - Google Chrome (Google belgeleri)
  - Microsoft Edge
  - Mozilla Firefox (Mozilla belgeleri)
- Bir istemcinin kimliğini doğrulamak için kullanılan bir JSON Web Token (JWT) içeriğinin kodunu çözün veya sorunun nerede oluştuğunu bağlı olarak bir sunucu Web API 'sine erişim. Daha fazla bilgi için bkz. bir JSON Web token (JWT) Içeriğini İnceleme.
Belgeler, makalelerdeki belge geri bildirimlerine ve hatalara yanıt veriyor ( Bu sayfa geri bildirimi bölümünden bir sorun açar), ancak ürün desteği sağlayamadı. Bir uygulamanın sorunlarını gidermeye yardımcı olmak için çeşitli genel destek forumları vardır. Şunları öneririz:
Önceki Forumlar Microsoft tarafından sahip değil veya denetlenmiyor.

güvenlikle ilgili olmayan, hassas olmayan ve gizli olmayan bir dizi framework hata raporu için ASP.NET Core ürün birimiyle bir sorun açın. Bir sorunun nedenini iyice araştırmadan ve bir genel destek forumundaki topluluk yardımıyla, ürün birimiyle ilgili bir sorun açmayın. Ürün birimi, basit yanlış yapılandırma veya üçüncü taraf hizmetleri içeren durumlar nedeniyle bozuk olan ayrı uygulamalarla ilgili sorunları gideremez. bir rapor hassas veya gizli ise ve saldırganların yararlanabilecek potansiyel bir güvenlik kusurunu kullanıyorsa, bkz. raporlama güvenlik sorunları ve hataları (dotnet/aspnetcore GitHub repository).
AAD için yetkisiz istemci

bilgi: Microsoft. AspNetCore. Authorization. DefaultAuthorizationService [2] yetkilendirmesi başarısız oldu. Bu gereksinimler karşılanmadı: DenyAnonymousAuthorizationRequirement: kimliği doğrulanmış bir kullanıcı gerektirir.

AAD oturum açma geri çağırma hatası:
- Hata: unauthorized_client
- Açıklaması AADB2C90058: The provided application is not configured to allow public clients.
Hatayı gidermek için:
1. Azure portal, uygulamanın bildirimineerişin.
2. allowPublicClient Özniteliğini veya olarak ayarlayın null true .

Cookies ve site verileri

Kullanıcı oturum açma cookie öğeleri
Uygulama cookie s
Önbelleğe alınmış ve depolanan site verileri

Kalan cookie s ve site verilerinin test ve sorun giderme konusunda kesintiye uğramasını önleyen bir yaklaşım:

Tarayıcı yapılandırma
- cookieTarayıcı her kapatıldığında tüm ve site verilerini silmek üzere yapılandırabileceğiniz test için bir tarayıcı kullanın.
- Uygulamanın, test kullanıcısının veya sağlayıcı yapılandırmasının herhangi bir değişikliği için tarayıcının el ile veya IDE tarafından kapatıldığından emin olun.
Visual Studio ' deki bir tarayıcıyı veya özel modda açmak için özel bir komut kullanın:
- Visual Studio çalıştır düğmesinden , iletişim kutusunu açın.
- Ekle düğmesini seçin.
- Program alanında tarayıcınızın yolunu belirtin. Aşağıdaki yürütülebilir yollar Windows 10 için tipik yükleme konumlarıdır. tarayıcınız farklı bir konuma yüklenirse veya Windows 10 kullanmıyorsanız, tarayıcının yürütülebilir dosyasının yolunu belirtin.
  - Microsoft Edge:C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe
  - Google Chrome: C:\Program Files (x86)\Google\Chrome\Application\chrome.exe
  - Mozilla Firefox: C:\Program Files\Mozilla Firefox\firefox.exe
- Bağımsız değişkenler alanında, tarayıcının ınbilito veya Private modunda açmak için kullandığı komut satırı seçeneğini belirtin. Bazı tarayıcılar uygulamanın URL 'sini gerektirir.
  - Microsoft Edge: kullanın -inprivate .
  - Google Chrome: Use --incognito --new-window {URL} , yer tutucunun {URL} açılacağı URL (örneğin, https://localhost:5001 ).
  - Mozilla Firefox: Use -private -url {URL} , yer tutucunun {URL} açılacağı URL (örneğin, https://localhost:5001 ).
- Kolay ad alanına bir ad girin. Örneğin, Firefox Auth Testing.
- Tamam düğmesini seçin.
- Her bir uygulamayla test yinelemesi için tarayıcı profilini seçmek zorunda kalmamak için, profili varsayılan olarak Ayarla düğmesi ile varsayılan olarak ayarlayın.
- Uygulamanın, test kullanıcısının veya sağlayıcı yapılandırmasındaki herhangi bir değişiklik için, tarayıcının IDE tarafından kapatıldığından emin olun.

Uygulama yükseltmeleri

bir komut kabuğundan yürüterek yerel sistemin NuGet paketi önbelleklerini temizleyin dotnet nuget locals all --clear .
Proje bin ve obj klasörlerini silin.
Projeyi geri yükleyin ve yeniden derleyin.
Uygulamayı yeniden dağıtmadan önce sunucusundaki dağıtım klasöründeki tüm dosyaları silin.

Not

Uygulamanın hedef çerçevesiyle uyumsuz paket sürümlerinin kullanımı desteklenmez. bir paket hakkında daha fazla bilgi için NuGet galerisi veya fuget paket gezgininikullanın.

Sunucu uygulamasını çalıştırma

Çalıştır düğmesini seçin.
Menüden hata > ayıklamayı Başlat komutunu kullanın.
F5tuşuna basın.

JSON Web Token (JWT) içeriğini İnceleme

Bir JSON Web Token (JWT) kodunu çözmek için Microsoft 'un JWT.MS aracını kullanın. Kullanıcı arabirimindeki değerler hiçbir şekilde tarayıcınızdan bırakmayın.

Örnek kodlanmış JWT (görüntülenmek üzere kısaltıldı):

eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImtpZCI6Ilg1ZVhrNHh5b2pORnVtMWtsMll0djhkbE5QNC1j ... bQdHBHGcQQRbW7Wmo6SWYG4V_bU55Ug_PW4pLPr20tTS8Ct7_uwy9DWrzCMzpD-EiwT5IjXwlGX3IXVjHIlX50IVIydBoPQtadvT7saKo1G5Jmutgq41o-dmz6-yBMKV2_nXA25Q

Azure AAD B2C 'da kimlik doğrulayan bir uygulama için araç tarafından kodu çözülen örnek JWT:

{
  "typ": "JWT",
  "alg": "RS256",
  "kid": "X5eXk4xyojNFum1kl2Ytv8dlNP4-c57dO6QGTVBwaNk"
}.{
  "exp": 1610059429,
  "nbf": 1610055829,
  "ver": "1.0",
  "iss": "https://mysiteb2c.b2clogin.com/5cc15ea8-a296-4aa3-97e4-226dcc9ad298/v2.0/",
  "sub": "5ee963fb-24d6-4d72-a1b6-889c6e2c7438",
  "aud": "70bde375-fce3-4b82-984a-b247d823a03f",
  "nonce": "b2641f54-8dc4-42ca-97ea-7f12ff4af871",
  "iat": 1610055829,
  "auth_time": 1610055822,
  "idp": "idp.com",
  "tfp": "B2C_1_signupsignin"
}.[Signature]

Ek kaynaklar

bu makalede kimlik doğrulaması için Azure Active Directory (AAD) B2C kullanan bir barındırılan Blazor WebAssembly çözümün nasıl oluşturulacağı açıklanır.

uygulamaları AAD B2C kaydetme ve çözüm oluşturma

Kiracı oluşturma

Sunucu API 'SI uygulaması kaydetme

sunucu apı uygulaması için bir AAD B2C uygulaması kaydetme:

Azure portal Azure Active Directory gidin. Kenar çubuğunda uygulama kayıtları seçin. Yeni kayıt düğmesini seçin.
uygulama için bir ad sağlayın (örneğin, Blazor Server AAD B2C).
Desteklenen hesap türleri için, çok kiracılı seçeneğini belirleyin: herhangi bir kimlik sağlayıcısındaki veya kuruluş dizinindeki hesaplar (Kullanıcı akışları olan kullanıcıların kimliğini doğrulamak için)
Sunucu API 'si uygulaması Bu senaryoda yeniden yönlendirme URI 'si gerektirmez, bu nedenle açılan kutudan Web 'e ve yeniden yönlendirme URI 'si girmeyin.
Doğrulanmamış bir yayımcı etki alanıkullanıyorsanız, izinlerin > OpenID 'ye yönetici onayı verdiğini ve offline_access izinlerinin seçili olduğunu onaylayın. Yayımcı etki alanı doğrulanırsa, bu onay kutusu mevcut değildir.
Kaydet’i seçin.

Aşağıdaki bilgileri kaydedin:

Sunucu API 'si uygulaması Uygulama (istemci) KIMLIĞI (örneğin, 41451fa7-82d9-4673-8fa5-69eff5a761fd )
AAD birincil/Publisher/tenant etki alanı (örneğin, contoso.onmicrosoft.com ): etki alanı, kayıtlı uygulama Azure portal marka dikey penceresinde Publisher etki alanı olarak kullanılabilir.

API 'Yi kullanıma sunma bölümünde:

Kapsam ekle’yi seçin.
Kaydet ve devam et’i seçin.
Bir kapsam adı sağlayın (örneğin, API.Access ).
Yönetici izni görünen adı sağlayın (örneğin, Access API ).
Yönetici onay açıklaması sağlayın (örneğin, Allows the app to access server app API endpoints. ).
Durumun etkin olarak ayarlandığını onaylayın.
Kapsam Ekle' yi seçin.

Aşağıdaki bilgileri kaydedin:

Uygulama KIMLIĞI URI 'SI (örneğin, api://41451fa7-82d9-4673-8fa5-69eff5a761fd , https://contoso.onmicrosoft.com/41451fa7-82d9-4673-8fa5-69eff5a761fd veya belirttiğiniz özel değer)
Kapsam adı (örneğin, API.Access )

İstemci uygulamasını kaydetme

istemci uygulaması için bir AAD B2C uygulaması kaydetme:

Azure portal Azure Active Directory gidin. Kenar çubuğunda uygulama kayıtları seçin. Yeni kayıt düğmesini seçin.
Uygulama için bir Ad girin (örneğin, Blazor İstemci AAD B2C).
Desteklenen hesap türleri için çok kiracılı seçeneği belirleyin: Herhangi bir kimlik sağlayıcısı veya kuruluş dizininde hesaplar (kullanıcı akışlarıyla kullanıcıların kimliğini doğrulama için)
Yeniden Yönlendirme URI'si açılan listesinde Web olarak bırakın ve şu yeniden yönlendirme URI'sini sağlar: https://localhost:{PORT}/authentication/login-callback . üzerinde çalışan bir uygulamanın varsayılan bağlantı noktası Kestrel 5001'tir. Uygulama farklı bir bağlantı noktası üzerinde Kestrel çalıştır bağlı ise, uygulamanın bağlantı noktasını kullanın. Daha IIS Express için uygulama için rastgele oluşturulan bağlantı noktası, Hata Ayıklama Server panelinde uygulamanın özelliklerinde bulunabilir. Uygulama bu noktada mevcut değil ve IIS Express bağlantı noktası bilinmediği için, uygulama oluşturulduktan sonra bu adıma geri dönüp yeniden yönlendirme URI'sini güncelleştirin. Kullanıcıların yeniden yönlendirme URI'sini güncelleştirmesini IIS Express için Uygulama oluşturma bölümünde bir açıklama görüntülenir.
Doğrulanmamış bir yayımcı etki alanıkullanıyorsanız, İzinler Yöneticiye openid ve offline_access > onay verin onaylayın. Yayımcı etki alanı doğrulanmışsa bu onay kutusu mevcut değildir.
Kaydet’i seçin.

Uygulama (istemci) kimliğini (örneğin, ) 4369008b-21fa-427c-abaa-9b53bf58e538 kaydetme.

Kimlik Doğrulama Platformu > yapılandırmaları > Web'de:

yeniden yönlendirme URI'sinin https://localhost:{PORT}/authentication/login-callback mevcut olduğunu onaylayın.
Örtülü onay için Erişim belirteçleri ve kimlik belirteçleri onay kutularını seçin.
Uygulama için kalan varsayılan değerler bu deneyim için kabul edilebilir.
Kaydet düğmesini seçin.

API izinlerine:

İzin ekle'yi ve ardından API'lerim'i seçin.
Ad sütunundan Sunucu API'si uygulamasını seçin (örneğin, Blazor Server AAD B2C).
API listesini açın.
API'ye erişimi etkinleştirme (örneğin, API.Access ).
İzin ekle'yi seçin.
{TENANT NAME} için yönetici onayı ver düğmesini seçin. Onaylamak için Evet’i seçin.

Kullanıcı Home > > Azure AD B2C'de:

Kaydolma ve oturum açma kullanıcı akışı oluşturma

En azından, bileşeninde () doldurmak için Uygulama talepleri > Görünen Ad context.User.Identity.Name kullanıcı LoginDisplay özniteliğini Shared/LoginDisplay.razor seçin.

Uygulama için oluşturulan kaydolma ve oturum açma kullanıcı akışı adını (örneğin, ) B2C_1_signupsignin kaydetme.

Uygulama oluşturma

Aşağıdaki komutta yer alan yer tutucuları daha önce kaydedilen bilgilerle değiştirin ve komutu bir komut kabuğunda yürütün:

dotnet new blazorwasm -au IndividualB2C --aad-b2c-instance "{AAD B2C INSTANCE}" --api-client-id "{SERVER API APP CLIENT ID}" --app-id-uri "{SERVER API APP ID URI}" --client-id "{CLIENT APP CLIENT ID}" --default-scope "{DEFAULT SCOPE}" --domain "{TENANT DOMAIN}" -ho -o {APP NAME} -ssp "{SIGN UP OR SIGN IN POLICY}"

Uyarı

Uygulama adı içinde - OIDC uygulama tanımlayıcısının oluşmasını bozan tireler ( ) {APP NAME} kullanmaktan kaçının. Proje Blazor WebAssembly şablonunda mantık, çözümün yapılandırmasında bir OIDC uygulama tanımlayıcısı için proje adını kullanır. Pascal büyük/küçük BlazorSample harf ( ) veya alt çizgi ( ) kabul edilebilir Blazor_Sample alternatiflerdir. Daha fazla bilgi için bkz. Barındırılan proje adı kesme Blazor WebAssembly OIDC güvenliğinde tireler (dotnet/aspnetcore #35337).

Yer tutucu	Azure portal adı	Örnek
`{AAD B2C INSTANCE}`	Örnek	`https://contoso.b2clogin.com/`
`{APP NAME}`	—	`BlazorSample`
`{CLIENT APP CLIENT ID}`	Uygulamanın uygulama (istemci) `Client` kimliği	`4369008b-21fa-427c-abaa-9b53bf58e538`
`{DEFAULT SCOPE}`	Kapsam adı	`API.Access`
`{SERVER API APP CLIENT ID}`	Sunucu API'si uygulaması için uygulama (istemci) kimliği	`41451fa7-82d9-4673-8fa5-69eff5a761fd`
`{SERVER API APP ID URI}`	Uygulama Kimliği URI'si†	`41451fa7-82d9-4673-8fa5-69eff5a761fd`†
`{SIGN UP OR SIGN IN POLICY}`	Kaydolma/oturum açma kullanıcı akışı	`B2C_1_signupsignin1`
`{TENANT DOMAIN}`	Birincil/Publisher/Kiracı etki alanı	`contoso.onmicrosoft.com`

†Şablon, Blazor WebAssembly komutunda geçirilen Uygulama api:// Kimliği URI bağımsız değişkenine otomatik olarak bir şeması dotnet new ekler. Yer tutucu için Uygulama Kimliği URI'si sağlarken ve düzen ise, önceki tabloda yer alan örnek değerde olduğu gibi, bağımsız değişkenden şemayı {SERVER API APP ID URI} api:// ( ) api:// kaldırın. Uygulama Kimliği URI'si özel bir değerse veya başka bir şemaya sahipse (örneğin, benzeri doğrulanmamış bir yayımcı etki alanı için), varsayılan kapsam https:// https://contoso.onmicrosoft.com/41451fa7-82d9-4673-8fa5-69eff5a761fd URI'sini el ile güncelleştirmeniz ve uygulama şablon tarafından oluşturulduktan sonra düzeni kaldırmanız api:// Client gerekir. Daha fazla bilgi için Erişim belirteci kapsamları bölümündeki nota bakın. Şablon, bu senaryoları ele ASP.NET Core bir Blazor WebAssembly sürümde değiştirilebilir. Daha fazla bilgi için bkz. WASM şablonuyla Uygulama Kimliği URI'si için çift düzen Blazor (barındırılan, tek kuruluş) (dotnet/aspnetcore #27417).

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. Uygulama adı içinde OIDC uygulama tanımlayıcısının oluşmasını bozan tireler ( ) kullanmaktan kaçının - (önceki UYARI'ya bakın).

Not

Proje şablonu tarafından barındırılan bir Blazor WebAssembly çözümde ayarlanmış Blazor WebAssembly kapsamda Uygulama Kimliği URI ana bilgisayarı yinelenir. Koleksiyon için yapılandırılan kapsamın DefaultAccessTokenScopes uygulamanın içinde doğru Program.cs olduğunu Client onaylayın.

Not

Bu Azure portal, uygulamanın platform yapılandırması Yeniden Yönlendirme Client URI'si, sunucuda varsayılan ayarlarla çalıştırılan uygulamalar için bağlantı noktası 5001 Kestrel için yapılandırılır.

Uygulama rastgele bir IIS Express bağlantı noktası üzerinde çalıştırılırsa, uygulamanın bağlantı noktası Hata Ayıklama Client panelindeki Sunucu API'si uygulamasının özelliklerinde bulunabilir.

Bağlantı noktası daha önce uygulamanın bilinen bağlantı noktasıyla yapılandırılmamışsa, uygulamanın Azure portal kaydına geri dönüp yeniden yönlendirme Client Client URI'sini doğru bağlantı noktasıyla güncelleştirin.

`Server` uygulama yapılandırması

Bu bölüm, çözümün uygulamasıyla Server ilgilidir.

Kimlik doğrulama paketi

Web API'leri için çağrıların ASP.NET Core yetkilendirme desteği paket tarafından Microsoft.AspNetCore.Authentication.AzureADB2C.UI sağlanır:

<PackageReference Include="Microsoft.AspNetCore.Authentication.AzureADB2C.UI" 
  Version="{VERSION}" />

yer tutucusu için, uygulamanın paylaşılan çerçeve sürümüyle eşleşen paketin en son kararlı sürümü NuGet.org adresinde paketin Sürüm Geçmişi {VERSION} içinde bulunabilir.

Kimlik doğrulama hizmeti desteği

yöntemi, AddAuthentication uygulama içinde kimlik doğrulama hizmetlerini ayarlar ve JWT Taşıyıcı işleyicisini varsayılan kimlik doğrulama yöntemi olarak yapılandırr. yöntemi, Azure Active Directory B2C tarafından yayılan belirteçleri doğrulamak için gereken JWT Taşıyıcı işleyicisinde belirli AddAzureADB2CBearer Azure Active Directory ayarlar:

services.AddAuthentication(AzureADB2CDefaults.BearerAuthenticationScheme)
    .AddAzureADB2CBearer(options => Configuration.Bind("AzureAdB2C", options));

UseAuthentication ve UseAuthorization şunların sağ olduğundan emin olmak için:

Uygulama gelen isteklerde belirteçleri ayrıştırmaya ve doğrulamaya çalışır.
Düzgün kimlik bilgileri olmadan korunan bir kaynağa erişmeye çalışan istekler başarısız olur.

app.UseAuthentication();
app.UseAuthorization();

Kullanıcı. Identity . Adı

Varsayılan User.Identity.Name olarak, doldurulmaz.

Uygulamayı talep türünden değeri alacak şekilde name yapılandırmak için:

için bir ad alanı Microsoft.AspNetCore.Authentication.JwtBearer Startup.cs ekleyin:
```
using Microsoft.AspNetCore.Authentication.JwtBearer;
```

içinde TokenValidationParameters.NameClaimType 'nin JwtBearerOptions 'ini Startup.ConfigureServices yapılandırma:

services.Configure<JwtBearerOptions>(
    AzureADB2CDefaults.JwtBearerAuthenticationScheme, options =>
    {
        options.TokenValidationParameters.NameClaimType = "name";
    });

Uygulama ayarları

Dosya, appsettings.json erişim belirteçlerini doğrulamak için kullanılan JWT taşıyıcı işleyicisini yapılandırma seçeneklerini içerir.

{
  "AzureAdB2C": {
    "Instance": "https://{TENANT}.b2clogin.com/",
    "ClientId": "{SERVER API APP CLIENT ID}",
    "Domain": "{TENANT DOMAIN}",
    "SignUpSignInPolicyId": "{SIGN UP OR SIGN IN POLICY}"
  }
}

Örnek:

{
  "AzureAdB2C": {
    "Instance": "https://contoso.b2clogin.com/",
    "ClientId": "41451fa7-82d9-4673-8fa5-69eff5a761fd",
    "Domain": "contoso.onmicrosoft.com",
    "SignUpSignInPolicyId": "B2C_1_signupsignin1",
  }
}

WeatherForecast denetleyicisi

WeatherForecast denetleyicisi (Controllers/WeatherForecastController.cs), denetleyiciye uygulanan [Authorize] özniteliğiyle korumalı bir API'yi gösterir. Şunları anlamak önemlidir:

Bu [Authorize] API denetleyicisinde özniteliği, bu API'yi yetkisiz erişime karşı koruyan tek şeydir.
Uygulamada [Authorize] kullanılan öznitelik, uygulamaya yalnızca kullanıcının uygulamanın düzgün çalışması için yetkilendirilmiş Blazor WebAssembly olması gerektiğine dair bir ipucu olarak görev sağlar.

[Authorize]
[ApiController]
[Route("[controller]")]
public class WeatherForecastController : ControllerBase
{
    [HttpGet]
    public IEnumerable<WeatherForecast> Get()
    {
        ...
    }
}

`Client` uygulama yapılandırması

Bu bölüm, çözümün uygulamasıyla Client ilgilidir.

Kimlik doğrulama paketi

Bireysel B2C Hesabı () kullanmak için bir uygulama oluşturulduğunda, uygulama otomatik olarak Microsoft Kimlik Doğrulama Kitaplığı ( ) için bir IndividualB2C paket başvurusu Microsoft.Authentication.WebAssembly.Msal alır. Paket, uygulamanın kullanıcıların kimliğini doğrulamasını ve korumalı API'leri çağıracak belirteçleri almasını sağlayan bir temel öğeler kümesi sağlar.

Uygulamaya kimlik doğrulaması ekliyorsanız paketi uygulamanın proje dosyasına el ile ekleyin:

<PackageReference Include="Microsoft.Authentication.WebAssembly.Msal" 
  Version="{VERSION}" />

yer tutucusu için, uygulamanın paylaşılan çerçeve sürümüyle eşleşen paketin en son kararlı sürümü NuGet.org adresinde paketin Sürüm Geçmişi {VERSION} içinde bulunabilir.

Paket Microsoft.Authentication.WebAssembly.Msal geçişli olarak Microsoft.AspNetCore.Components.WebAssembly.Authentication paketi uygulamaya ekler.

Kimlik doğrulama hizmeti desteği

Sunucu HttpClient projesine istek gönderirken erişim belirteçleri içeren örnekler için destek eklendi.

Program.cs:

builder.Services.AddHttpClient("{APP ASSEMBLY}.ServerAPI", client => 
    client.BaseAddress = new Uri(builder.HostEnvironment.BaseAddress))
    .AddHttpMessageHandler<BaseAddressAuthorizationMessageHandler>();

builder.Services.AddScoped(sp => sp.GetRequiredService<IHttpClientFactory>()
    .CreateClient("{APP ASSEMBLY}.ServerAPI"));

Yer {APP ASSEMBLY} tutucu, uygulamanın derleme adıdır (örneğin, BlazorSample.Client ).

Kullanıcıların kimliklerini doğrulama desteği, paket tarafından sağlanan uzantı AddMsalAuthentication yöntemiyle hizmet kapsayıcısı içinde Microsoft.Authentication.WebAssembly.Msal kaydedilir. Bu yöntem, uygulamanın Sağlayıcı (IP) ile etkileşim kurması için Identity gereken hizmetleri ayarlar.

Program.cs:

builder.Services.AddMsalAuthentication(options =>
{
    builder.Configuration.Bind("AzureAdB2C", options.ProviderOptions.Authentication);
    options.ProviderOptions.DefaultAccessTokenScopes.Add("{SCOPE URI}");
});

yöntemi, AddMsalAuthentication bir uygulamanın kimliğini doğrulamak için gereken parametreleri yapılandırmak için bir geri çağırma kabul eder. Uygulamayı yapılandırmak için gereken değerler, uygulamayı kaydederek azure AAD yapılandırmadan edinebilirsiniz.

Yapılandırma dosyası tarafından wwwroot/appsettings.json sağlanır:

{
  "AzureAdB2C": {
    "Authority": "{AAD B2C INSTANCE}{TENANT DOMAIN}/{SIGN UP OR SIGN IN POLICY}",
    "ClientId": "{CLIENT APP CLIENT ID}",
    "ValidateAuthority": false
  }
}

Örnek:

{
  "AzureAdB2C": {
    "Authority": "https://contoso.b2clogin.com/contoso.onmicrosoft.com/B2C_1_signupsignin1",
    "ClientId": "4369008b-21fa-427c-abaa-9b53bf58e538",
    "ValidateAuthority": false
  }
}

Erişim belirteci kapsamları

Varsayılan erişim belirteci kapsamları, erişim belirteci kapsamlarının listesini temsil eder:

Oturum açma isteğine varsayılan olarak dahil edilir.
Kimlik doğrulamasının hemen ardından erişim belirteci sağlama için kullanılır.

Tüm kapsamlar her uygulama kuralı için aynı Azure Active Directory gerekir. Gerektiğinde ek API uygulamaları için ek kapsamlar eklenebilir:

builder.Services.AddMsalAuthentication(options =>
{
    ...
    options.ProviderOptions.DefaultAccessTokenScopes.Add("{SCOPE URI}");
});

Not

Şablon, Blazor WebAssembly komutunda geçirilen Uygulama api:// Kimliği URI bağımsız değişkenine otomatik olarak bir şeması dotnet new ekler. Proje şablonundan bir uygulama oluştururken, varsayılan erişim belirteci kapsamının değerinin Azure portal'de sağlanan doğru özel Uygulama Kimliği URI değerini veya aşağıdaki biçimlerden birini kullanan bir değeri kullandığını onaylayın: Blazor

Dizinin yayımcı etki alanına güveni olduğunda, varsayılan erişim belirteci kapsamı genellikle aşağıdaki örnekteki gibi bir API.Access değerdir; burada varsayılan kapsam adıdır:
```
options.ProviderOptions.DefaultAccessTokenScopes.Add(
    "api://41451fa7-82d9-4673-8fa5-69eff5a761fd/API.Access");
```
Çift düzen ( ) için değeri api://api://... inceler. Çift düzen varsa, ilk düzeni api:// değerinden kaldırın.
Dizinin yayımcı etki alanı güvenilmeyen olduğunda, varsayılan erişim belirteci kapsamı genellikle aşağıdaki örnekteki gibi bir değerdir; burada varsayılan API.Access kapsam adıdır:
```
options.ProviderOptions.DefaultAccessTokenScopes.Add(
    "https://contoso.onmicrosoft.com/41451fa7-82d9-4673-8fa5-69eff5a761fd/API.Access");
```
Ek düzen için değeri api:// inceleme ( api://https://contoso.onmicrosoft.com/... ). Ek bir api:// düzen varsa, şemayı api:// değerden kaldırın.

Şablon, bu senaryoları ele ASP.NET Core bir Blazor WebAssembly sürümde değiştirilebilir. Daha fazla bilgi için bkz. WASM şablonuyla Uygulama Kimliği URI'si için çift düzen Blazor (barındırılan, tek kuruluş) (dotnet/aspnetcore #27417).

ile ek kapsamlar AdditionalScopesToConsent belirtin:

options.ProviderOptions.AdditionalScopesToConsent.Add("{ADDITIONAL SCOPE URI}");

Daha fazla bilgi için Ek senaryolar makalesinde aşağıdaki bölümlere bakın:

İçeri aktarma dosyası

Microsoft.AspNetCore.Components.AuthorizationAd alanı, uygulama boyunca dosya aracılığıyla kullanılabilir hale getirilir _Imports.razor :

@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.AspNetCore.Components.WebAssembly.Http
@using Microsoft.JSInterop
@using {APPLICATION ASSEMBLY}.Client
@using {APPLICATION ASSEMBLY}.Client.Shared

Dizin sayfası

<script src="_content/Microsoft.Authentication.WebAssembly.Msal/
    AuthenticationService.js"></script>

Uygulama bileşeni

Bileşeni App ( ) uygulamalarda bulunan App.razor App bileşene Blazor Server benzer:

Bileşeni, CascadingAuthenticationState uygulamanın geri AuthenticationState kalanına ifşayı yönetir.
Bileşen, AuthorizeRouteView geçerli kullanıcının belirli bir sayfaya erişme yetkisine sahip olduğundan veya başka bir şekilde bileşeni işlemeye yetkili olduğundan emin RedirectToLogin olur.
Bileşen, RedirectToLogin yetkisiz kullanıcıları oturum açma sayfasına yeniden yönlendirmeyi yönetir.

Kullanmak istediğiniz uygulamanın sürümü için varsayılan proje şablonundan kimlik Blazor WebAssembly doğrulaması için ASP.NET Core bir uygulama oluşturun. Oluşturulan App uygulamada bileşeni App.razor ( ) inceleme.
Başvuru App kaynağında App.razor bileşeni ( ) inceleme.

Not

Belge, ASP.NET Core kaynağı yüklemesi için ürün biriminin bir sonraki sürümü için geçerli geliştirmeyi temsil eden deponun dal main ASP.NET Core. Farklı bir sürümün dallarını seçmek için Dalları veya etiketleri değiştir açılan listesini kullanarak dalı seçin. Örneğin, ASP.NET Core release/5.0 5.0 sürümü için dalı seçin.

RedirectToLogin bileşeni

RedirectToLoginBileşen ( Shared/RedirectToLogin.razor ):

Yetkisiz kullanıcıların oturum açma sayfasına yeniden yönlendirildiğini yönetir.
Kimlik doğrulaması başarılı olursa bu sayfaya döndürülmeleri için kullanıcının erişmeye çalışan geçerli URL 'YI korur.

@inject NavigationManager Navigation
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
@code {
    protected override void OnInitialized()
    {
        Navigation.NavigateTo(
            $"authentication/login?returnUrl={Uri.EscapeDataString(Navigation.Uri)}");
    }
}

LoginDisplay bileşeni

Bileşeni LoginDisplay ( Shared/LoginDisplay.razor ) bileşeninde işlenir ( ) ve aşağıdaki MainLayout davranışları Shared/MainLayout.razor yönetir:

Kimliği doğrulanmış kullanıcılar için:
- Geçerli kullanıcı adını görüntüler.
- Uygulamada oturumun açık olduğu bir düğme sunar.
Anonim kullanıcılar için oturum açma seçeneği sunar.

@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
@inject NavigationManager Navigation
@inject SignOutSessionStateManager SignOutManager

<AuthorizeView>
    <Authorized>
        Hello, @context.User.Identity.Name!
        <button class="nav-link btn btn-link" @onclick="BeginLogout">
            Log out
        </button>
    </Authorized>
    <NotAuthorized>
        <a href="authentication/login">Log in</a>
    </NotAuthorized>
</AuthorizeView>

@code {
    private async Task BeginLogout(MouseEventArgs args)
    {
        await SignOutManager.SetSignOutState();
        Navigation.NavigateTo("authentication/logout");
    }
}

Kimlik doğrulama bileşeni

Bileşeni ( ) tarafından Authentication üretilen Pages/Authentication.razor sayfa, farklı kimlik doğrulama aşamalarını işleme için gereken yolları tanımlar.

RemoteAuthenticatorViewBileşen:

Paketi tarafından Microsoft.AspNetCore.Components.WebAssembly.Authentication sağlanır.
Kimlik doğrulamasının her aşamasında uygun eylemleri gerçekleştirmeyi yönetir.

@page "/authentication/{action}"
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication

<RemoteAuthenticatorView Action="@Action" />

@code {
    [Parameter]
    public string Action { get; set; }
}

FetchData bileşeni

Bileşen FetchData şunların nasıl olduğunu gösterir:

Erişim belirteci sağlama.
Sunucu uygulamasında korumalı bir kaynak API'sini aramak için erişim belirteci kullanın.

İstekte yer alan gerçek belirteci elde etmek için, uygulamanın çağırarak isteğin başarılı olup olduğunu denetlemesi tokenResult.TryGetToken(out var token) gerekir.

İstek başarılı olursa, belirteç değişkeni erişim belirteci ile doldurulur. AccessToken.ValueBelirteci özelliği, istek üst bilgisinde yer alan değişmez Authorization dizeyi gösterir.

@page "/fetchdata"
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
@using {APP NAMESPACE}.Shared
@attribute [Authorize]
@inject HttpClient Http

...

@code {
    private WeatherForecast[] forecasts;

    protected override async Task OnInitializedAsync()
    {
        try
        {
            forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("WeatherForecast");
        }
        catch (AccessTokenNotAvailableException exception)
        {
            exception.Redirect();
        }
    }
}

Uygulamayı çalıştırma

Uygulamayı Sunucu projesinden çalıştırın. Visual Studio kullanırken:

Araç çubuğundaki Başlangıç Projeleri açılan listesini Sunucu API'si uygulamasına ayarlayın ve Çalıştır düğmesini seçin.
Sunucu projesini seçin Çözüm Gezgini araç çubuğunda Çalıştır düğmesini seçin veya Hata Ayıklama menüsünden uygulamayı çalıştırın.

Özel kullanıcı akışları

Özel bir kullanıcı akışı için bir zorluk oluşturma hakkında daha fazla bilgi için bkz. B2C'de Azure Active Directory akışları.

Sorun giderme

Sık karşılaşılan hatalar

Uygulamanın veya Identity sağlayıcının (IP) yanlış yapılandırılması

En yaygın hatalar yanlış yapılandırma nedeniyle oluşur. Aşağıda birkaç örnek verilmiştir:
- Senaryonun gereksinimlerine bağlı olarak, eksik veya yanlış bir yetkili, örnek, kiracı KIMLIĞI, kiracı etki alanı, Istemci KIMLIĞI veya yeniden yönlendirme URI 'SI, bir uygulamanın istemcilerin kimliğini doğrulamasını önler.
- Yanlış bir erişim belirteci kapsamı, istemcilerin sunucu Web API uç noktalarına erişmesini önler.
- Yanlış veya eksik sunucu API izinleri istemcilerin sunucu Web API uç noktalarına erişmesini önler.
- Uygulamayı, sağlayıcının uygulama kaydının yeniden yönlendirme URI 'sinde yapılandırılmış olandan farklı bir bağlantı noktasında çalıştırmak Identity .
Bu makalenin kılavuzunun yapılandırma bölümlerinde doğru yapılandırma örnekleri gösterilmektedir. Uygulama ve IP yanlış yapılandırmayla ilgili makalenin her bölümüne dikkatle göz atın.

Yapılandırma doğru görünüyorsa:
- Uygulama günlüklerini analiz edin.
- Tarayıcı geliştirici araçlarıyla istemci uygulaması ile IP veya sunucu uygulaması arasındaki ağ trafiğini inceleyin. Genellikle, bir istek yapıldıktan sonra, hataya neden olan bir hata iletisi veya bir sorun olduğunu bir ileti, IP veya sunucu uygulaması tarafından istemciye döndürülür. Geliştirici araçları Kılavuzu aşağıdaki makalelerde bulunur:
  - Google Chrome (Google belgeleri)
  - Microsoft Edge
  - Mozilla Firefox (Mozilla belgeleri)
- Bir istemcinin kimliğini doğrulamak için kullanılan bir JSON Web Token (JWT) içeriğinin kodunu çözün veya sorunun nerede oluştuğunu bağlı olarak bir sunucu Web API 'sine erişim. Daha fazla bilgi için bkz. bir JSON Web token (JWT) Içeriğini İnceleme.
Belgeler, makalelerdeki belge geri bildirimlerine ve hatalara yanıt veriyor ( Bu sayfa geri bildirimi bölümünden bir sorun açar), ancak ürün desteği sağlayamadı. Bir uygulamanın sorunlarını gidermeye yardımcı olmak için çeşitli genel destek forumları vardır. Şunları öneririz:
Önceki Forumlar Microsoft tarafından sahip değil veya denetlenmiyor.

güvenlikle ilgili olmayan, hassas olmayan ve gizli olmayan bir dizi framework hata raporu için ASP.NET Core ürün birimiyle bir sorun açın. Bir sorunun nedenini iyice araştırmadan ve bir genel destek forumundaki topluluk yardımıyla, ürün birimiyle ilgili bir sorun açmayın. Ürün birimi, basit yanlış yapılandırma veya üçüncü taraf hizmetleri içeren durumlar nedeniyle bozuk olan ayrı uygulamalarla ilgili sorunları gideremez. bir rapor hassas veya gizli ise ve saldırganların yararlanabilecek potansiyel bir güvenlik kusurunu kullanıyorsa, bkz. raporlama güvenlik sorunları ve hataları (dotnet/aspnetcore GitHub repository).
AAD için yetkisiz istemci

bilgi: Microsoft. AspNetCore. Authorization. DefaultAuthorizationService [2] yetkilendirmesi başarısız oldu. Bu gereksinimler karşılanmadı: DenyAnonymousAuthorizationRequirement: kimliği doğrulanmış bir kullanıcı gerektirir.

AAD oturum açma geri çağırma hatası:
- Hata: unauthorized_client
- Açıklaması AADB2C90058: The provided application is not configured to allow public clients.
Hatayı gidermek için:
1. Azure portal, uygulamanın bildirimineerişin.
2. allowPublicClient Özniteliğini veya olarak ayarlayın null true .

Cookies ve site verileri

Kullanıcı oturum açma cookie öğeleri
Uygulama cookie s
Önbelleğe alınmış ve depolanan site verileri

Kalan cookie s ve site verilerinin test ve sorun giderme konusunda kesintiye uğramasını önleyen bir yaklaşım:

Tarayıcı yapılandırma
- cookieTarayıcı her kapatıldığında tüm ve site verilerini silmek üzere yapılandırabileceğiniz test için bir tarayıcı kullanın.
- Uygulamanın, test kullanıcısının veya sağlayıcı yapılandırmasının herhangi bir değişikliği için tarayıcının el ile veya IDE tarafından kapatıldığından emin olun.
Visual Studio ' deki bir tarayıcıyı veya özel modda açmak için özel bir komut kullanın:
- Visual Studio çalıştır düğmesinden , iletişim kutusunu açın.
- Ekle düğmesini seçin.
- Program alanında tarayıcınızın yolunu belirtin. Aşağıdaki yürütülebilir yollar Windows 10 için tipik yükleme konumlarıdır. tarayıcınız farklı bir konuma yüklenirse veya Windows 10 kullanmıyorsanız, tarayıcının yürütülebilir dosyasının yolunu belirtin.
  - Microsoft Edge:C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe
  - Google Chrome: C:\Program Files (x86)\Google\Chrome\Application\chrome.exe
  - Mozilla Firefox: C:\Program Files\Mozilla Firefox\firefox.exe
- Bağımsız değişkenler alanında, tarayıcının ınbilito veya Private modunda açmak için kullandığı komut satırı seçeneğini belirtin. Bazı tarayıcılar uygulamanın URL 'sini gerektirir.
  - Microsoft Edge: kullanın -inprivate .
  - Google Chrome: Use --incognito --new-window {URL} , yer tutucunun {URL} açılacağı URL (örneğin, https://localhost:5001 ).
  - Mozilla Firefox: Use -private -url {URL} , yer tutucunun {URL} açılacağı URL (örneğin, https://localhost:5001 ).
- Kolay ad alanına bir ad girin. Örneğin, Firefox Auth Testing.
- Tamam düğmesini seçin.
- Her bir uygulamayla test yinelemesi için tarayıcı profilini seçmek zorunda kalmamak için, profili varsayılan olarak Ayarla düğmesi ile varsayılan olarak ayarlayın.
- Uygulamanın, test kullanıcısının veya sağlayıcı yapılandırmasındaki herhangi bir değişiklik için, tarayıcının IDE tarafından kapatıldığından emin olun.

Uygulama yükseltmeleri

bir komut kabuğundan yürüterek yerel sistemin NuGet paketi önbelleklerini temizleyin dotnet nuget locals all --clear .
Proje bin ve obj klasörlerini silin.
Projeyi geri yükleyin ve yeniden derleyin.
Uygulamayı yeniden dağıtmadan önce sunucusundaki dağıtım klasöründeki tüm dosyaları silin.

Not

Uygulamanın hedef çerçevesiyle uyumsuz paket sürümlerinin kullanımı desteklenmez. bir paket hakkında daha fazla bilgi için NuGet galerisi veya fuget paket gezgininikullanın.

Sunucu uygulamasını çalıştırma

Çalıştır düğmesini seçin.
Menüden hata > ayıklamayı Başlat komutunu kullanın.
F5tuşuna basın.

JSON Web Token (JWT) içeriğini İnceleme

Bir JSON Web Token (JWT) kodunu çözmek için Microsoft 'un JWT.MS aracını kullanın. Kullanıcı arabirimindeki değerler hiçbir şekilde tarayıcınızdan bırakmayın.

Örnek kodlanmış JWT (görüntülenmek üzere kısaltıldı):

eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImtpZCI6Ilg1ZVhrNHh5b2pORnVtMWtsMll0djhkbE5QNC1j ... bQdHBHGcQQRbW7Wmo6SWYG4V_bU55Ug_PW4pLPr20tTS8Ct7_uwy9DWrzCMzpD-EiwT5IjXwlGX3IXVjHIlX50IVIydBoPQtadvT7saKo1G5Jmutgq41o-dmz6-yBMKV2_nXA25Q

Azure AAD B2C 'da kimlik doğrulayan bir uygulama için araç tarafından kodu çözülen örnek JWT:

{
  "typ": "JWT",
  "alg": "RS256",
  "kid": "X5eXk4xyojNFum1kl2Ytv8dlNP4-c57dO6QGTVBwaNk"
}.{
  "exp": 1610059429,
  "nbf": 1610055829,
  "ver": "1.0",
  "iss": "https://mysiteb2c.b2clogin.com/5cc15ea8-a296-4aa3-97e4-226dcc9ad298/v2.0/",
  "sub": "5ee963fb-24d6-4d72-a1b6-889c6e2c7438",
  "aud": "70bde375-fce3-4b82-984a-b247d823a03f",
  "nonce": "b2641f54-8dc4-42ca-97ea-7f12ff4af871",
  "iat": 1610055829,
  "auth_time": 1610055822,
  "idp": "idp.com",
  "tfp": "B2C_1_signupsignin"
}.[Signature]

Blazor WebAssemblyAzure Active Directory B2C ile ASP.NET Core barındırılan bir uygulamanın güvenliğini sağlama

Lütfen deneyiminizi değerlendirin

uygulamaları AAD B2C kaydetme ve çözüm oluşturma

Kiracı oluşturma

Sunucu API 'SI uygulaması kaydetme

İstemci uygulamasını kaydetme

Uygulama oluşturma

Server Uygulama yapılandırması

Kimlik doğrulama paketi

Kimlik doğrulama hizmeti desteği

Kullanıcı. Identity . Ada

Uygulama ayarları

Hava tahmin denetleyicisi

Client Uygulama yapılandırması

Kimlik doğrulama paketi

Kimlik doğrulama hizmeti desteği

Erişim belirteci kapsamları

Oturum açma modu

Dosya içeri aktarmalar

Dizin sayfası

Uygulama bileşeni

RedirectToLogin bileşeni

LoginDisplay bileşeni

Kimlik doğrulama bileşeni

FetchData bileşeni

Uygulamayı çalıştırma

Özel kullanıcı akışları

Sorun giderme

Sık karşılaşılan hatalar

Cookies ve site verileri

Uygulama yükseltmeleri

Sunucu uygulamasını çalıştırma

JSON Web Token (JWT) içeriğini İnceleme

Ek kaynaklar

uygulamaları AAD B2C kaydetme ve çözüm oluşturma

Kiracı oluşturma

Sunucu API 'SI uygulaması kaydetme

İstemci uygulamasını kaydetme

Uygulama oluşturma

Server Uygulama yapılandırması

Kimlik doğrulama paketi

Kimlik doğrulama hizmeti desteği

Kullanıcı. Identity . Ada

Uygulama ayarları

Hava tahmin denetleyicisi

Client Uygulama yapılandırması

Kimlik doğrulama paketi

Kimlik doğrulama hizmeti desteği

Erişim belirteci kapsamları

Oturum açma modu

Dosya içeri aktarmalar

Dizin sayfası

Uygulama bileşeni

RedirectToLogin bileşeni

LoginDisplay bileşeni

Kimlik doğrulama bileşeni

FetchData bileşeni

Uygulamayı çalıştırma

Özel kullanıcı akışları

Sorun giderme

Sık karşılaşılan hatalar

Cookies ve site verileri

Uygulama yükseltmeleri

Sunucu uygulamasını çalıştırma

JSON Web Token (JWT) içeriğini İnceleme

Ek kaynaklar

uygulamaları AAD B2C kaydetme ve çözüm oluşturma

Kiracı oluşturma

Sunucu API 'SI uygulaması kaydetme

İstemci uygulamasını kaydetme

Uygulama oluşturma

Server uygulama yapılandırması

Kimlik doğrulama paketi

Kimlik doğrulama hizmeti desteği

Kullanıcı. Identity . Adı

Uygulama ayarları

WeatherForecast denetleyicisi

Client uygulama yapılandırması

Kimlik doğrulama paketi

Kimlik doğrulama hizmeti desteği

`Server` Uygulama yapılandırması

`Client` Uygulama yapılandırması

`Server` Uygulama yapılandırması

`Client` Uygulama yapılandırması

`Server` uygulama yapılandırması

`Client` uygulama yapılandırması