Blazor는 웹 애플리케이션을 구축하기 위한 Microsoft의 오픈 소스 웹 프레임워크이며, Identity는 ASP.NET Core에서 제공하는 사용자 인증 및 권한 부여 프레임워크입니다. Blazor Identity를 사용하면 사용자 인증 및 권한 관리를 손쉽게 구현할 수 있습니다.
프로젝트 시작하기
간단하게 Identity 가 포함된 프로젝트를 만드는 방법은 이전 글에서 다루었습니다.
아래 글을 참조 하시면 아주 간단히 프로젝트가 생성됩니다.
이제 이 글을 기준으로 Role 에 대해 설명드리도록 하겠습니다.
위 프로젝트를 만들면 기본적으로 다음과 같은 테이블이 생성됩니다.
Blazor 애플리케이션에서 이러한 7개의 테이블을 모두 사용하지는 않습니다. 사용자 정보를 저장하기 위해 “AspNetUsers” 테이블을 사용합니다. 역할 정보를 저장하기 위해 “AspNetRoles” 테이블을 사용합니다. 또한 “AspNetUserRoles” 테이블을 사용하여 사용자에 대한 역할 세부 정보를 저장합니다.
역할 구성하기
우리는 이번 시간에 이미 등록되어 있는 유저를 DB 를 직접 수정함으로써 역할을 분담해 보도록 할 것입니다.
그리고 그 역할에 따라 화면이 달라지는 구조의 프로그램을 간단히 구성하도록 하겠습니다.
먼저 이전 시간에 만들었던 기본 구조의 프로젝트에서 2명의 유저를 등록 하도록 하겠습니다. 저는 admin@harostudio.co.kr , blazor@harostudio.co.kr 이렇게 두명의 유저를 등록하였습니다.
그리고 각각 admin@harostudio.cokr 은 admin 역할을 blazor@harostudio.co.kr 은 normal 역할을 부여하도록 하겠습니다.
역할을 다음처럼 DB 에 직접 구성하도록 하겠습니다.
“AspNetRoles” 테이블에 admin 과 normal 을 추가합니다.
이제 각 2명의 유저를 역할 분담하기 위해 각각 역할을 구성합니다.
“AspNetUsers” 테이블에는 이미 추가한 유저들이 보입니다. 각각의 id 를 복사합니다.
“AspNetUserRoles” 테이블 에 역할을 기술합니다.
UserId란에 복사한 id를 붙여넣고 RoleID 에 “AspNetRoles” 에 추가한 역할 id를 기술합니다.
이제 모든 유저의 역할이 할당 되었습니다.
역할 기반 화면 구성하기 1
먼저 출력물부터 보여드리도록 하겠습니다.
로그인 없이 일반 유저일경우 다음 화면이 보이도록 수정 할 것입니다.
admin@harostudio.co.kr 로 로그인 하면 다음화면과 같이 보입니다.
이제 blazor@harostudio.co.kr 으로 로그인하면 다음 화면처럼 보입니다.
- 역할 베이스 소스코드 수정
Program.cs 파일에서 다음 코드를 찾아 추가를 합니다.
builder.Services.AddDefaultIdentity(options => options.SignIn.RequireConfirmedAccount = true)
이 구문이 보이면 밑에 .AddRoles<IdentityRole>() 을 추가 합니다.
var connectionString = builder.Configuration.GetConnectionString("DefaultConnection") ?? throw new InvalidOperationException("Connection string 'DefaultConnection' not found.");
builder.Services.AddDbContext<ApplicationDbContext>(options =>
options.UseSqlServer(connectionString));
builder.Services.AddDatabaseDeveloperPageExceptionFilter();
builder.Services.AddDefaultIdentity<IdentityUser>(options => options.SignIn.RequireConfirmedAccount = true)
.AddRoles<IdentityRole>() // 이 구문을 추가합니다.
.AddEntityFrameworkStores<ApplicationDbContext>();
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
builder.Services.AddScoped<AuthenticationStateProvider, RevalidatingIdentityAuthenticationStateProvider<IdentityUser>>();
builder.Services.AddSingleton<WeatherForecastService>();
이제 index.razor 화면을 다음과 같이 수정합니다.
@page "/"
<PageTitle>Index</PageTitle>
<AuthorizeView Roles="Admin">
<h1>안녕하세요 관리자님!</h1>
</AuthorizeView>
<AuthorizeView Roles="Normal">
<h1>안녕하세요 유저님!</h1>
</AuthorizeView>
<AuthorizeView >
<NotAuthorized>
<h1>안녕하세요 비회원님!</h1>
</NotAuthorized>
</AuthorizeView>
<AuthorizeView Roles="Admin, Normal">
Welcome to your new app.
</AuthorizeView>
<SurveyPrompt Title="How is Blazor working for you?" />
<AuthorizeView Roles=”Admin”>
이 코드는 Admin 일경우에만 적용 됩니다. 마찬가지로 다른 역할에 따라 각각 화면이 바뀌게 됩니다. 이 기법을 적용하면 유저의 역할에 따라 다르게 동작하는 화면을 만들 수 있습니다.
역할 기반 화면 구성하기 2
이제 페이지 전체에 역할을 적용해 보도록 하겠습니다.
NavMenu.razor 에 Fetch data 아이템 밑에 다음 코드를 추가 해 Admin 일 경우 메뉴를 하나 추가 하도록 하겠습니다.
<div class="@NavMenuCssClass nav-scrollable" @onclick="ToggleNavMenu">
<nav class="flex-column">
<div class="nav-item px-3">
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
<span class="oi oi-home" aria-hidden="true"></span> Home
</NavLink>
</div>
<div class="nav-item px-3">
<NavLink class="nav-link" href="counter">
<span class="oi oi-plus" aria-hidden="true"></span> Counter
</NavLink>
</div>
<div class="nav-item px-3">
<NavLink class="nav-link" href="fetchdata">
<span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
</NavLink>
</div>
<AuthorizeView Roles="Admin">
<div class="nav-item px-3">
<NavLink class="nav-link" href="admin">
<span class="oi oi-list-rich" aria-hidden="true"></span> Admin Component
</NavLink>
</div>
</AuthorizeView>
</nav>
</div>
이제 메뉴를 클릭하면 나오는 화면인 admin 페이지를 만들어 보도록 하겠습니다.
다음처럼 페이지 트리에서 화면을 추가 하겠습니다.
위 사항처럼 Pages->추가->Razor 구성요소를 선택하고 admin.razor 화면을 추가합니다.
추가된 razor 화면에 다음처럼 타이핑을 합니다.
중요한 키워드는 다음입니다. Authorize 속성입니다.
[Authorize] 특성은 역할 기반 또는 정책 기반 권한 부여도 지원합니다. 역할 기반 권한 부여의 경우 Roles 매개 변수를 사용합니다. 아래 코드입니다.
@page "/admin"
@attribute [Authorize(Roles = "Admin")]
<h3>Admin Component</h3>
<p>관리자 역할 화면입니다. </p>
@code {
}
이제 페이지 구성이 되었으니 실행 시켜 보도록 하겠습니다.
Admin Component 메뉴가 추가되었고 클릭하면 Admin.razor 화면에 표시됩니다.
위 구문에 대한 좀더 자세한 내용은 다음 링크에서 확인 하실 수 있습니다.
결론
이 게시물에서는 개별 사용자 계정 인증을 사용하여 Blazor 애플리케이션을 만드는 방법을 살펴보았습니다. 이제 쉽게 등록 로그인을 하고 각 개별 역활에 따라 다른 화면을 구성 할 수 있습니다.
