인증 라이브러리를 사용하여 ASP.NET Core Blazor WebAssembly 독립 실행형 앱 보호

Note

이 문서의 최신 버전은 아닙니다. 현재 릴리스는 이 문서의 .NET 10 버전을 참조하세요.

Warning

이 버전의 ASP.NET Core는 더 이상 지원되지 않습니다. 자세한 내용은 .NET 및 .NET Core 지원 정책을 참조 하세요. 현재 릴리스는 이 문서의 .NET 9 버전을 참조 하세요.

이 문서에서는 Blazor WebAssembly 인증 라이브러리를 사용하여 ASP.NET Core Blazor WebAssembly 독립 실행형 앱을 보호하는 방법을 설명합니다.

인증 라이브러리()는 Blazor WebAssembly MSALAuthentication.js(msal.jsMicrosoft 인증 라이브러리)을 통해 PKCE(코드 교환용 증명 키) 권한 부여 코드 흐름만 지원합니다. 다른 권한 부여 흐름을 구현하려면 MSAL 지침에 액세스하여 MSAL을 직접 구현하지만 앱에 PKCE Blazor 이외의 권한 부여 흐름은 지원하거나 사용하지 않는 것이 좋습니다.

Microsoft Entra(ME-ID) 및 AAD B2C(Azure Active Directory B2C) 지침의 경우 이 항목의 지침을 따르지 마세요. Microsoft Entra IDBlazor WebAssembly를 사용하여 ASP.NET Core 독립 실행형 앱 보호를 참조하거나 를 사용하여 ASP.NET Core 독립 실행형 앱 보호를 참조하세요.

이 문서를 읽은 후 추가 보안 시나리오에 대한 자세한 내용은 ASP.NET Core Blazor WebAssembly 추가 보안 시나리오를 참조하세요.

Walkthrough

워크스루의 하위 섹션에서는 다음을 설명합니다.

앱 등록
Blazor 앱 만들기
앱 실행

앱 등록

IP의 유지 관리자가 제공한 지침에 따라 OIDC(OpenID Connect)Identity 공급자(IP)에 앱을 등록합니다.

다음과 같은 정보를 기록해 둡니다.

기관(예: https://accounts.google.com/).
애플리케이션(클라이언트) ID(예: 2...7-e...q.apps.googleusercontent.com).
추가 IP 구성(IP 설명서 참조).

Note

IP는 OIDC를 사용해야 합니다. 예를 들어, Facebook의 IP는 OIDC 규격 공급자가 아니므로 Facebook IP에는 이 항목의 지침이 적용되지 않습니다. 자세한 내용은 보안 ASP.NET Core Blazor WebAssembly를 참조하세요.

Blazor 앱 만들기

독립형 Blazor WebAssembly 앱을 생성하여 Microsoft.AspNetCore.Components.WebAssembly.Authentication 라이브러리를 사용하려면, 선택한 도구에 대한 지침을 따르세요. 인증 에 대한 지원을 추가하는 경우 앱 설정 및 구성에 대한 지침은 이 문서의 앱 부분 섹션을 참조하세요.

Visual Studio
Visual Studio Code / .NET CLI

인증 메커니즘을 사용하여 새 Blazor WebAssembly 프로젝트를 만들려면

앱 템플릿을 Blazor WebAssembly 선택한 후 인증 유형을 개별 계정으로 설정합니다.

앱 템플릿을 Blazor WebAssembly 선택한 후 인증 유형을 개별 계정으로 설정합니다. ASP.NET Core Hosted 확인란이 선택되어 있지 않은지 확인합니다.

개별 계정 선택은 ASP.NET Core의 Identity 시스템을 사용합니다. 이렇게 선택하면 인증 지원이 추가되고 사용자가 데이터베이스에 저장되지 않습니다. 이 문서의 다음 섹션에서는 추가 세부 정보를 제공합니다.

인증 메커니즘을 사용하여 빈 폴더에 새 Blazor WebAssembly 프로젝트를 만듭니다. ASP.NET Core의 Individual 시스템을 사용하려면 -au|--auth 옵션과 함께 Identity 인증 메커니즘을 지정합니다. 이렇게 선택하면 인증 지원이 추가되고 사용자가 데이터베이스에 저장되지 않습니다. 이 문서의 다음 섹션에서는 추가 세부 정보를 제공합니다.

dotnet new blazorwasm -au Individual -o {PROJECT NAME}

Placeholder	Example
`{PROJECT NAME}`	`BlazorSample`

옵션으로 -o|--output 지정된 출력 위치는 프로젝트 폴더가 존재하지 않는 경우 프로젝트 폴더를 만들고 프로젝트 이름의 일부가 됩니다.

자세한 내용은 .NET 가이드의 dotnet new 명령을 참조하세요.

앱 구성

IP의 지침에 따라 앱을 구성합니다. 최소한 앱의 Local:Authority 파일에는 Local:ClientId 및 wwwroot/appsettings.json 구성 설정이 필요합니다.

{
  "Local": {
    "Authority": "{AUTHORITY}",
    "ClientId": "{CLIENT ID}"
  }
}

포트 5001의 주소에서 실행되는 localhost 앱에 대한 Google OAuth 2.0 OIDC 예제:

{
  "Local": {
    "Authority": "https://accounts.google.com/",
    "ClientId": "2...7-e...q.apps.googleusercontent.com",
    "PostLogoutRedirectUri": "https://localhost:5001/authentication/logout-callback",
    "RedirectUri": "https://localhost:5001/authentication/login-callback",
    "ResponseType": "code"
  }
}

리디렉션 URI(https://localhost:5001/authentication/login-callback)는 자격 증명>{NAME}>의 Google API 콘솔에 등록됩니다. 여기서 {NAME}은 Google API 콘솔의 OAuth 2.0 클라이언트 ID 앱 목록에 있는 앱의 클라이언트 이름입니다.

Note

OAuth 2.0 사양localhost일부 OIDC IP에는 리디렉션 URI에 대한 포트 번호를 제공할 필요가 없습니다. 일부 IP는 루프백 주소에 대한 리디렉션 URI가 포트를 생략하도록 허용합니다. 포트 번호에 와일드카드를 사용할 수 있는 경우도 있습니다(예: *). 자세한 내용은 IP 설명서를 참조하세요.

앱 실행

다음 방법 중 하나를 사용하여 앱을 실행합니다.

Visual Studio
- 실행 단추를 선택합니다.
- 메뉴에서 디버그>디버깅 시작을 사용합니다.
- F5 키를 누릅니다.
.NET CLI 명령 셸: 앱의 dotnet watch 폴더에서 (또는 dotnet run) 명령을 실행합니다.

앱의 일부

이 섹션에서는 프로젝트 템플릿에서 Blazor WebAssembly 생성된 앱의 부분과 앱이 구성된 방법에 대해 설명합니다. 설명 섹션의 지침을 사용하여 앱을 만들었다면, 이 섹션에서는 기본 작업 애플리케이션에 대해 따라야 할 특정 지침은 없습니다. 이 섹션의 지침은 사용자를 인증하고 권한을 부여하도록 앱을 업데이트하는 데 유용합니다. 그러나 앱을 업데이트하는 다른 방법은 연습 섹션의 지침에서 새 앱을 만들고 앱의 구성 요소, 클래스 및 리소스를 새 앱으로 이동하는 것입니다.

인증 패키지

앱이 개별 계정을 사용하도록 만들어지면, 해당 앱은 자동으로 Microsoft.AspNetCore.Components.WebAssembly.Authentication 패키지에 대한 참조를 받게 됩니다. 패키지는 앱이 사용자를 인증하고 보호된 API를 호출하는 데 사용할 토큰을 가져올 수 있도록 지원하는 기본 형식 세트를 제공합니다.

앱에 인증을 추가하는 경우에는 Microsoft.AspNetCore.Components.WebAssembly.Authentication 패키지를 앱에 수동으로 추가합니다.

Note

.NET 앱에 패키지를 추가하는 방법에 대한 지침은 패키지 사용 워크플로에서 패키지 설치 및 관리의 문서(NuGet 설명서)를 참조하세요. NuGet.org에서 올바른 패키지 버전을 확인합니다.

인증 서비스 지원

OIDC(OpenID Connect)를 사용하여 사용자를 인증하는 지원은 AddOidcAuthentication 패키지에서 제공하는 Microsoft.AspNetCore.Components.WebAssembly.Authentication 확장 메서드를 사용하여 서비스 컨테이너에 등록됩니다.

AddOidcAuthentication 메서드는 콜백을 받아서 OIDC를 사용하여 앱을 인증하는 데 필요한 매개 변수를 구성합니다. 앱을 구성하는 데 필요한 값은 OIDC 규격 IP에서 얻을 수 있습니다. 앱을 등록할 때 값을 확인하세요. 앱 등록은 보통 온라인 포털에서 진행됩니다.

새 앱인 경우 다음 구성에서 {AUTHORITY} 및 {CLIENT ID} 자리 표시자에 대한 값을 제공합니다. 앱의 IP에서 사용하는 데 필요한 기타 구성 값을 제공합니다. 예제는 Google에 대한 것이며 PostLogoutRedirectUri, RedirectUri 및 ResponseType이 필요합니다. 앱에 인증을 추가하려면 자리 표시자에 대한 값과 기타 구성 값을 사용하여 다음 코드 및 구성을 앱에 수동으로 추가합니다.

Program 파일에서:

builder.Services.AddOidcAuthentication(options =>
{
    builder.Configuration.Bind("Local", options.ProviderOptions);
});

`wwwroot/appsettings.json` 구성

구성은 wwwroot/appsettings.json 파일에서 제공합니다.

{
  "Local": {
    "Authority": "{AUTHORITY}",
    "ClientId": "{CLIENT ID}"
  }
}

액세스 토큰 범위

Blazor WebAssembly 템플릿은 openid 및 profile의 기본 범위를 자동으로 구성합니다.

Blazor WebAssembly 템플릿은 앱이 보안 API에 대한 액세스 토큰을 요청하도록 자동으로 구성하지 않습니다. 로그인 흐름의 일부로 액세스 토큰을 프로비저닝하려면 OidcProviderOptions의 기본 토큰 범위에 범위를 추가합니다. 앱에 인증을 추가하려면 다음 코드를 수동으로 추가하고 범위 URI를 구성합니다.

Program 파일에서:

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

자세한 내용은 ‘추가 시나리오’ 문서의 다음 섹션을 참조하세요.

파일 가져오기

Microsoft.AspNetCore.Components.Authorization 네임스페이스는 _Imports.razor 파일을 통해 앱 전체에서 사용할 수 있게 됩니다.

...
@using Microsoft.AspNetCore.Components.Authorization
...

인덱스 페이지

인덱스 페이지(wwwroot/index.html)는 JavaScript로 AuthenticationService를 정의하는 스크립트를 포함합니다. AuthenticationService는 OIDC 프로토콜의 하위 수준 세부 정보를 처리합니다. 앱은 내부적으로 스크립트에 정의된 메서드를 호출하여 인증 작업을 수행합니다.

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

앱 구성 요소

App 구성 요소(App.razor)는 App 앱에 있는 Blazor Server 구성 요소와 비슷합니다.

AuthorizeRouteView 구성 요소는 현재 사용자가 지정된 페이지에 액세스할 수 있는 권한이 부여받았는지 확인하고 그러지 않은 경우 RedirectToLogin 구성 요소를 렌더링합니다.
RedirectToLogin 구성 요소는 권한 없는 사용자를 로그인 페이지로 리디렉션하는 기능을 관리합니다.

CascadingAuthenticationState 구성 요소는 앱의 나머지 부분에 AuthenticationState 노출하는 것을 관리합니다.
AuthorizeRouteView 구성 요소는 현재 사용자가 지정된 페이지에 액세스할 수 있는 권한이 부여받았는지 확인하고 그러지 않은 경우 RedirectToLogin 구성 요소를 렌더링합니다.
RedirectToLogin 구성 요소는 권한 없는 사용자를 로그인 페이지로 리디렉션하는 기능을 관리합니다.

ASP.NET Core 릴리스 간 프레임워크 변경으로 인해 Razor 구성 요소의 App 변경 내용(App.razor)은 이 섹션에 표시되지 않습니다. 지정된 릴리스의 구성 요소의 변경 내용을 검사하려면 다음 방법 중 하나를 사용합니다.

사용하려는 ASP.NET Core 버전의 기본 Blazor WebAssembly 프로젝트 템플릿에서 인증을 위해 프로비전된 앱을 만듭니다. 생성된 앱에서 App 구성 요소(App.razor)를 검사합니다.
App 구성 요소(App.razor)를 참조 소스에서 검사합니다. 버전 선택기에서 버전을 선택하고, 수년에 걸쳐 변경된 리포지토리의 ProjectTemplates 폴더에서 구성 요소를 검색합니다.

Note

.NET 참조 원본의 설명서 링크는 일반적으로 다음 릴리스의 .NET을 위한 현재 개발을 나타내는 리포지토리의 기본 분기를 로드합니다. 특정 릴리스를 위한 태그를 선택하려면 Switch branches or tags 드롭다운 목록을 사용하세요. 자세한 내용은 ASP.NET Core 소스 코드(dotnet/AspNetCore.Docs #26205)의 버전 태그를 선택하는 방법을 참조하세요.

RedirectToLogin 구성 요소

RedirectToLogin 구성 요소(RedirectToLogin.razor)는 다음을 수행합니다.

로그인 페이지로의 권한 없는 사용자 리디렉션을 관리합니다.
사용자가 액세스하려는 현재 URL은 다음을 사용하여 인증에 성공한 경우 해당 페이지로 반환될 수 있도록 유지 관리됩니다.
- .NET 7 이상에서 ASP.NET Core의 탐색 기록 상태입니다 .
- .NET 6 이하의 ASP.NET Core에 있는 쿼리 문자열입니다.

RedirectToLogin 구성 요소를 참조 소스에서 검사합니다. 구성 요소의 위치는 시간이 지남에 따라 변경되므로 GitHub 검색 도구를 사용하여 구성 요소를 찾습니다.

로그인 경로는 앱에서 사용자 지정할 수 있습니다(RemoteAuthenticationApplicationPathsOptions.LogInPath 프레임워크 기본값(dotnet/aspnetcore참조 원본)). 프로젝트 템플릿의 RedirectToLogin 구성 요소는 .의 authentication/login기본 로그인 경로를 사용합니다.

Note

.NET 참조 원본의 설명서 링크는 일반적으로 다음 릴리스의 .NET을 위한 현재 개발을 나타내는 리포지토리의 기본 분기를 로드합니다. 특정 릴리스를 위한 태그를 선택하려면 Switch branches or tags 드롭다운 목록을 사용하세요. 자세한 내용은 ASP.NET Core 소스 코드(dotnet/AspNetCore.Docs #26205)의 버전 태그를 선택하는 방법을 참조하세요.

앱이 로그인 경로를 사용자 지정하는 경우 다음 방법 중 하나를 수행합니다.

구성 요소에서 하드 코딩된 문자열의 경로와 일치합니다 RedirectToLogin .
삽입 RemoteAuthenticationOptions 하여 구성된 값을 가져옵니다. 예를 들어 .을 사용하여 경로를 AddApiAuthorization사용자 지정할 때 이 방법을 사용합니다. 구성 요소의 RedirectToLogin 맨 위에 다음 지시문을 추가합니다.
```
@using Microsoft.Extensions.Options
@inject IOptionsSnapshot<RemoteAuthenticationOptions<ApiAuthorizationProviderOptions>> RemoteOptions
```
메서드에서 구성 요소의 리디렉션을 수정합니다 OnInitialized .
```
- Navigation.NavigateToLogin("authentication/login");
+ Navigation.NavigateToLogin(RemoteOptions.Get(Options.DefaultName)
+     .AuthenticationPaths.LogInPath);
```
Note

다른 경로가 프로젝트 템플릿의 경로 또는 프레임워크의 기본 경로와 다른 경우 동일한 방식으로 관리해야 합니다.

LoginDisplay 구성 요소

LoginDisplay 구성 요소(LoginDisplay.razor)는 MainLayout 구성 요소(MainLayout.razor)에서 렌더링되고 다음 동작을 관리합니다.

인증된 사용자의 경우:
- 현재 사용자 이름을 표시합니다.
- ASP.NET Core Identity에 있는 사용자 프로필 페이지로 연결되는 링크를 제공합니다.
- 앱에서 로그아웃하는 단추를 제공합니다.
익명 사용자의 경우:
- 등록 옵션을 제공합니다.
- 로그인 옵션을 제공합니다.

ASP.NET Core 릴리스 간 프레임워크 변경으로 인해 Razor 구성 요소의 LoginDisplay 변경 내용은 이 섹션에 표시되지 않습니다. 지정된 릴리스의 구성 요소의 변경 내용을 검사하려면 다음 방법 중 하나를 사용합니다.

사용하려는 ASP.NET Core 버전의 기본 Blazor WebAssembly 프로젝트 템플릿에서 인증을 위해 프로비전된 앱을 만듭니다. 생성된 앱에서 LoginDisplay 구성 요소를 검사합니다.
LoginDisplay 구성 요소를 참조 소스에서 검사합니다. 구성 요소의 위치는 시간이 지남에 따라 변경되므로 GitHub 검색 도구를 사용하여 구성 요소를 찾습니다. Hosted와 같은 true에 대한 템플릿 콘텐츠가 사용됩니다.

Note

.NET 참조 원본의 설명서 링크는 일반적으로 다음 릴리스의 .NET을 위한 현재 개발을 나타내는 리포지토리의 기본 분기를 로드합니다. 특정 릴리스를 위한 태그를 선택하려면 Switch branches or tags 드롭다운 목록을 사용하세요. 자세한 내용은 ASP.NET Core 소스 코드(dotnet/AspNetCore.Docs #26205)의 버전 태그를 선택하는 방법을 참조하세요.

인증 구성 요소

Authentication 구성 요소에 의해 생성된 페이지(Pages/Authentication.razor)는 다른 인증 단계를 처리하는 데 필요한 경로를 정의합니다.

RemoteAuthenticatorView 구성 요소는 다음과 같습니다.

Microsoft.AspNetCore.Components.WebAssembly.Authentication 패키지에서 제공됩니다.
각 인증 단계에서 적절한 작업을 수행하도록 관리합니다.

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

<RemoteAuthenticatorView Action="@Action" />

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

Note

Nullable Reference Types(NRT) 및 .NET 컴파일러의 null 상태 정적 분석은 ASP.NET Core에서 .NET 6 이상 버전으로 지원됩니다. .NET 6에서 ASP.NET Core가 릴리스되기 전에 형식은 string null 형식 지정(?)없이 표시됩니다.

Troubleshoot

Logging

인증에 Blazor WebAssembly 디버그 또는 추적 로깅을 사용하도록 설정하려면 .NET 7 이상에서 ASP.NET Core로 설정된 문서 버전 선택기를 사용하여 의 Blazor 섹션을 참조하세요.

일반 오류

앱 또는 IP(Identity 공급자)의 잘못된 구성

가장 일반적인 오류는 잘못된 구성으로 인해 발생합니다. 다음은 몇 가지 예입니다.
- 시나리오의 요구 사항에 따라, 누락되거나 잘못된 권한, 인스턴스, 테넌트 ID, 테넌트 도메인, 클라이언트 ID 또는 리디렉션 URI 때문에 앱에서 클라이언트를 인증하지 못합니다.
- 잘못된 요청 범위는 클라이언트가 서버 웹 API 엔드포인트에 액세스하지 못하게 합니다.
- 서버 API 권한이 잘못되거나 누락되어 클라이언트가 서버 웹 API 엔드포인트에 액세스할 수 없습니다.
- IP 앱 등록의 리디렉션 URI에 구성된 것과 다른 포트에서 앱을 실행합니다. Microsoft Entra ID 및 localhost 개발 테스트 주소에서 실행 중인 앱에는 포트가 필요하지 않습니다. 그러나 앱의 포트 구성과 앱이 실행되는 포트는 localhost가 아닌 주소에서 반드시 일치해야 합니다.
이 문서 지침의 구성 섹션에서는 올바른 구성의 예를 보여 줍니다. 앱 및 IP의 잘못된 구성이 있는지 문서의 각 섹션을 주의 깊게 확인하세요.

구성이 올바르게 표시되면 다음을 수행합니다.
- 애플리케이션 로그를 분석합니다.
- 브라우저의 개발자 도구를 사용하여 클라이언트 앱과 IP 또는 서버 앱 간의 네트워크 트래픽을 검사합니다. 종종 정확한 오류 메시지 또는 문제의 원인에 대한 단서가 있는 메시지가 요청을 수행한 후 IP 또는 서버 앱에 의해 클라이언트로 반환됩니다. 개발자 도구 지침은 다음 문서에서 확인할 수 있습니다.
  - Google Chrome(Google 설명서)
  - Microsoft Edge
  - Mozilla Firefox(Mozilla 설명서)
- JWT(JSON 웹 토큰)가 사용되는 릴리스의 Blazor 경우 문제가 발생하는 위치에 따라 클라이언트를 인증하거나 서버 웹 API에 액세스하는 데 사용되는 토큰의 콘텐츠를 디코딩합니다. 자세한 내용은 JWT(JSON Web Token)의 콘텐츠 검사를 참조하세요.
문서 작업 팀은 설명서 피드백 및 문서의 버그에 응답하지만(이 페이지의 피드백 섹션에서 문제 열기) 제품 지원을 제공할 수 없습니다. 앱 문제 해결을 지원하기 위해 몇 가지 퍼블릭 지원 포럼을 사용할 수 있습니다. 다음을 권장합니다.
이전 포럼은 Microsoft에서 소유하거나 제어하지 않습니다.

중요하지 않고 보안이나 기밀이 아니며 재현 가능한 프레임워크 버그 보고서의 경우 ASP.NET Core 제품 단위에서 문제를 여세요. 문제의 원인을 철저하게 조사하고, 자신의 노력과 퍼블릭 지원 포럼에서 커뮤니티의 도움으로도 해결할 수 없는 경우에만 제품 부서에 문제를 제기하세요. 그전까지는 제기하지 않도록 하세요. 제품 단위는 단순한 구성 오류 또는 타사 서비스와 관련된 사용 사례로 인해 손상된 개별 앱의 문제를 해결할 수 없습니다. 보고서가 본질적으로 민감하거나 기밀이거나 사이버 공격이 악용될 수 있는 제품의 잠재적 보안 결함을 설명하는 경우 보안 문제 및 버그 보고(dotnet/aspnetcoreGitHub 리포지토리)를 참조하세요.
ME-ID에 대한 권한 없는 클라이언트

info: Microsoft.AspNetCore.Authorization.DefaultAuthorizationService[2] 권한 부여에 실패했습니다. 이러한 요구 사항이 충족되지 않았습니다. DenyAnonymousAuthorizationRequirement: 인증된 사용자가 필요합니다.

ME-ID의 로그인 콜백 오류:
- 오류: unauthorized_client
- 설명: AADB2C90058: The provided application is not configured to allow public clients.
오류를 해결하려면:
1. Azure Portal에서 앱의 매니페스트에 액세스합니다.
2. allowPublicClient 특성을 null 또는 true로 설정합니다.

쿠키 및 사이트 데이터

쿠키 및 사이트 데이터가 앱을 업데이트할 때에도 유지되어 테스트 및 문제 해결에 방해가 될 수 있습니다. 앱 코드를 변경하거나 공급자를 사용하여 사용자 계정을 변경하거나 공급자 앱 구성을 변경하는 경우 다음을 지우세요.

사용자 로그인 쿠키
앱 쿠키
캐시되고 저장된 사이트 데이터

남겨진 쿠키 및 사이트 데이터로 인해 테스트 및 문제 해결이 지장을 받지 않도록 하려면 다음을 수행합니다.

브라우저 구성
- 브라우저가 닫힐 때마다 모든 cookie 및 사이트 데이터를 삭제할 수 있도록 구성할 수 있는지 테스트할 브라우저를 사용하세요.
- 앱, 테스트 사용자 또는 공급자 구성을 변경할 때 수동으로 또는 IDE를 통해 브라우저를 닫습니다.
사용자 지정 명령을 사용하여 Visual Studio에서 InPrivate 또는 Incognito 모드로 브라우저를 엽니다.
- Visual Studio의 실행 단추를 통해 브라우저 선택 대화 상자를 엽니다.
- 추가 단추를 선택합니다.
- 프로그램 필드에서 브라우저의 경로를 제공합니다. 다음 실행 파일 경로는 Windows 10에서 일반적인 설치 위치입니다. 브라우저가 다른 위치에 설치되어 있거나 Windows 10을 사용하지 않는 경우 브라우저 실행 파일의 경로를 제공합니다.
  - Microsoft Edge: C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe
  - Google Chrome: C:\Program Files (x86)\Google\Chrome\Application\chrome.exe
  - 모질라 파이어폭스: C:\Program Files\Mozilla Firefox\firefox.exe
- 인수 필드에서 브라우저가 InPrivate 또는 Incognito 모드에서 여는 데 사용하는 명령줄 옵션을 제공합니다. 일부 브라우저에는 앱의 URL이 필요합니다.
  - -inprivate을(를) Microsoft Edge에서 사용하세요.
  - Google Chrome: --incognito --new-window {URL}를 사용하세요. 이때 {URL} 자리 표시자는 열려는 URL을 나타냅니다(예: https://localhost:5001).
  - Mozilla Firefox: -private -url {URL}를 사용하여 URL을 엽니다. 여기서 {URL} 자리표시자는 열려는 URL을 나타냅니다(예: https://localhost:5001).
- 친근한 이름 필드에 이름을 입력합니다. 예들 들어 Firefox Auth Testing입니다.
- 확인 단추를 선택합니다.
- 앱 테스트를 반복할 때마다 브라우저 프로필을 선택할 필요가 없도록 하려면 기본값으로 설정 단추를 사용하여 프로필을 기본값으로 설정합니다.
- 앱, 테스트 사용자 또는 공급자 구성을 변경할 때 IDE를 통해 브라우저를 닫습니다.

앱 업그레이드

개발 컴퓨터에서 .NET SDK를 업그레이드하거나 앱 내의 패키지 버전을 변경한 직후 작동 중인 앱이 실패할 수 있습니다. 경우에 따라 중요한 업그레이드를 수행할 때 일관되지 않은 패키지로 인해 응용 프로그램이 중단될 수 있습니다. 이러한 대부분의 문제는 다음 지침에 따라 수정할 수 있습니다.

명령 셸에서 dotnet nuget locals all --clear를 실행하여 로컬 시스템의 NuGet 패키지 캐시를 지웁니다.
프로젝트의 bin 및 obj 폴더를 삭제합니다.
프로젝트를 복원하고 다시 빌드합니다.
앱을 다시 배포하기 전에 서버의 배포 폴더에 있는 모든 파일을 삭제합니다.

Note

앱의 대상 프레임워크와 호환되지 않는 패키지 버전의 사용은 지원되지 않습니다. 패키지에 대한 자세한 내용은 NuGet 갤러리사용합니다.

앱 `Server` 실행

호스트된 Blazor WebAssembly솔루션을 테스트하고 문제를 해결할 때 Server 프로젝트에서 앱을 실행하고 있는지 확인합니다.

사용자를 검사하다

다음 User 구성 요소는 앱에서 직접 사용하거나 추가 사용자 지정의 기준으로 사용할 수 있습니다.

User.razor:

@page "/user"
@attribute [Authorize]
@using System.Text.Json
@using System.Security.Claims
@inject IAccessTokenProvider AuthorizationService

<h1>@AuthenticatedUser?.Identity?.Name</h1>

<h2>Claims</h2>

@foreach (var claim in AuthenticatedUser?.Claims ?? Array.Empty<Claim>())
{
    <p class="claim">@(claim.Type): @claim.Value</p>
}

<h2>Access token</h2>

<p id="access-token">@AccessToken?.Value</p>

<h2>Access token claims</h2>

@foreach (var claim in GetAccessTokenClaims())
{
    <p>@(claim.Key): @claim.Value.ToString()</p>
}

@if (AccessToken != null)
{
    <h2>Access token expires</h2>

    <p>Current time: <span id="current-time">@DateTimeOffset.Now</span></p>
    <p id="access-token-expires">@AccessToken.Expires</p>

    <h2>Access token granted scopes (as reported by the API)</h2>

    @foreach (var scope in AccessToken.GrantedScopes)
    {
        <p>Scope: @scope</p>
    }
}

@code {
    [CascadingParameter]
    private Task<AuthenticationState> AuthenticationState { get; set; }

    public ClaimsPrincipal AuthenticatedUser { get; set; }
    public AccessToken AccessToken { get; set; }

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
        var state = await AuthenticationState;
        var accessTokenResult = await AuthorizationService.RequestAccessToken();

        if (!accessTokenResult.TryGetToken(out var token))
        {
            throw new InvalidOperationException(
                "Failed to provision the access token.");
        }

        AccessToken = token;

        AuthenticatedUser = state.User;
    }

    protected IDictionary<string, object> GetAccessTokenClaims()
    {
        if (AccessToken == null)
        {
            return new Dictionary<string, object>();
        }

        // header.payload.signature
        var payload = AccessToken.Value.Split(".")[1];
        var base64Payload = payload.Replace('-', '+').Replace('_', '/')
            .PadRight(payload.Length + (4 - payload.Length % 4) % 4, '=');

        return JsonSerializer.Deserialize<IDictionary<string, object>>(
            Convert.FromBase64String(base64Payload));
    }
}

JWT(JSON Web Token)의 콘텐츠 검사

JWT(JSON Web Token)를 디코딩하려면 Microsoft의 jwt.ms 도구를 사용합니다. UI의 값은 브라우저에 남겨지지 않습니다.

인코딩된 JWT 예제(표시를 위해 축약됨):

eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImtpZCI6Ilg1ZVhrNHh5b2pORnVtMWtsMll0djhkbE5QNC1j ... bQdHBHGcQQRbW7Wmo6SWYG4V_bU55Ug_PW4pLPr20tTS8Ct7_uwy9DWrzCMzpD-EiwT5IjXwlGX3IXVjHIlX50IVIydBoPQtadvT7saKo1G5Jmutgq41o-dmz6-yBMKV2_nXA25Q

Azure AAD B2C에 대해 인증하는 앱용 도구에 의해 디코딩된 JWT 예제:

{
  "typ": "JWT",
  "alg": "RS256",
  "kid": "X5eXk4xyojNFum1kl2Ytv8dlNP4-c57dO6QGTVBwaNk"
}.{
  "exp": 1610059429,
  "nbf": 1610055829,
  "ver": "1.0",
  "iss": "https://mysiteb2c.b2clogin.com/11112222-bbbb-3333-cccc-4444dddd5555/v2.0/",
  "sub": "aaaaaaaa-0000-1111-2222-bbbbbbbbbbbb",
  "aud": "00001111-aaaa-2222-bbbb-3333cccc4444",
  "nonce": "bbbb0000-cccc-1111-dddd-2222eeee3333",
  "iat": 1610055829,
  "auth_time": 1610055822,
  "idp": "idp.com",
  "tfp": "B2C_1_signupsignin"
}.[Signature]

추가 리소스

ASP.NET Core Blazor WebAssembly 추가 보안 시나리오
보안 기본 클라이언트가 있는 앱의 인증되지 않거나 권한이 부여되지 않은 웹 API 요청
프록시 서버 및 부하 분산 장치에서 작동하도록 ASP.NET Core 구성: 다음 지침이 포함되어 있습니다.
- 전달된 헤더 미들웨어를 사용하여 프록시 서버와 내부 네트워크에서 HTTPS 체계 정보 유지.
- 수동 체계 구성, 올바른 요청 라우팅에 대한 요청 경로 변경, Linux 및 비 IIS 역방향 프록시에 대한 요청 체계 전달을 포함한 추가 시나리오 및 사용 사례.

피드백

이 페이지가 도움이 되었나요?

Last updated on 2025-11-11

다음을 통해 공유

인증 라이브러리를 사용하여 ASP.NET Core Blazor WebAssembly 독립 실행형 앱 보호

Walkthrough

앱 등록

Blazor 앱 만들기

앱 구성

앱 실행

앱의 일부

인증 패키지

인증 서비스 지원

wwwroot/appsettings.json 구성

액세스 토큰 범위

파일 가져오기

인덱스 페이지

앱 구성 요소

RedirectToLogin 구성 요소

LoginDisplay 구성 요소

인증 구성 요소

Troubleshoot

Logging

일반 오류

쿠키 및 사이트 데이터

앱 업그레이드

앱 Server 실행

사용자를 검사하다

JWT(JSON Web Token)의 콘텐츠 검사

추가 리소스

피드백

추가 리소스

`wwwroot/appsettings.json` 구성

앱 `Server` 실행