이 브라우저는 더 이상 지원되지 않습니다.
최신 기능, 보안 업데이트, 기술 지원을 이용하려면 Microsoft Edge로 업그레이드하세요.
참고
이 문서의 최신 버전은 아닙니다. 현재 릴리스는 이 문서의 .NET 9 버전을 참조 하세요.
중요
이 정보는 상업적으로 출시되기 전에 실질적으로 수정될 수 있는 시험판 제품과 관련이 있습니다. Microsoft는 여기에 제공된 정보에 대해 어떠한 명시적, 또는 묵시적인 보증을 하지 않습니다.
현재 릴리스는 이 문서의 .NET 9 버전을 참조 하세요.
Blazor WebAssembly 앱은 SPA(단일 페이지 애플리케이션)와 동일한 방식으로 보호됩니다. 사용자를 SPA에 인증하는 여러 가지 방법이 있지만, OIDC(OpenID Connect)와 같은 OAuth 2.0 프로토콜 기반의 구현을 사용하는 것이 가장 일반적이고 포괄적인 방법입니다.
Blazor WebAssembly 보안 설명서는 주로 사용자 인증 및 권한 부여 작업을 수행하는 방법에 중점을 둡니다. OAuth 2.0/OIDC 일반 개념 검사의 경우 주 개요 문서의 추가 리소스 섹션에 있는 리소스를 참조하세요.
Blazor WebAssembly 앱의 .NET/C# 코드베이스는 클라이언트에 제공되며 앱의 코드는 사용자의 검사 및 변조로부터 보호할 수 없습니다. 앱 비밀, 연결 문자열, 암호, 보안 키 및 프라이빗 .NET/C# 코드와 같은 중요한 데이터를 Blazor WebAssembly 앱에 배치하지 마세요.
다음 기술은 중요한 데이터를 저장하는 데 유용하며, 동일한 앱에서 함께 사용하여 개발 및 스테이징/프로덕션 환경 간에 데이터를 저장하는 책임을 분할할 수 있습니다.
이전 방법의 예는 ASP.NET Core 계정 확인 및 암호 복구 Blazor WebAssembly ASP.NET Core Identity를 참조하세요.
.NET/C# 코드 및 데이터를 보호하려면 서버 쪽 ASP.NET Core 백 엔드 웹 API에서 ASP.NET Core Data Protection 기능을 사용합니다. 클라이언트 쪽 Blazor WebAssembly 앱은 보안 앱 기능 및 데이터 처리를 위해 서버 쪽 웹 API를 호출합니다. 자세한 내용은 ASP.NET Core Blazor 앱 및 이 설명서 노드의 문서 및 예제에서 웹 API 호출을 참조하세요.
Blazor WebAssembly 앱은 CORS(원본 간 요청 공유) 보안 인해 원본 간에 웹 API를 직접 호출할 수 없는 경우가 많습니다. 일반적인 예외는 다음과 같습니다.
원본 'https://localhost:{PORT}'에서 '{URL}'에서 페치할 수 있는 액세스 권한 CORS 정책에 의해 차단되었습니다. 요청된 리소스에 'Access-Control-Allow-Origin' 헤더가 없습니다. 불투명한 응답이 요구 사항을 충족하는 경우 요청 모드를 'no-cors'로 설정하여 CORS를 사용하지 않도록 설정한 리소스를 가져옵니다.
이전 예외를 우회하려는 NoCors(1)의 BrowserRequestMode 필드를 사용하여 SetBrowserRequestMode 호출하더라도 일반적으로 특정 원본의 호출만 허용하는 제한 또는 브라우저에서 JavaScript fetch 요청을 방지하는 제한과 같은 웹 API 원본의 CORS 제한으로 인해 요청이 실패합니다. 이러한 호출이 성공하려면 호출하고자 하는 웹 API가 적절한 CORS 구성으로 귀하의 원본이 해당 원본을 호출할 수 있도록 허용해야 합니다. 대부분의 외부 웹 API는 CORS 정책을 구성할 수 없습니다. 이 제한을 처리하려면 다음 전략 중 하나를 채택합니다.
고유한 서버 쪽 ASP.NET Core 백 엔드 웹 API를 유지 관리합니다. 클라이언트 쪽 Blazor WebAssembly 앱은 서버 쪽 웹 API를 호출하고, 웹 API는 서버 기반 C# 코드(브라우저 아님)에서 올바른 CORS 헤더를 사용하여 외부 웹 API로 요청을 수행하고 결과를 클라이언트 쪽 Blazor WebAssembly 앱으로 반환합니다.
프록시 서비스를 사용하여 클라이언트 쪽 Blazor WebAssembly 앱에서 외부 웹 API로 요청을 프록시합니다. 프록시 서비스는 서버 쪽 앱을 사용하여 클라이언트를 대신하여 요청을 수행하고 호출이 성공한 후 결과를 반환합니다. 다음 예제에서는 CloudFlare의 CORS PROXY기반으로 {REQUEST URI} 자리 표시자는 요청 URI입니다.
@using System.Net
@inject IHttpClientFactory ClientFactory
...
@code {
public async Task CallApi()
{
var client = ClientFactory.CreateClient();
var urlEncodedRequestUri = WebUtility.UrlEncode("{REQUEST URI}");
var request = new HttpRequestMessage(HttpMethod.Get,
$"https://corsproxy.io/?{urlEncodedRequestUri}");
var response = await client.SendAsync(request);
...
}
}
Blazor WebAssembly은 Microsoft.AspNetCore.Components.WebAssembly.Authentication 라이브러리를 사용하여 Microsoft 아이덴티티 플랫폼에서 OIDC를 통해 앱을 인증하고 권한을 부여합니다. 이 라이브러리는 ASP.NET Core 백 엔드에 대해 원활하게 인증하기 위한 기본 형식 집합을 제공합니다. 이 라이브러리는 OP(OpenID 공급자)라고 하는 OIDC를 지원하는 타사 Identity 공급자(IP)에 대해 인증할 수 있습니다.
라이브러리(Blazor WebAssembly)의 Authentication.js인증 지원은 기본 인증 프로토콜 세부 정보를 처리하는 데 사용되는 MSALmsal.js(Microsoft 인증 라이브러리)을 기반으로 합니다. 라이브러리는 Blazor WebAssembly PKCE(코드 교환용 증명 키) 권한 부여 코드 흐름만 지원합니다. 암시적 허용은 지원되지 않습니다.
SameSite 쿠키를 사용하는 것과 같이 SPA를 인증하기 위한 다른 옵션이 있습니다. 그러나 Blazor WebAssembly의 엔지니어링 설계에서는 OAuth 및 OIDC가 Blazor WebAssembly 앱의 인증을 위한 최고의 옵션으로 사용됩니다. JWT(JSON Web Token) 기반의 토큰 기반 인증이 기능 및 보안상의 이유로 cookie 기반 인증 대신 선택되었습니다.
중요
Identity 프로젝트 템플릿에서 Duende Blazor Server를 채택하는 ASP.NET Core 버전의 경우, Duende Software는 Duende Identity Server의 프로덕션 사용에 대한 라이선스 요금을 지불해야 할 수 있습니다. 자세한 내용은 ASP.NET Core 5.0에서 6.0으로 마이그레이션을 참조하세요.
Microsoft.AspNetCore.Components.WebAssembly.Authentication 라이브러리는 OIDC를 사용하여 인증 및 권한 부여를 구현하는 여러 가지 기본 형식을 제공합니다. 대체로 인증은 다음과 같이 작동합니다.
[Authorize] 요청 하면 사용자는 앱의 로그인 페이지(/authentication/login)로 리디렉션됩니다./authentication/login-callback)로 리디렉션합니다./authentication/login-callback)를 로드하면 인증 응답이 처리됩니다.
/authentication/login-failed)로 보내집니다. 여기서 오류가 표시됩니다.
Authentication 구성 요소(Authentication.razor)는 원격 인증 작업을 처리하고 앱이 다음 작업을 수행하도록 허용합니다.
사용자 등록 또는 로그인 같은 인증 작업은 인증 작업 간에 상태를 유지하고 제어하는, Blazor 프레임워크의 RemoteAuthenticatorViewCore<TAuthenticationState> 구성 요소에 전달됩니다.
자세한 내용과 예제는 ASP.NET Core Blazor WebAssembly 추가 보안 시나리오를 참조하세요.
Blazor WebAssembly 앱에서는 사용자가 클라이언트 쪽 코드를 모두 수정할 수 있기 때문에 권한 부여 확인을 무시할 수 있습니다. JavaScript SPA 프레임워크 또는 모든 운영 체제의 네이티브 앱을 포함하여 모든 클라이언트 쪽 앱 기술에는 동일하게 적용됩니다.
항상 클라이언트 쪽 앱을 통해 액세스한 API 엔드포인트 내에서 서버의 권한 부여 확인을 수행합니다.
Blazor WebAssembly 외부 ID 공급자를 사용하여 원격 인증 작업을 수행하기 위해 기본 인증 라이브러리에 대한 추가 매개 변수를 추가하고 검색하는 메서드를 제공합니다.
추가 매개 변수를 전달하려면, NavigationManager는 외부 위치 변경을 수행할 때 기록 항목 상태를 전달하고 검색하도록 지원합니다. 자세한 내용은 다음 리소스를 참조하세요.
기록 API에 의해 저장된 상태는 원격 인증에 다음과 같은 이점을 제공합니다.
authentication/login 엔드포인트에서 사용자를 인증하기 위해 수행되는 탐색에 연결됩니다.InteractiveRequestOptions 액세스 토큰에 로그인하거나 프로비전하기 위한 ID 공급자에 대한 요청을 나타냅니다.
NavigationManagerExtensions는 로그인 작업을 위한 NavigateToLogin 메서드를 제공하고 로그아웃 작업을 위한 NavigateToLogout을 제공합니다. 메서드는 NavigationManager.NavigateTo를 호출하여 전달된 InteractiveRequestOptions 또는 메서드에서 만든 새 InteractiveRequestOptions 인스턴스를 사용하여 기록 항목 상태를 설정합니다.
다음 인증 시나리오는 ASP.NET Core Blazor WebAssembly 추가 보안 시나리오 문서에서 다룹니다.
다음 방법 중 [Authorize]를 사용하여 앱의 각 구성 요소에 (Razor)을 적용합니다.
앱의 Imports 파일에서 @using에 대한 Microsoft.AspNetCore.Authorization 지시문과 함께 @attribute 네임스페이스에 대한 [Authorize] 지시문을 추가합니다.
_Imports.razor:
@using Microsoft.AspNetCore.Authorization
@attribute [Authorize]
Authentication 구성 요소에 대한 익명 액세스를 허용하여 ID 공급자로의 리디렉션을 허용합니다.
Razor 지시문 아래에서 Authentication 구성 요소에 다음 @page 코드를 추가합니다.
Authentication.razor:
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
@attribute [AllowAnonymous]
지시문 아래에 각 Razor 구성 요소에 @page 특성을 추가합니다.
@using Microsoft.AspNetCore.Authorization
@attribute [Authorize]
참고
AuthorizationOptions.FallbackPolicy를 사용하는 정책에 대한 RequireAuthenticatedUser 설정은 지원되지 않습니다.
이 개요 아래의 문서 중 일부는 둘 이상의 앱을 포함하는 호스팅 시나리오와 관련이 Blazor 있습니다. 독립 실행형 Blazor WebAssembly 앱은 인증된 사용자와 웹 API를 사용하여 서버 앱에서 제공하는 서버 리소스 및 데이터에 액세스합니다.
이 시나리오가 설명서 예제에서 구현될 때 두 개의 ID 공급자 등록이 사용됩니다. 하나는 클라이언트 앱용이고 다른 하나는 서버 앱용입니다. Microsoft Entra ID와 같이 별도의 등록을 사용하는 것은 엄격히 필요하지 않습니다. 그러나 앱별로 등록을 격리하기 때문에 두 개의 등록을 사용하는 것이 보안 모범 사례입니다. 별도의 등록을 사용하면 클라이언트 및 서버 등록을 독립적으로 구성할 수도 있습니다.
이 개요 아래의 문서 중 일부는 두 개 이상의 앱을 포함하는 다음 Blazor 호스팅 시나리오 중 하나와 관련이 있습니다.
이러한 시나리오가 설명서 예제에서 구현될 때 두 개의 ID 공급자 등록이 사용됩니다. 하나는 클라이언트 앱용이고 다른 하나는 서버 앱용입니다. Microsoft Entra ID와 같이 별도의 등록을 사용하는 것은 엄격히 필요하지 않습니다. 그러나 앱별로 등록을 격리하기 때문에 두 개의 등록을 사용하는 것이 보안 모범 사례입니다. 별도의 등록을 사용하면 클라이언트 및 서버 등록을 독립적으로 구성할 수도 있습니다.
새로 고침 토큰은 Blazor WebAssembly 앱에서 보호될 수 없지만 적절한 보안 전략으로 구현하는 경우 새로 고침 토큰을 사용할 수 있습니다.
.NET 6 이상의 ASP.NET Core에 있는 독립 실행형 Blazor WebAssembly 앱의 경우 다음을 사용하는 것이 좋습니다.
호스트된 Blazor WebAssembly 솔루션의 경우, 새로 고침 토큰은 타사 API에 액세스하기 위해 서버 쪽 앱에서 유지 관리하고 사용될 수 있습니다. 자세한 내용은 ASP.NET Core Blazor WebAssembly 추가 보안 시나리오를 참조하세요.
자세한 내용은 다음 리소스를 참조하세요.
앱에서는 종종 서버에 대한 웹 API 호출을 기반으로 사용자 클레임을 수행해야 합니다. 예를 들어 클레임은 앱에서 권한 부여를 설정하는 데 자주 사용됩니다. 이러한 시나리오에서 앱은 서비스에 액세스하기 위해 액세스 토큰을 요청하고 이 토큰을 사용하여 클레임을 만들기 위한 사용자 데이터를 가져옵니다.
예제를 보려면 다음 리소스를 참조하세요.
미리 렌더링은 인증 엔드포인트(/authentication/ 경로 세그먼트)에 대해 지원되지 않습니다.
미리 렌더링은 인증 엔드포인트(/authentication/ 경로 세그먼트)에 대해 지원되지 않습니다.
자세한 내용은 ASP.NET Core Blazor WebAssembly 추가 보안 시나리오를 참조하세요.
Identity Server를 사용하여 Azure App Service on Linux에 배포할 때 발급자를 명시적으로 지정합니다.
자세한 내용은 SPA에 대한 Web API 백 엔드 보안을 위한 사용을 Identity 참조하세요.
Blazor Webassembly 또는 다른 모든 SPA 프레임워크에서는 Windows 인증을 사용하지 않는 것이 좋습니다. Windows 인증 대신 ADFS(Active Directory Federation Services)를 사용하는 OIDC 같은 토큰 기반 프로토콜을 사용하는 것이 좋습니다.
Blazor Webassembly 또는 다른 모든 SPA 프레임워크에서 Windows 인증을 사용하는 경우 CSRF(교차 사이트 요청 위조) 토큰으로부터 앱을 보호하려면 추가적인 방법이 필요합니다. 쿠키에 적용되는 동일한 문제는 Windows 인증에 적용되며 Windows 인증은 원본 간에 인증 컨텍스트를 공유하는 것을 방지하는 메커니즘을 제공하지 않습니다. CSRF로부터 보호하는 추가 방법 없이 Windows 인증을 사용하는 앱은 최소한 조직의 인트라넷으로 제한되어야 하며 공개 인터넷에서는 사용하면 안 됩니다.
자세한 내용은 ASP.NET Core에서 교차 사이트 요청 위조(XSRF/CSRF) 공격 방지를 참조하세요.
서버 API 프로젝트에서 허브를 보호 SignalR 하려면 허브 클래스 또는 허브 클래스의 메서드에 특성을[Authorize] 합니다.
호스트 Blazor WebAssembly (.NET 7 이하의 ASP.NET Core) 또는 Blazor Web App (.NET 8 이상의 ASP.NET Core)와 같이 미리 렌더링된 클라이언트 프로젝트에서 ASP.NET Core BlazorSignalR 지침의 지침을 참조하세요.
다음 예제와 같이 독립 실행형 Blazor WebAssembly또는 비 브라우저 앱과 같이 미리 렌더링하지 않고 클라이언트 프로젝트 구성 요소에서 허브 연결에 대한 액세스 토큰을 제공합니다. 자세한 내용은 ASP.NET Core SignalR에서 인증 및 권한 부여를 참조하세요.
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
@inject IAccessTokenProvider TokenProvider
@inject NavigationManager Navigation
...
var tokenResult = await TokenProvider.RequestAccessToken();
if (tokenResult.TryGetToken(out var token))
{
hubConnection = new HubConnectionBuilder()
.WithUrl(Navigation.ToAbsoluteUri("/chathub"),
options => { options.AccessTokenProvider = () => Task.FromResult(token?.Value); })
.Build();
...
}
이 섹션은 Blazor WebAssembly .NET 7 이상에서 ASP.NET Core의 앱에 적용됩니다.
디버그 또는 추적 로깅을 사용하도록 설정하려면 ASP.NET Core Blazor WebAssembly 로깅 문서의 7.0 이상 버전에서 인증 로깅(Blazor) 섹션을 참조하세요.
WebAssembly 샌드박스 는 I/O 하위 시스템, 시스템 스토리지 및 리소스 및 운영 체제에 대한 액세스를 포함하여 WebAssembly 코드를 실행하는 시스템의 환경에 대한 액세스를 제한합니다. WebAssembly 코드와 코드를 실행하는 시스템 간의 격리는 WebAssembly를 시스템에 안전한 코딩 프레임워크로 만듭니다. 그러나 WebAssembly는 하드웨어 수준에서 사이드 채널 공격에 취약합니다. 하드웨어 소싱 및 하드웨어 액세스에 대한 제한 사항에 대한 일반적인 예방 조치 및 실사가 적용됩니다.
WebAssembly는 Microsoft에서 소유하거나 유지 관리하지 않습니다.
자세한 내용은 다음 W3C 리소스를 참조하세요.
이 개요 의 문서에서는 특정 공급자에 대해 앱에서 Blazor WebAssembly 사용자를 인증하는 방법에 대한 정보를 제공합니다.
독립 실행형 Blazor WebAssembly 앱:
호스트된 Blazor WebAssembly 앱:
추가 구성 지침은 다음 문서에서 확인할 수 있습니다.
Microsoft ID 플랫폼의 MSAL(JavaScript용 Microsoft 인증 라이브러리) v2.0 이상은 인증 코드 흐름 및 PKCE(코드 교환용 증명 키)와 함께 CORS(원본 간 리소스 공유)을 지원하여 단일 페이지 애플리케이션에 대한 Blazor지원을 제공합니다.
암시적 허용을 사용하지 않는 것이 좋습니다.
자세한 내용은 다음 리소스를 참조하세요.
ASP.NET Core 피드백
ASP.NET Core 은(는) 오픈 소스 프로젝트입니다. 다음 링크를 선택하여 피드백을 제공해 주세요.
학습
모듈
Azure Static Web Apps를 통한 사용자 인증 - Training
Azure Static Web Apps와 Azure Functions를 사용하여 Angular, React, Svelte 또는 Vue JavaScript 앱을 API 및 인증과 함께 게시합니다. 미리 보기 URL을 사용하여 GitHub에서 스테이징 사이트로 코드를 배포합니다.
인증
Microsoft Certified: Identity and Access Administrator Associate - Certifications
ID 솔루션을 현대화하고, 하이브리드 솔루션을 구현하고, ID 거버넌스를 구현하는 Microsoft Entra ID의 기능을 시연합니다.
