[Azure] Microsoft Entra ID로 기업용 인증 기능을 구현해보자 2편 (feat Blazor)

연달아서 글쓴다.

 

아마 그룹 관련 내용까지 포스팅 하면 3편까지 가야할 것 같은데 일단 진행해보자.

 

일단 이전 글을 안읽고 온 사람은 읽고 오도록 하자.

2024.02.10 - [클라우드 컴퓨팅] - [Azure] Microsoft Entra ID로 기업용 인증 기능을 구현해보자 1편 (feat Blazor)

[Azure] Microsoft Entra ID로 기업용 인증 기능을 구현해보자 1편 (feat Blazor)

 

 

이제 App.razor 파일로 들어간 다음에 아래와 같이 내용을 수정하자

아 물론 이미 진행되고 있는 프로젝트라면 해당 내용을 잘 보고 수정 하면 된다.

핵심은 CascadingAuthenticationState 태그와 AuthorizeRouteView 태그 그리고 NotAuthorized 태그다.

@inject NavigationManager Navigation

<CascadingAuthenticationState>
    <Router AppAssembly="@typeof(App).Assembly">
        <Found Context="routeData">
            <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
                <NotAuthorized>
                    @if (context.User.Identity.IsAuthenticated)
                    {
                        <p>You were authorized to access this resource.</p>
                    }
                    else
                    {
                        Navigation.NavigateTo("authentication/login");
                    })
                </NotAuthorized>
            </AuthorizeRouteView>
            <FocusOnNavigate RouteData="@routeData" Selector="h1" />
        </Found>
        <NotFound>
            <PageTitle>Not found</PageTitle>
            <LayoutView Layout="@typeof(MainLayout)">
                <p role="alert">Sorry, there's nothing at this address.</p>
            </LayoutView>
        </NotFound>
    </Router>
</CascadingAuthenticationState>

 

 

 

위 코드는 그냥 인증되지 않은 상태라면 해당 경로로 인증 하러 가라는 의미다

 

이제 인증 기능을 만들러 가보자.

Pages 폴더에 Authentication.razor 파일을 만들고 아래 내용을 작성하자.

 

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

<RemoteAuthenticatorView Action="@Action" />

<h3>Authentication</h3>

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

}

 

 

 

마지막이다. 이제 로그인 로그아웃 링크만 만들어주면 된다.

MainLayout.razor 파일로 이동해서 아래처럼 작성해주면 된다.

여기서도 핵심은 AuthorizeView 태그에서 인증된 상태일때는 Logout 을 위한 버튼과 링크를 넣어주고,

인증되지 않은 상태일 때는 Login을 위한 버튼과 링크를 넣어주는 것 뿐이다.

 

@inherits LayoutComponentBase
@inject NavigationManager Navigation

<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <main>
        <div class="top-row px-4">
            <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
        </div>
        <AuthorizeView>
            <Authorized>
                <button @onclick="LogOut"> Log Out</button>
            </Authorized>
            <NotAuthorized>
                <a href="authentication/login">Log in</a>
            </NotAuthorized>
        </AuthorizeView>

        <article class="content px-4">
            @Body
        </article>
    </main>
</div>

@code
{
    void LogOut() => Navigation.NavigateToLogout("authentication/logout", "/");
}

 

 

 

자 이제 드디어 끝났다. F5 눌러서 실행해보자.

그러면 아래처럼 인터넷창이 나올텐데 로그인 링크를 눌러주자.

로그인 링크가 위치가 조금 이상한데 별로 중요한건 아니니까 일단 기능 확인을 해보자.

 

 

 

 

그러면 이렇게 우리가 흔히 보던 마이크로소프트 계정 로그인 창이 뜬다.

필자는 이미 로그인을 한 이력이 있기 때문에 최초 로그인 시도시에는 나타나는 창이 필자랑 조금 다를 수도 있는데,

그냥 하라는대로 진행하면 된다.

 

 

 

 

Github 계정으로 로그인 할 수 있는 기능도 지원하고 의심스러운 사용자가 로그인 했다고 판단이 들면 핸드폰문자나, 이메일로 추가 인증 기능 역시 전부 지원한다.

우리가 따로 추가적으로 구현해야 할 것은 아무것도 없다 그냥 지원해주는 기능 그대로 쓰면 된다.

 

옛날 같으면 위와 같은 기능을 구현하려면 몇날 몇일을 쌩고생을 했어야 할텐데, 이제는 설정이랑 몇 가지 코드만 갖다붙이면 마이크로소프트와 같은 글로벌 킹갓제네럴엠페러충무공마제스티 대기업에서나 사용할 수 있는 완성도의 인증 기능을 사용할 수 있는 세상이다.

 

Azure에서 로그인한 사용자 리스트도 확인할 수 있는데 아래처럼 하면 된다.

검색창에서 Entra ID로 이동한다.

 

 

 

 

그 담에 좌측 메뉴를 내려보면 로그인 로그가 있는데 해당 메뉴로 이동한다.

 

 

 

 

그러면 아래 이미지처럼 이제까지 해당 애플리케이션에 로그인 한 사용자 목록이 나타난다.

리스트에서 아이템 한개를 클릭해보면 상세 내역도 볼수 있으니 로그인 내역 상세 확인도 가능하다.

 

 

 

 

자 이제 인증이 된 사용자만 Weather 페이지에 접근할 수 있게 해보자.

Weather.razor 파일에 접근한 다음 아래 attribute를 추가해주면 된다.

 

 

 

 

작성하고 실행해보면 Weather 페이지에 접근 할 경우 인증 페이지로 이동하는 것을 볼 수 있다.

 

 

 

# Microsoft Entra ID 기능이 통합된 Blazor WASM 템플릿 만들기

지금까지는 이미 생성된 프로젝트에 Microsoft Entra ID 기능을 추가한 것이고, 지금부터 설명할 내용은 Microsoft Entra ID를 추가해서 Blazor WASM 프로젝트를 생성하는 기능이다.

이건 너무 간단한데, 그냥 닷넷 콘솔 명령어로 만들면 된다.

 

우선 1편 글에서 Azure 설정은 모두 끝내야 하고 설정이 끝난 후에 테넌트 id, 클라이언트 id가 필요하다.

확보했으면 명령 프롬프트를 실행시키고, 프로젝트를 만들 경로로 이동하자.

필자의 경우는 아래처럼 이동했다.

 

 

이동했으면 아래의 명령을 입력하면 된다.

dotnet new blazorwasm -au SingleOrg -o <프로젝트 이름> --client-id "<클라이언트 id>" --tenant-id "<테넌트 id>"

 

 

<> 사이에 있는 부분은 직접 넣어줘야 한다. 예를 들어

프로젝트 이름: TestProject

클라이언트 id: abcd-afsdf-efasdfe

테넌트 id: asdfqw-fsfew-fasdfaswef-fasdf

 

라면 아래처럼 입력해주면 된다.

dotnet new blazorwasm -au SingleOrg -o TestProject --client-id "abcd-afsdf-efasdfe" --tenant-id "asdfqw-fsfew-fasdfaswef-fasdf"

 

 

 

실행해보면 프로젝트가 생성된 것을 볼 수 있을 거다.

프로젝트로 들어가서 실행해보면 아래처럼 인증 기능이 포함된 템플릿이 실행되는 것을 확인할 수 있다.

 

 

 

 

 

이제 다음 챕터에서는 그룹 기능을 추가하고 사용해보도록 하자.

 

 

 

 

 

끗