Blazor WebAssemblyMicrosoft hesaplarıyla ASP.NET Core tek başına uygulamayı güvenli hale getirme

bu makalede, kimlik doğrulaması için Azure Active Directory (AAD) ile Microsoft hesaplarını kullanan tek başına bir Blazor WebAssembly uygulamanın nasıl oluşturulacağı ele alınmaktadır.

AAD uygulamasını kaydetme:

  1. Azure portal Azure Active Directory gidin. Kenar çubuğunda uygulama kayıtları seçin. Yeni kayıt düğmesini seçin.
  2. uygulama için bir ad sağlayın (örneğin, Blazor tek başına AAD Microsoft hesapları).
  3. Desteklenen hesap türleri' nde, herhangi bir kuruluş dizininde hesaplar' ı seçin.
  4. 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ı, 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. bu konunun ilerleyen kısımlarında bir açıklama görüntülenerek IIS Express kullanıcıların yeniden yönlendirme urı 'sini güncelleştirmesini hatırlatır.
  5. Doğrulanmamış bir yayımcı etki alanıkullanıyorsanız, > OpenID ve offline_access izinleri için yönetici onayı verme izinleri onay kutusunun işaretini kaldırın. Yayımcı etki alanı doğrulanırsa, bu onay kutusu mevcut değildir.
  6. Kaydet’i seçin.

Uygulama (istemci) KIMLIĞINI (örneğin, 41451fa7-82d9-4673-8fa5-69eff5a761fd ) kaydedin.

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

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

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

dotnet new blazorwasm -au SingleOrg --client-id "{CLIENT ID}" --tenant-id "common" -o {APP NAME}
Yer tutucu Azure portal adı Örnek
{APP NAME} BlazorSample
{CLIENT ID} Uygulama (istemci) kimliği 41451fa7-82d9-4673-8fa5-69eff5a761fd

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.

Not

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

uygulama rastgele bir IIS Express bağlantı noktasında çalışıyorsa, uygulamanın bağlantı noktası hata ayıklama panelinde uygulamanın özelliklerinde bulunabilir.

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

Ve için bir çifti MsalProviderOptions ekleyin openid offline_access DefaultAccessTokenScopes :

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

Uygulamayı oluşturduktan sonra şunları yapmanız gerekir:

Kimlik doğrulama paketi

Iş veya okul hesaplarını () kullanmak üzere bir uygulama oluşturulduğunda SingleOrg , uygulama Microsoft kimlik doğrulama kitaplığı () için bir paket başvurusu otomatik olarak 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

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 tüm hizmetleri ayarlar.

Program.cs:

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

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 AAD yapılandırmadan elde edilebilir.

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

{
  "AzureAd": {
    "Authority": "https://login.microsoftonline.com/common",
    "ClientId": "{CLIENT ID}",
    "ValidateAuthority": true
  }
}

Örnek:

{
  "AzureAd": {
    "Authority": "https://login.microsoftonline.com/common",
    "ClientId": "41451fa7-82d9-4673-8fa5-69eff5a761fd",
    "ValidateAuthority": true
  }
}

Erişim belirteci kapsamları

Blazor WebAssemblyŞablon, uygulamayı güvenli BIR API için erişim belirteci isteyecek şekilde otomatik olarak yapılandırmaz. Oturum açma akışının bir parçası olarak bir erişim belirteci sağlamak için, kapsamı varsayılan erişim belirteci kapsamlarına ekleyin MsalProviderOptions :

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

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

Oturum açma modu

Ç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

Ad Microsoft.AspNetCore.Components.Authorization alanı, dosya aracılığıyla uygulamanın her yerinde kullanılabilir _Imports.razor yapılır:

@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}
@using {APPLICATION ASSEMBLY}.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:

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

<RemoteAuthenticatorView Action="@Action" />

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

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:

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

  1. bir komut kabuğundan yürüterek yerel sistemin NuGet paketi önbelleklerini temizleyin dotnet nuget locals all --clear .
  2. Proje bin ve obj klasörlerini silin.
  3. Projeyi geri yükleyin ve yeniden derleyin.
  4. 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) ile Microsoft hesaplarını kullanan tek başına bir Blazor WebAssembly uygulamanın nasıl oluşturulacağı ele alınmaktadır.

AAD uygulamasını kaydetme:

  1. Azure portal Azure Active Directory gidin. Kenar çubuğunda uygulama kayıtları seçin. Yeni kayıt düğmesini seçin.
  2. uygulama için bir ad sağlayın (örneğin, Blazor tek başına AAD Microsoft hesapları).
  3. Desteklenen hesap türleri' nde, herhangi bir kuruluş dizininde hesaplar' ı seçin.
  4. 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ı, 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. bu konunun ilerleyen kısımlarında bir açıklama görüntülenerek IIS Express kullanıcıların yeniden yönlendirme urı 'sini güncelleştirmesini hatırlatır.
  5. Doğrulanmamış bir yayımcı etki alanıkullanıyorsanız, > OpenID ve offline_access izinleri için yönetici onayı verme izinleri onay kutusunun işaretini kaldırın. Yayımcı etki alanı doğrulanırsa, bu onay kutusu mevcut değildir.
  6. Kaydet’i seçin.

Uygulama (istemci) KIMLIĞINI (örneğin, 41451fa7-82d9-4673-8fa5-69eff5a761fd ) kaydedin.

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

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

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

dotnet new blazorwasm -au SingleOrg --client-id "{CLIENT ID}" --tenant-id "common" -o {APP NAME}
Yer tutucu Azure portal adı Örnek
{APP NAME} BlazorSample
{CLIENT ID} Uygulama (istemci) kimliği 41451fa7-82d9-4673-8fa5-69eff5a761fd

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.

Not

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

uygulama rastgele bir IIS Express bağlantı noktasında çalışıyorsa, uygulamanın bağlantı noktası hata ayıklama panelinde uygulamanın özelliklerinde bulunabilir.

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

Ve için bir çifti MsalProviderOptions ekleyin openid offline_access DefaultAccessTokenScopes :

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

Uygulamayı oluşturduktan sonra şunları yapmanız gerekir:

Kimlik doğrulama paketi

Iş veya okul hesaplarını () kullanmak üzere bir uygulama oluşturulduğunda SingleOrg , uygulama Microsoft kimlik doğrulama kitaplığı () için bir paket başvurusu otomatik olarak 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

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 tüm hizmetleri ayarlar.

Program.cs:

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

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 AAD yapılandırmadan elde edilebilir.

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

{
  "AzureAd": {
    "Authority": "https://login.microsoftonline.com/common",
    "ClientId": "{CLIENT ID}",
    "ValidateAuthority": true
  }
}

Örnek:

{
  "AzureAd": {
    "Authority": "https://login.microsoftonline.com/common",
    "ClientId": "41451fa7-82d9-4673-8fa5-69eff5a761fd",
    "ValidateAuthority": true
  }
}

Erişim belirteci kapsamları

Blazor WebAssemblyŞablon, uygulamayı güvenli BIR API için erişim belirteci isteyecek şekilde otomatik olarak yapılandırmaz. Oturum açma akışının bir parçası olarak bir erişim belirteci sağlamak için, kapsamı varsayılan erişim belirteci kapsamlarına ekleyin MsalProviderOptions :

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

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

Oturum açma modu

Ç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

Ad Microsoft.AspNetCore.Components.Authorization alanı, dosya aracılığıyla uygulamanın her yerinde kullanılabilir _Imports.razor yapılır:

@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}
@using {APPLICATION ASSEMBLY}.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:

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

<RemoteAuthenticatorView Action="@Action" />

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

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:

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

  1. bir komut kabuğundan yürüterek yerel sistemin NuGet paketi önbelleklerini temizleyin dotnet nuget locals all --clear .
  2. Proje bin ve obj klasörlerini silin.
  3. Projeyi geri yükleyin ve yeniden derleyin.
  4. 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) ile Microsoft hesaplarını kullanan tek başına bir Blazor WebAssembly uygulamanın nasıl oluşturulacağı ele alınmaktadır.

AAD uygulamasını kaydetme:

  1. Azure portal Azure Active Directory gidin. Kenar çubuğunda uygulama kayıtları seçin. Yeni kayıt düğmesini seçin.
  2. uygulama için bir ad sağlayın (örneğin, Blazor tek başına AAD Microsoft hesapları).
  3. Desteklenen hesap türleri' nde, herhangi bir kuruluş dizininde hesaplar' ı seçin.
  4. Yeniden yönlendirme URI 'si açılan öğesini Web 'e ayarlı bırakı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ı, 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. bu konunun ilerleyen kısımlarında bir açıklama görüntülenerek IIS Express kullanıcıların yeniden yönlendirme urı 'sini güncelleştirmesini hatırlatır.
  5. Doğrulanmamış bir yayımcı etki alanıkullanıyorsanız, > OpenID ve offline_access izinleri için yönetici onayı verme izinleri onay kutusunun işaretini kaldırın. Yayımcı etki alanı doğrulanırsa, bu onay kutusu mevcut değildir.
  6. Kaydet’i seçin.

Uygulama (istemci) KIMLIĞINI (örneğin, 41451fa7-82d9-4673-8fa5-69eff5a761fd ) kaydedin.

Kimlik doğrulama > platformu yapılandırması > Web:

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

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

dotnet new blazorwasm -au SingleOrg --client-id "{CLIENT ID}" --tenant-id "common" -o {APP NAME}
Yer tutucu Azure portal adı Örnek
{APP NAME} BlazorSample
{CLIENT ID} Uygulama (istemci) kimliği 41451fa7-82d9-4673-8fa5-69eff5a761fd

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.

Not

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

uygulama rastgele bir IIS Express bağlantı noktasında çalışıyorsa, uygulamanın bağlantı noktası hata ayıklama panelinde uygulamanın özelliklerinde bulunabilir.

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

Uygulamayı oluşturduktan sonra şunları yapmanız gerekir:

Kimlik doğrulama paketi

Iş veya okul hesaplarını () kullanmak üzere bir uygulama oluşturulduğunda SingleOrg , uygulama Microsoft kimlik doğrulama kitaplığı () için bir paket başvurusu otomatik olarak 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

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 tüm hizmetleri ayarlar.

Program.cs:

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

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 AAD yapılandırmadan elde edilebilir.

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

{
  "AzureAd": {
    "Authority": "https://login.microsoftonline.com/common",
    "ClientId": "{CLIENT ID}",
    "ValidateAuthority": true
  }
}

Örnek:

{
  "AzureAd": {
    "Authority": "https://login.microsoftonline.com/common",
    "ClientId": "41451fa7-82d9-4673-8fa5-69eff5a761fd",
    "ValidateAuthority": true
  }
}

Erişim belirteci kapsamları

Blazor WebAssemblyŞablon, uygulamayı güvenli BIR API için erişim belirteci isteyecek şekilde otomatik olarak yapılandırmaz. Oturum açma akışının bir parçası olarak bir erişim belirteci sağlamak için, kapsamı varsayılan erişim belirteci kapsamlarına ekleyin MsalProviderOptions :

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

İle ek kapsamlar belirtin AdditionalScopesToConsent :

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

AAD'ye kayıtlı bir sunucu API'si ile çalışırken ve uygulamanın AAD kaydı doğrulanmamış yayımcı etki alanını kullanan bir kiracıda olduğunda,sunucu API'si uygulamanın Uygulama Kimliği URI'si biçiminde api://{SERVER API APP CLIENT ID OR CUSTOM VALUE} https://{TENANT}.onmicrosoft.com/{SERVER API APP CLIENT ID OR CUSTOM VALUE} değildir. Bu durumda, uygulamanın içinde varsayılan erişim Program.cs belirteci Client kapsamı aşağıdakine benzer görünür:

options.ProviderOptions.DefaultAccessTokenScopes
    .Add("https://{TENANT}.onmicrosoft.com/{SERVER API APP CLIENT ID OR CUSTOM VALUE}/{DEFAULT SCOPE}");

Sunucu API uygulamasını eşleşen bir hedef kitle için yapılandırmak üzere API uygulaması ayarları dosyasındaki ( ) uygulamasını uygulamanın hedef kitlesi tarafından sağlanan hedef Audience Server appsettings.json kitleyle eş Azure portal:

{
  "AzureAd": {
    "Authority": "https://login.microsoftonline.com/{TENANT ID}",
    "ClientId": "{SERVER API APP CLIENT ID}",
    "ValidateAuthority": true,
    "Audience": "https://{TENANT}.onmicrosoft.com/{SERVER API APP CLIENT ID OR CUSTOM VALUE}"
  }
}

Yukarıdaki yapılandırmada, değerin Audience sonu varsayılan kapsamı dahil /{DEFAULT SCOPE} değildir.

Örnek:

Program.csUygulamanın Client içinde:

options.ProviderOptions.DefaultAccessTokenScopes
    .Add("https://contoso.onmicrosoft.com/41451fa7-82d9-4673-8fa5-69eff5a761fd/API.Access");

API uygulaması Server ayarları dosyasını ( ) eşleşen bir hedef appsettings.json kitleyle ( ) Audience yapılandırma:

{
  "AzureAd": {
    "Authority": "https://login.microsoftonline.com/e86c78e2-...-918e0565a45e",
    "ClientId": "41451fa7-82d9-4673-8fa5-69eff5a761fd",
    "ValidateAuthority": true,
    "Audience": "https://contoso.onmicrosoft.com/41451fa7-82d9-4673-8fa5-69eff5a761fd"
  }
}

Yukarıdaki örnekte, değerin sonu Audience varsayılan kapsamı /API.Access içermez.

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

İçeri aktarma dosyası

Ad Microsoft.AspNetCore.Components.Authorization alanı, dosya aracılığıyla uygulamanın her yerinde kullanılabilir _Imports.razor yapılır:

@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}
@using {APPLICATION ASSEMBLY}.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:

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

<RemoteAuthenticatorView Action="@Action" />

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

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:

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

  1. bir komut kabuğundan yürüterek yerel sistemin NuGet paketi önbelleklerini temizleyin dotnet nuget locals all --clear .
  2. Proje bin ve obj klasörlerini silin.
  3. Projeyi geri yükleyin ve yeniden derleyin.
  4. 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