[Programming][.NET][Blazor] Authentication 처리

순서

I. .razor에서의 권한 컨트롤 사용
II. 활용 목표 / 방법
III. AuthenticationStateProvider child class 구현
IV. 나머지 구현
V. StartUp시 서비스 추가

---

I. .razor에서의 권한 컨트롤 사용

 

특정 권한이 존재해야만 페이지를 보여주고 싶을때.

razor 파일에서는 <Authorized> <NotAuthorized> tag를 이용해 페이지를 컨트롤 할 수 있다.

* AspNetCore.Components.Authorization 패키지를 Nuget에서 다운 받아야 사용 가능하다.
아래는 .razor 파일이다.

내 권한에 대해 Role이 충족되어야 Authorized Page가 열린다.

 

---

II. 활용 목표, 방법

 

II.1. 목표
a) 처음 페이지 접근시 NotAuthorized Page
b) 이 상태에서 LogIn 창 발생 -> 올바른 로그인시 권한 부여

 

II.2. 방법
a) LogIn 창을 보여주는 CustomLogin.razor 구현
    -> Login 버튼을 누르면 AuthenticationStateProvider 클래스로 확인을 요청함.

b) 만약 로그인 성공시 CustomLogin.razor에서 EventCallback을 발생시킴
c) 해당 Callback은 NotAuthorized Page에서 받아 StateChanged를 실행시키며 페이지 리로드.

 

---

III. AuthenticationStateProvider child class 구현

 

AuthenticationStateProvider는 라이브러리에서 제공하는 인터페이스 클래스이고, 이를 상속받는
MyAuthenticationProvider class를 생성한다.

공식처럼 사용한다...

<hide/>
public class MyAuthenticationProvider : AuthenticationStateProvider
{
    private ClaimsPrincipal _anonymous = new ClaimsPrincipal(new ClaimsIdentity());

    public override Task<AuthenticationState> GetAuthenticationStateAsync()
    {
        return Task.FromResult(new AuthenticationState(_anonymous));
    }

    public Task MarkUserAsAuthenticated(string username)
    {
        // 내가 원하는대로 Role을 변경할 수 있음.
        // ClaimsIdentity (IEnumerable<T> claims, string authenticationtype)
        var identity = new ClaimsIdentity(new[]
        {
        new Claim(ClaimTypes.Name, username),
        new Claim(ClaimTypes.Role, "AdminAdmin")
        }, "MyAuthenticationProvider");

        var user = new ClaimsPrincipal(identity);

        NotifyAuthenticationStateChanged(Task.FromResult(new AuthenticationState(user)));
        return Task.CompletedTask;
    }

    public Task MarkUserAsLoggedOut()
    {
        NotifyAuthenticationStateChanged(Task.FromResult(new AuthenticationState(_anonymous)));
        return Task.CompletedTask;
    }
}

AdminAdmin과 MyAuthenticationProvider는 테스트용으로 그냥 해본 것.

권한 획득 시도시,
MarkUserAsAuthenticated를 호출하도록 한다. 단 Caller쪽에서 AuthenticationStateProvider를 inject 받는다.

 

---

IV. 나머지 구현.

 

1. LogIn Page + Login함수 구현.

<hide/>
@inject AuthenticationStateProvider authProvider
@* @inject MyAuthenticationProvider myAuthProvider 이렇게 하면 인식하지 못한다. System내부의 권한을 가져와야하기 때문.*@

<h3>CustomerLogin</h3>

@if (!IsAuthenticated)
{
	<div class="login-popup">

		<h3>Log in</h3>
		<input @bind="UserName" placeholder="ID" />
		<input @bind="Password" placeholder="password" />
		<button type="button" class="btn-primary" @onclick="Login">LogIn</button>

	</div>
}


@code {

	public string UserName { get; set; }
	public string Password { get; set; }
	private bool IsAuthenticated = false;

	[Parameter]
	public EventCallback OnLoginSuccess { get; set; }

	private async Task Login()
	{
		if (UserName == "aAdmin") {
			IsAuthenticated = true;
			await ((MyAuthenticationProvider)authProvider).MarkUserAsAuthenticated(UserName);
			// await myAuthProvider.MarkUserAsAuthenticated(UserName); 이렇게 하면 안된다. 권한 서비스에대해 Exception 발생.
			await OnLoginSuccess.InvokeAsync();
		}
	}

}

CustomLogin.razor

public EventCallback OnLoginSuccess는 다른 컴포넌트에서 CustomLogin.razor를 사용할때 행동을 지정하기 위해
[Parameter] attribute 추가.

---

2. Main page

<hide/>
<div>

	@* 내가 등록한 Roles가 아래 Roles에 맞아야 Page 출력 *@
	@* 등록한 Roles는 MyAuthenticationProvider 함수에서 정한다. *@
	<AuthorizeView Roles="myDefinedRole, Admin, AdminAdmin">
		<Authorized>
			<h3> This is Authorized Page </h3>
		</Authorized>

		<NotAuthorized>
			<h3> This is NotAuthorized Page </h3>
			<CustomerLogin OnLoginSuccess="HandleLoginSuccess" /> @* NotAuthorized때 Lonin Event발생시 Success 실행. *@
		</NotAuthorized>

	</AuthorizeView>

</div>

@code {

	private void HandleLoginSuccess()
	{
		// 로그인 성공 시 추가 처리 로직
		StateHasChanged(); // UI 갱신
	}
}

 

 

---

V. StartUp시 서비스 추가

- ConfigurationServices에 Service 추가

 

Page Load before login

ID가 aAdmin인 경우 권한을 주도록 임의로 해두었다. 중요하지 않음.

 

After login