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

그동안 업무가 바빠서 평소처럼 블로그에 소홀 했었는데, 이제 연휴라 귀차니즘을 이겨내고 글 한편 쓰기로 했다.

 

클라우드 시스템에서 인증 관련된 서비스를 제공해주는 거 알 거다.

Azure 역시 인증 관련된 기능을 매우 쉽게 구현할 수 있도록 서비스를 제공해주는데, 오늘은 이에 대해 자세히 알아보기로 하자.

 

우선 준비물은 아래와 같다

1. Visual Studio 2022

2. Azure 계정

 

Azure 계정이 없다면 하나 만들도록 하자. 필자의 관점으로는 앞으로 모든 시스템에 클라우드가 융합 될거니까

클라우드 계정 하나는 반드시 있어야 한다. 이건 개발자라면 옵션이 아니라 필수다.

 

자 위 준비물 다 준비했으면 이제 따라하기만 하면 된다.

원래 암 것도 모를 땐 흉내부터 내는 거다.

 

우선 이미 생성된 프로젝트가 있을 때 Microsoft Entra ID 기능을 어떻게 추가하는지에 대해서 먼저 알아보도록 하자

그 이후에 콘솔에서 단일 명령어로 프로젝트 생성 시 매우 쉽게 Microsoft Entra ID 가 결합된 프로젝트가 생성되도록 하는 법을 알아볼 것이다.

 

 

# 이미 개발 진행 중인 Blazor 프로젝트에 Microsoft Entra ID 결합하기

그러면 이제 Visual Studio 켜고 Blazor 프로젝트부터 만드는데, 프로젝트 형태는 아래처럼 WASM 으로 만들도록 하자.

 

 

 

 

경로 지정 같은 건 뭐 다 할 줄 알 테니 알아서 대강 만들고 아참 만들 때 장기 지원 해주는 닷넷 8으로 만들도록 하자.  혹시라도 장기 부족할 때 지원 받아야 할 수도 있으니

 

 

 

 

왜 Blazor Server로 안 만드느냐? 음... 요즘 대세는 서버리스 환경인 건 알 거다.

서버리스 환경이란... 이전에는 하나의 서버가 존재하고 서버 안에 인증기능, Storage 저장소, 로깅 시스템, 분석 시스템, 그리고 비즈니스 서비스 제공 같은 기능이 다 들어가 있었는데, 이제는 비즈니스 서비스를 제외한 나머지 대다수의 기능들은 서버를 구현할 필요가 없고 클라우드 서버를 사용하는 개념이 되는 거다.

 

이렇게 되면 당연히 트래픽은 분산 될테고, 우리가 제공해야 할 비즈니스 서비스 제공에만 집중 할 수 있게 되며 우리의 관심사 외에는 모두 클라우드에 떠넘길 수 있다.

게다가 클라우드 시스템이 책임지게 되는 기능들에 대해서 클라우드 업체에서 자동으로 관리까지 해주니 (자동 스케일링 같은 거), 관리비용도 대폭 줄어들거다.

 

우리는 단순히 인증 기능만을 원하고 이건 전부 Azure에 서비스 제공 및 관리 책임을 떠넘길 거니까 서버 없이 가기로 한다.

 

 

어쨋든 프로젝트 만들었으면 이제 https://portal.azure.com/ 로 이동한 후, 상단 검색 창에 아래 이미지처럼 Entra ID를 검색 하면 Microsoft Entra ID가 나오는데 그걸 선택하자

 

 

 

 

 

그리고 좌측 메뉴에서 좀 내려보면 앱 등록이 있는데 찾았으면 클릭하도록 하자

 

 

 

 

 

그러면 아래와 같은 창이 나오는데 새 등록 클릭하고

 

 

 

 

 

그러면 애플리케이션 등록을 위한 창이 나타나는데 이 중에서 이름 란은 앱을 설명하기 위한 이름으로 작성해주면 된다 필자는 아래처럼 작성했다.

 

 

 

그리고 그 아래에 보면 지원되는 계정 유형 란이 있는데 여기서 테넌트 라는 이름이 조금 생소할건데,

테넌트는 그냥 단순하게 설명하면 조직 관리를 위한 디렉토리 라고 보면 된다.

Azure 가 처음이라면 테넌트는 1개 (현재 사용중인 디렉토리) 일 거다.

테넌트가 조직 관리를 위한 디렉토리라는 것을 기억하고 자세한 건 선택안내를 읽어보면 좀 더 자세히 알 수 있다.

지금은 테스트니까 어떤걸 선택해도 되는데, 필자는 3번째를 선택했다.

 

 

 

 

이제 마지막으로 여기서 중요하다.

아래와 같이 WebAssembly 프로젝트이므로 SPA를 선택하고,

옆에 https://localhost/authentication/login-callback 을 적어주자.

이게 뭔 의미냐면 로그인 하고 난 후에 어디로 콜백할 지 주소를 적어주는거다.

 

만약 실제 사이트가 있다면

실제사이트주소/authentication/login-callback  이라고 적어주면 된다.

 

 

 

 

 

그리고 등록을 눌러주자.

그러면  애플리케이션이 등록 된 후 개요 화면이 나오는데 아래처럼 인증을 클릭하자.

 

 

 

 

 

조금 내려보면 아래 이미지와 같이 암시적 허용 및 하이브리드 흐름 란이 있는데 여기서 액세스 토큰이랑 ID 토큰 둘 다 체크 해주고 저장하자.

 

 

 

 

 

이제 Azure 설정은 모두 끝났다. 뭔가 복잡해 보일 수 있는데 익숙해지면 1분 안에 끝낼 만큼 매우 간단하다.

자 이제 마지막으로 개요창으로 돌아가서 클라이언트 ID, 테넌트 ID를 복사해두자

 

 

 

 

 

이제 Blazor 프로젝트로 돌아가서 Client 프로젝트의 wwwroot 폴더 내부에 appsettings.json 파일을 하나 만들고

아래처럼 입력해주자.

 

{
"AzureAd": {
    "Authority": "https://login.microsoftonline.com/{테넌트 id}",
    "ClientId": "{클라이언트 id}",
    "ValidateAuthority": true
  }
}

 

 

이제 위에서 테넌트 id랑 클라이언트 id 가 있는데 Azure의 개요에서 자신의 테넌트 id와 클라이언트 id를 입력해주면 된다.

예를 들어 자신의 테넌트 id가 abcd-efgh-xxx 이고 클라이언트 id가 ccc-ddd-eeeas-fasdf 라면 아래처럼 입력하면 된다.

{
"AzureAd": {
    "Authority": "https://login.microsoftonline.com/abcd-efgh-xxx",
    "ClientId": "ccc-ddd-eeeas-fasdf",
    "ValidateAuthority": true
  }
}

 

 

 

 

자 이제 입력 다 했으면 Visual Studio 의 프로젝트로 돌아와서

Nuget 패키지 관리자 콘솔에서 다음의 명령으로 Nuget 패키지를 하나씩 설치해주도록 하자.

 

Install-Package Microsoft.AspNetCore.Authorization

Install-Package Microsoft.AspNetCore.Components.Authorization

Install-Package Microsoft.Authentication.WebAssembly.Msal

 

 

 

입력 다했으면 이제 _Imports.razor 파일을 열고 아래 내용을 입력해주자.

@using Microsoft.AspNetCore.Authorization;
@using Microsoft.AspNetCore.Components.Authorization;
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication;

 

 

길을 잃을까봐 이쯤에서 이미지로 동기화 한번 해주면 입력하고 나면 아래처럼 된다. 

 

 

 

 

자 그럼 이제 자바스크립트를 추가해줘야 하는데 index.html에 다음과 같이 추가해준다.

<script src="_content/Microsoft.Authentication.WebAssembly.Msal/AuthenticationService.js"></script>

 

 

 

 

이제 막바지다 Program.cs 에 Azure 인증을 위한 서비스를 추가해주면 된다.

아래 코드를 추가하면 appsettings.json 파일을 가져와서 그 내용으로 Azure 인증 프로세스를 수행한다.

            builder.Services.AddMsalAuthentication(options =>
            {
                builder.Configuration.Bind("AzureAd", options.ProviderOptions.Authentication);
                options.ProviderOptions.LoginMode = "redirect";
            });

 

 

 

이제 프로젝트 설정도 끝났고 다음에는 로그인 화면을 만들고 Azure 인증에 따른 분기 처리를 해보도록 하자.

 

처음 하면 너무 복잡하다 생각될 수도 있는데, 몇 번 해보면 전체 과정이 3분도 걸리지 않을 만큼 매우 간단하다.

그리고 위에서 언급했다시피 이미 진행된 프로젝트에 Azure Entra ID 기능을 추가 할때의 시나리오 라서 조금 더 복잡해진것인데,

만약 처음부터 Azure Entra ID 가 추가된 프로젝트를 만들려고 하면 Azure에서 설정만 하고 해당 설정으로 닷넷 콘솔 명령어로 프로젝트를 만들게 되면 설정에서 프로젝트 생성까지 1분도 걸리지 않는다. (이건 다음 챕터에서 알아보기로 하자.)

 

 

 

끗