ASP.NET Core Blazor WebAssembly 를 사용하여 ASP.NET Core 보호 Identity

독립 실행형 Blazor WebAssembly 앱은 이 문서의 지침에 따라 ASP.NET Core Identity 로 보호될 수 있습니다.

등록, 로그인 및 로그아웃을 위한 엔드포인트

pages를 기반으로 Razor 하는 spa 및 Blazor 앱용 ASP.NET Core Identity 에서 제공하는 기본 UI를 사용하는 대신 백 엔드 API를 호출 MapIdentityApi 하여 ASP.NET CoreIdentity를 사용하여 사용자를 등록하고 로그인하기 위한 ON API 엔드포인트를 추가JS합니다. Identity API 엔드포인트는 2단계 인증 및 전자 메일 확인과 같은 고급 기능도 지원합니다.

클라이언트에서 엔드포인트를 /register 호출하여 전자 메일 주소 및 암호를 사용하여 사용자를 등록합니다.

var result = await _httpClient.PostAsJsonAsync(
    "register", new
    {
        email,
        password
    });

클라이언트에서 쿼리 문자열이 다음으로 cookie 설정된 엔드포인트를 /login 사용하여 인증을 사용하여 사용자에 useCookies 로그인합니다 true.

var result = await _httpClient.PostAsJsonAsync(
    "login?useCookies=true", new
    {
        email,
        password
    });

백 엔드 서버 API는 인증 작성기에서 호출을 사용하여 AddIdentityCookies 인증을 설정합니다cookie.

builder.Services
    .AddAuthentication(IdentityConstants.ApplicationScheme)
    .AddIdentityCookies();

토큰 인증

일부 클라이언트가 지원하지 cookie않는 네이티브 및 모바일 시나리오의 경우 로그인 API는 토큰을 요청하는 매개 변수를 제공합니다. 후속 요청을 인증하는 데 사용할 수 있는 사용자 지정 토큰(ASP.NET Core Identity 플랫폼에 소유하는 토큰)이 발급됩니다. 토큰은 헤더에 Authorization 전달자 토큰으로 전달되어야 합니다. 새로 고침 토큰도 제공됩니다. 이 토큰을 사용하면 사용자가 다시 로그인하도록 강제하지 않고 이전 토큰이 만료되면 앱에서 새 토큰을 요청할 수 있습니다.

토큰은 표준 JSON 웹 토큰(JWT)이 아닙니다. 기본 제공 Identity API는 주로 간단한 시나리오를 위한 것이므로 사용자 지정 토큰의 사용은 의도적입니다. 토큰 옵션은 완전한 기능을 갖춘 ID 서비스 공급자 또는 토큰 서버가 아니라 사용할 cookie수 없는 클라이언트에 대한 옵션의 대안 cookie 입니다.

다음 지침은 로그인 API를 사용하여 토큰 기반 인증을 구현하는 프로세스를 시작합니다. 구현을 완료하려면 사용자 지정 코드가 필요합니다. 자세한 내용은 SPA에 대한 Web API 백 엔드 보안을 위한 사용을 Identity 참조하세요.

서버 API는 인증 작성기에서 호출을 사용하여 인증을 cookieAddIdentityCookies 설정하는 백 엔드 서버 API 대신 확장 메서드를 사용하여 전달자 토큰 인증을 AddBearerToken 설정합니다. 를 사용하여 전달자 인증 토큰에 대한 체계를 지정합니다 IdentityConstants.BearerScheme.

에서 Backend/Program.cs인증 서비스 및 구성을 다음으로 변경합니다.

builder.Services
    .AddAuthentication()
    .AddBearerToken(IdentityConstants.BearerScheme);

에서 BlazorWasmAuth/Identity/CookieAuthenticationStateProvider.cs다음 메서드에서 useCookies 쿼리 문자열 매개 변수를 LoginAsync 제거합니다 CookieAuthenticationStateProvider.

- login?useCookies=true
+ login

이 시점에서 클라이언트에서 구문 분석 AccessTokenResponse 하고 액세스 및 새로 고침 토큰을 관리하는 사용자 지정 코드를 제공해야 합니다. 자세한 내용은 SPA에 대한 Web API 백 엔드 보안을 위한 사용을 Identity 참조하세요.

추가 Identity 시나리오

API에서 제공하는 추가 Identity 시나리오는 SPA에 대한 Web API 백 엔드를 보호하는 데 사용Identity:

  • 선택한 엔드포인트 보안
  • 토큰 인증
  • 2FA(2단계 인증)
  • 복구 코드
  • 사용자 정보 관리

샘플 앱

이 문서에서 샘플 앱은 백 엔드 웹 API를 통해 ASP.NET Core Identity 에 액세스하는 독립 실행형 Blazor WebAssembly 앱에 대한 참조 역할을 합니다. 데모에는 다음 두 개의 앱이 포함됩니다.

  • Backend: ASP.NET CoreIdentity에 대한 사용자 ID 저장소를 기본 백 엔드 웹 API 앱입니다.
  • BlazorWasmAuth: 사용자 인증을 사용하는 독립 실행형 Blazor WebAssembly 프런트 엔드 앱입니다.

다음 링크를 사용하여 리포지토리 루트의 최신 버전 폴더를 통해 샘플 앱에 액세스합니다. 샘플은 .NET 8 이상에 대해 제공됩니다. README 샘플 앱을 실행하는 방법에 대한 단계는 폴더의 파일을 BlazorWebAssemblyStandaloneWithIdentity 참조하세요.

샘플 코드 보기 및 다운로드(다운로드 방법)

백 엔드 웹 API 앱 패키지 및 코드

백 엔드 웹 API 앱은 ASP.NET CoreIdentity에 대한 사용자 ID 저장소를 기본.

패키지

앱은 다음 NuGet 패키지를 사용합니다.

앱이 메모리 내 공급자와 다른 EF Core 데이터베이스 공급자를 사용하는 경우 앱 Microsoft.EntityFrameworkCore.InMemory에서 패키지 참조를 만들지 마세요.

앱의 프로젝트 파일(.csproj) 에서 고정 세계화 가 구성됩니다.

샘플 앱 코드

앱 설정 은 백 엔드 및 프런트 엔드 URL을 구성합니다.

  • Backend 앱(BackendUrl): https://localhost:7211
  • BlazorWasmAuth 앱(FrontendUrl): https://localhost:7171

이 파일Backend.http 날씨 데이터 요청을 테스트하는 데 사용할 수 있습니다. 엔드포인트를 BlazorWasmAuth 테스트하려면 앱을 실행해야 하며 엔드포인트는 파일로 하드 코딩됩니다. 자세한 내용은 Visual Studio 2022에서 .http 파일 사용을 참조 하세요.

앱의 파일에서 다음 설정 및 구성을 Program 찾을 수 있습니다.

인증을 사용하는 cookie 사용자 ID는 호출 AddAuthenticationAddIdentityCookies.을 통해 추가됩니다. 권한 부여 검사 대한 서비스는 호출에 AddAuthorizationBuilder의해 추가됩니다.

데모에만 권장되는 앱은 데이터베이스 컨텍스트 등록()에 메모리 내 데이터베이스 공급자를 사용합니다EF Core.AddDbContext 메모리 내 데이터베이스 공급자를 사용하면 앱을 쉽게 다시 시작하고 등록 및 로그인 사용자 흐름을 테스트할 수 있습니다. 각 실행은 새 데이터베이스로 시작하지만 이 문서의 뒷부분에 설명된 테스트 사용자 시드 데모 코드가 앱에 포함됩니다. 데이터베이스가 SQLite로 변경되면 사용자는 세션 간에 저장되지만 시작 자습서와 같이 마이그레이션을 통해 데이터베이스를 EF Core 만들어야 합니다. 프로덕션 코드에 SQL Server와 같은 다른 관계형 공급자를 사용할 수 있습니다.

데이터베이스를 EF Core 사용하고 , AddEntityFrameworkStoresAddApiEndpoints.에 대한 호출을 통해 엔드포인트를 노출 Identity 하도록 AddIdentityCore구성 Identity 합니다.

프런트 엔드 및 백 엔드 앱의 요청을 허용하도록 CORS(원본 간 리소스 공유) 정책이 설정됩니다. 대체 URL은 앱 설정에서 제공하지 않는 경우 CORS 정책에 대해 구성됩니다.

  • Backend 앱(BackendUrl): https://localhost:5001
  • BlazorWasmAuth 앱(FrontendUrl): https://localhost:5002

Swagger/OpenAPI에 대한 서비스 및 엔드포인트는 웹 API 설명서 및 개발 테스트에 포함됩니다. NSwag에 대한 자세한 내용은 NSwag 및 ASP.NET Core 시작하기를 참조하세요.

사용자 역할 클레임은 엔드포인트의 최소 API 에서 /roles 전송됩니다.

경로를 호출MapIdentityApi<AppUser>()하여 엔드포인트에 Identity 매핑됩니다.

사용자를 로그아웃하도록 미들웨어 파이프라인에 로그아웃 엔드포인트(/Logout)가 구성됩니다.

엔드포인트를 보호하려면 경로 정의에 RequireAuthorization 확장 메서드를 추가합니다. 컨트롤러의 경우 컨트롤러 또는 작업에 특성을 추가 [Authorize] 합니다.

인스턴스의 초기화 및 구성에 대한 기본 패턴에 대한 자세한 내용은 설명서의 DbContext DbContext 수명, 구성 및 초기화를EF Core 참조하세요.

프런트 엔드 독립 실행형 Blazor WebAssembly 앱 패키지 및 코드

독립 실행형 Blazor WebAssembly 프런트 엔드 앱은 개인 웹 페이지에 액세스하기 위한 사용자 인증 및 권한 부여를 보여 줍니다.

패키지

앱은 다음 NuGet 패키지를 사용합니다.

샘플 앱 코드

폴더에는 Models 앱의 모델이 포함됩니다.

인터페이스(Identity/CookieHandler.cs)IAccountManagement 계정 관리 서비스를 제공합니다.

클래스()는 -based authentication에 대한 cookie상태를 처리하고 인터페이스에서 설명하는 계정 관리 서비스 구현을 IAccountManagement 제공합니다.CookieAuthenticationStateProviderIdentity/CookieAuthenticationStateProvider.cs 이 메서드는 LoginAsync 쿼리 문자열 값을 true통해 명시적으로 인증을 useCookies 사용하도록 설정합니다cookie. 또한 클래스는 인증된 사용자에 대한 역할 클레임 만들기를 관리합니다.

클래스()는 각 요청과 함께 데이터 저장소를 처리 Identity 하고 기본 백 엔드 웹 API로 자격 증명이 Identity 전송되도록 cookie 합니다.CookieHandlerIdentity/CookieHandler.cs

wwwroot/appsettings.file 엔드 및 프런트 엔드 URL 엔드포인트를 제공합니다.

App 구성 요소는 인증 상태를 연계 매개 변수로 노출합니다. 자세한 내용은 ASP.NET Core Blazor 인증 및 권한 부여를 참조하세요.

MainLayout 구성 요소NavMenu 구성 요소는 구성 요소를 사용하여 AuthorizeView 사용자의 인증 상태 따라 콘텐츠를 선택적으로 표시합니다.

다음 구성 요소는 일반적인 사용자 인증 작업을 처리하여 서비스를 사용합니다 IAccountManagement .

구성 요소(Components/Pages/PrivatePage.razor)에는 PrivatePage 인증이 필요하고 사용자의 클레임이 표시됩니다.

서비스 및 구성은 파일(Program.cs)Program 제공됩니다.

  • cookie 처리기는 범위가 지정된 서비스로 등록됩니다.
  • 권한 부여 서비스가 등록됩니다.
  • 사용자 지정 인증 상태 공급자는 범위가 지정된 서비스로 등록됩니다.
  • 계정 관리 인터페이스(IAccountManagement)가 등록됩니다.
  • 기본 호스트 URL은 등록된 HTTP 클라이언트 인스턴스에 대해 구성됩니다.
  • 기본 백 엔드 URL은 백 엔드 웹 API와의 인증 상호 작용에 사용되는 등록된 HTTP 클라이언트 인스턴스에 대해 구성됩니다. HTTP 클라이언트는 처리기를 cookie 사용하여 각 요청과 함께 자격 증명이 cookie 전송되도록 합니다.

사용자의 인증 상태가 변경되면 호출 AuthenticationStateProvider.NotifyAuthenticationStateChanged 합니다. 예를 들어 클래스(LoginAsyncIdentity/CookieAuthenticationStateProvider.cs)의 메서드와 LogoutAsync 메서드를 CookieAuthenticationStateProvider 참조하세요.

Warning

AuthorizeView 구성 요소는 사용자에게 권한이 있는지에 따라 선택적으로 UI 콘텐츠를 표시합니다. 구성 요소에 AuthorizeView 배치된 앱 내 Blazor WebAssembly 의 모든 콘텐츠는 인증 없이 검색할 수 있으므로 인증에 성공한 후 백 엔드 서버 기반 웹 API에서 중요한 콘텐츠를 가져와야 합니다. 자세한 내용은 다음 리소스를 참조하세요.

테스트 사용자 시드 데모

클래스(SeedData.cs)는 SeedData 개발을 위한 테스트 사용자를 만드는 방법을 보여 줍니다. Leela라는 테스트 사용자가 이메일 주소를 leela@contoso.com사용하여 앱에 로그인합니다. 사용자의 암호가 .로 설정됩니다 Passw0rd!. Leela가 부여 Administrator 되고 Manager 권한 부여에 대한 역할이 부여되므로 사용자는 편집기 페이지가 아닌 관리자 페이지에 /private-manager-page 액세스할 수 있습니다 /private-editor-page.

Warning

테스트 사용자 코드가 프로덕션 환경에서 실행되도록 허용하지 않습니다. SeedData.InitializeAsync 는 파일의 Development 환경에서만 호출됩니다 Program .

if (builder.Environment.IsDevelopment())
{
    await using var scope = app.Services.CreateAsyncScope();
    await SeedData.InitializeAsync(scope.ServiceProvider);
}

Roles

프레임워크 디자인 문제(dotnet/aspnetcore#50037)로 인해 역할 클레임은 앱 사용자 BlazorWasmAuth 에 대한 사용자 클레임을 만들기 위해 엔드포인트에서 manage/info 다시 전송되지 않습니다. 역할 클레임은 사용자가 프로젝트에서 인증된 후 클래스(Identity/CookieAuthenticationStateProvider.cs)CookieAuthenticationStateProvider 메서드에서 BackendGetAuthenticationStateAsync 별도의 요청을 통해 독립적으로 관리됩니다.

CookieAuthenticationStateProvider서버 API 프로젝트의 엔드포인트에 /roles 대한 역할 요청이 Backend 수행됩니다. 응답을 호출 ReadAsStringAsync()하여 문자열로 읽습니다. JsonSerializer.Deserialize 문자열을 사용자 지정 RoleClaim 배열로 역직렬화합니다. 마지막으로 클레임이 사용자의 클레임 컬렉션에 추가됩니다.

Backend 서버 API의 Program 파일에서 최소 API는 엔드포인트를 /roles 관리합니다. 클레임 RoleClaimType 은 익명 형식으로 선택되고 프로젝트TypedResults.Json로 돌아가기 BlazorWasmAuth 위해 serialize됩니다.

역할 엔드포인트는 .를 호출 RequireAuthorization하여 권한 부여가 필요합니다. 보안 서버 API 엔드포인트에 대해 컨트롤러를 위해 최소 API를 사용하지 않기로 결정한 경우 컨트롤러 또는 작업에 특성을 설정 [Authorize] 해야 합니다.

상호 기본 호스팅(동일한 사이트 구성)

샘플 앱은 두 앱을 동시에 호스팅하도록 구성됩니다기본. 앱과 Backend 다른 기본 BlazorWasmAuth 앱을 호스트하는 경우 앱 파일에서 Backend (ConfigureApplicationCookie)를 구성하는 코드의 Program 주석 처리를 제거합니다 cookie . 기본값은 다음과 같습니다.

값을 다음과 같이 변경합니다.

- options.Cookie.SameSite = SameSiteMode.Lax;
- options.Cookie.SecurePolicy = CookieSecurePolicy.SameAsRequest;
+ options.Cookie.SameSite = SameSiteMode.None;
+ options.Cookie.SecurePolicy = CookieSecurePolicy.Always;

동일한 사이트 cookie 설정에 대한 자세한 내용은 다음 리소스를 참조하세요.

위조 방지 지원

앱의 로그아웃 엔드포인트(/logout)Backend만 CSRF(교차 사이트 요청 위조)위협을 완화하기 위해 주의해야 합니다.

로그아웃 엔드포인트는 CSRF 공격을 방지하기 위해 빈 본문에 대한 검사. 본문을 요구하면 인증 cookie에 액세스할 수 있는 유일한 방법인 JavaScript에서 요청을 수행해야 합니다. 로그아웃 엔드포인트는 양식 기반 POST에서 액세스할 수 없습니다. 이렇게 하면 악의적인 사이트에서 사용자를 로그아웃할 수 없습니다.

또한 엔드포인트는 익명 액세스를 방지하기 위해 권한 부여(RequireAuthorization)로 보호됩니다.

BlazorWasmAuth 클라이언트 앱은 요청 본문에 빈 개체 {} 를 전달하기만 하면 됩니다.

로그아웃 엔드포인트 외부에서는 양식 데이터를 로 인코딩application/x-www-form-urlencodedmultipart/form-datatext/plain된 서버에 제출할 때만 위조 방지 완화가 필요합니다. Blazor 는 대부분의 경우 양식에 대한 CSRF 완화를 관리합니다. 자세한 내용은 ASP.NET Core Blazor 인증 및 권한 부여ASP.NET Core Blazor 양식 개요를 참조하세요.

인코딩된 콘텐츠 및 CORS를 사용하도록 설정된 다른 서버 API 엔드포인트(웹 API)application/json에 대한 요청은 CSRF 보호가 필요하지 않습니다. 따라서 앱의 데이터 처리() 엔드포인트에 Backend CSRF 보호가/data-processing 필요하지 않습니다. 역할(/roles) 엔드포인트는 상태를 수정하지 않는 GET 엔드포인트이므로 CSRF 보호가 필요하지 않습니다.

문제 해결

로깅

인증에 디버그 또는 추적 로깅을 Blazor WebAssembly 사용하도록 설정하려면 ASP.NET Core Blazor 로깅을 참조하세요.

일반 오류

각 프로젝트의 구성을 확인합니다. URL이 올바른지 확인합니다.

  • Backend 프로젝트
    • appsettings.json
      • BackendUrl
      • FrontendUrl
    • Backend.http: Backend_HostAddress
  • BlazorWasmAuth 프로젝트: wwwroot/appsettings.json
    • BackendUrl
    • FrontendUrl

구성이 올바르게 표시되면 다음을 수행합니다.

  • 애플리케이션 로그를 분석합니다.

  • 브라우저의 개발자 도구를 사용하여 BlazorWasmAuth 앱과 Backend 앱 간의 네트워크 트래픽을 검사합니다. 종종 정확한 오류 메시지 또는 문제의 원인에 대한 단서가 있는 메시지는 요청을 수행한 후 백 엔드 앱에 의해 클라이언트로 반환됩니다. 개발자 도구 지침은 다음 문서에서 확인할 수 있습니다.

  • Google Chrome(Google 설명서)

  • Microsoft Edge

  • Mozilla Firefox(Mozilla 설명서)

설명서 팀은 문서의 문서 피드백 및 버그에 응답합니다. 문서 맨 아래에 있는 설명서 열기 문제 링크를 사용하여 문제를 엽니다. 팀은 제품 지원을 제공할 수 없습니다. 앱 문제 해결을 지원하기 위해 몇 가지 퍼블릭 지원 포럼을 사용할 수 있습니다. 다음을 권장합니다.

이전 포럼은 Microsoft에서 소유하거나 제어하지 않습니다.

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

Cookie 및 사이트 데이터

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

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

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

  • 브라우저 구성
    • 브라우저에서 브라우저를 닫을 때마다 모든 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
      • Mozilla Firefox: C:\Program Files\Mozilla Firefox\firefox.exe
    • 인수 필드에서 브라우저가 InPrivate 또는 Incognito 모드에서 여는 데 사용하는 명령줄 옵션을 제공합니다. 일부 브라우저에는 앱의 URL이 필요합니다.
      • Microsoft Edge: 사용 -inprivate.
      • Google Chrome: 자리 표시자가 {URL} 열 URL인 경우(예https://localhost:5001: )를 사용합니다--incognito --new-window {URL}.
      • Mozilla Firefox: 자리 표시자가 {URL} 열 URL인 경우(예https://localhost:5001: )를 사용합니다-private -url {URL}.
    • 이름 필드에 이름을 입력합니다. 예들 들어 Firefox Auth Testing입니다.
    • 확인 단추를 선택합니다.
    • 앱 테스트를 반복할 때마다 브라우저 프로필을 선택할 필요가 없도록 하려면 기본값으로 설정 단추를 사용하여 프로필을 기본값으로 설정합니다.
    • 앱, 테스트 사용자 또는 공급자 구성을 변경할 때 IDE를 통해 브라우저를 닫습니다.

앱 업그레이드

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

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

참고 항목

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

사용자의 클레임 검사

사용자 클레임 문제를 해결하기 위해 다음 UserClaims 구성 요소를 앱에서 직접 사용하거나 추가 사용자 지정의 기초로 사용할 수 있습니다.

UserClaims.razor:

@page "/user-claims"
@using System.Security.Claims
@attribute [Authorize]

<PageTitle>User Claims</PageTitle>

<h1>User Claims</h1>

**Name**: @AuthenticatedUser?.Identity?.Name

<h2>Claims</h2>

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

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

    public ClaimsPrincipal? AuthenticatedUser { get; set; }

    protected override async Task OnInitializedAsync()
    {
        if (AuthenticationState is not null)
        {
            var state = await AuthenticationState;
            AuthenticatedUser = state.User;
        }
    }
}

추가 리소스