패키지 설치

Blazor 프로젝트에 암호화와 인증을 위해 아래의 패키지들을 설치한다.

• Microsoft.AspNetCore.Components.Authorization
• System.IdentityModel.Tokens.Jwt
• BCrypt.Net-Next
• Blazored.SessionStorage

AuthenticationStateProvider 구성

Blazor 페이지에서 현재 사용자가 인증 상태에 따라 화면을 다르게 보여주기 위해 사용자가 인증 되었는지를 판별하는 태그로 <AuthorizeView>를 사용하는데, 이 태그를 사용하려면 AuthenticationStateProvider 클래스를 상속 받는 클래스를 구현해야 한다.

우선 Blazor 프로젝트에 아래의 클래스를 생성한다.

public class AuthStateProvider : AuthenticationStateProvider
{
    private readonly ISessionStorageService sessionStorage;

    public AuthStateProvider(ISessionStorageService sessionStorage)
    {
        this.sessionStorage = sessionStorage;
    }

		// 최로 로딩할 때 불리는 함수. session storage에 저장된 토큰이 있었으면 가져와서 인증한다.
    public override async Task<AuthenticationState> GetAuthenticationStateAsync()
    {
        var savedToken = await sessionStorage.GetItemAsync<string>("TokenAuth");

        ClaimsIdentity claimsIdentity = new ClaimsIdentity();

        if (!string.IsNullOrWhiteSpace(savedToken))
        {
            string token = new JwtSecurityTokenHandler().ReadJwtToken(savedToken).RawData;
            claimsIdentity = new ClaimsIdentity(token);
        }

        ClaimsPrincipal claimPrincipal = new ClaimsPrincipal(claimsIdentity);

        return await Task.FromResult(new AuthenticationState(claimPrincipal));
    }

		// 사용자 로그인이 성공했을 때 사용
    public void MarkUserAsAuthenticated(IEnumerable<Claim> claims)
    {
        ClaimsIdentity claimsIdentity = new ClaimsIdentity(claims: claims, authenticationType: "bearer");  // .NET 4.5 이후 생성자에 문자열 --아무 문자열이든 상관 없음-- 을 넣어줘야 IsAuthenticated가 true가 됨.
        ClaimsPrincipal claimPrincipal = new ClaimsPrincipal(claimsIdentity);

				// 인증 상태 변화를 알린다.
        NotifyAuthenticationStateChanged(Task.FromResult(new AuthenticationState(claimPrincipal)));
    }

		// 사용자가 로그아웃 했을 때 사용
    public void MarkUserAsLoggedOut()
    {
        ClaimsIdentity claimsIdentity = new ClaimsIdentity();
        ClaimsPrincipal claimPrincipal = new ClaimsPrincipal(claimsIdentity);

				// 인증 상태 변화를 알린다.
        NotifyAuthenticationStateChanged(Task.FromResult(new AuthenticationState(claimPrincipal)));
    }
}

이렇게 만든 클래스는 Program.cs에 등록해 줘야 한다. 인증 관련 내용을 추가하는 김에 SessionStorage를 사용하기 위한 것도 추가해 준다.

// AuthenticationStateProvider 클래스 추가
builder.Services.AddScoped<AuthenticationStateProvider, AuthStateProvider>();

// 권한 부여 관련 서비스 추가
builder.Services.AddOptions();
builder.Services.AddAuthorizationCore();

// blazor에서 seesion storage를 사용하기 위한 서비스 추가
builder.Services.AddBlazoredSessionStorage();

서비스 구성

다음으로 Blazor Client에서 Web API Server에 네트워크로 연결하기 위한 Service를 구성한다.

관례에 따라 Blazor 프로젝트에 Services 폴더를 만들고, 그 하위에 Contracts 폴더를 만든 후에 Contract 하위에는 IAuthService 인터페이스를 만들고, Services 하위에는 AuthService 클래스를 만든다.

IAuthService 인터페이스는 아래와 같이 구성한다.