ASP.NET Core에서 TOTP 인증 앱을 위한 QR 코드 생성 활성화

• 1/4/2024
• 3 minutes to read

이 가이드는 VisualAcademy라는 이름의 ASP.NET Core 프로젝트를 만들고, TOTP 인증 앱을 위한 QR 코드 생성을 활성화하는 단계별 절차를 안내합니다. 이는 사용자가 2단계 인증(2FA)을 보다 쉽게 설정할 수 있게 도와줍니다.

1단계: VisualAcademy 프로젝트 생성

1. Visual Studio를 열고 "새 프로젝트 만들기"를 선택합니다.
2. "ASP.NET Core 웹 애플리케이션"을 찾아 선택한 후 "다음"을 클릭합니다.
3. 프로젝트 이름을 VisualAcademy로 설정하고 원하는 위치에 프로젝트를 생성합니다.
4. "만들기"를 클릭하여 새 프로젝트를 생성합니다.

2단계: Identity 스캐폴딩 추가

1. 프로젝트에 마우스 오른쪽 버튼을 클릭하고 "스캐폴드된 항목 추가"를 선택합니다.
2. "Identity 추가"를 선택하고 "추가"를 클릭합니다.
3. 적절한 옵션을 선택하고 /Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml를 포함하도록 합니다.
4. "추가"를 클릭하여 Identity 스캐폴딩을 프로젝트에 추가합니다.

3단계: QR 코드 라이브러리 다운로드

1. qrcode.js JavaScript 라이브러리를 방문합니다.
2. qrcode.js를 다운로드하여 프로젝트의 wwwroot/lib 폴더에 저장합니다.

4단계: QR 코드 생성 스크립트 추가

1. wwwroot/js 폴더에 qr.js라는 새 JavaScript 파일을 생성합니다.

2. 다음 스크립트를 qr.js 파일에 추가합니다:

   window.addEventListener("load", () => {
     const uri = document.getElementById("qrCodeData").getAttribute('data-url');
     new QRCode(document.getElementById("qrCode"),
       {
         text: uri,
         width: 150,
         height: 150
       });
   });
   

5단계: EnableAuthenticator 페이지 업데이트

1. /Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml 파일을 엽니다.

2. 파일 끝에 있는 Scripts 섹션을 다음과 같이 업데이트합니다:

   @section Scripts {
       @await Html.PartialAsync("_ValidationScriptsPartial")
   
       <script type="text/javascript" src="~/lib/qrcode.js"></script>
       <script type="text/javascript" src="~/js/qr.js"></script>
   }
   

6단계: 프로젝트 실행 및 QR 코드 테스트

1. Visual Studio에서 프로젝트를 실행합니다.
2. 앱에서 2단계 인증을 설정하고, QR 코드가 올바르게 생성되고 스캔될 수 있는지 확인합니다.

추가 정보

• 사이트 이름이나 기타 설정을 변경하려면, /Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml.cs 파일 내의 관련 코드를 수정합니다.
• 서버와 클라이언트 간의 시간 차이가 TOTP 인증에 영향을 줄 수 있으므로, 시간 동기화 상태를 확인하고 필요한 경우 조정합니다.

이 가이드를 따라 VisualAcademy 프로젝트에 TOTP 인증 앱을 위한 QR 코드 생성을 성공적으로 활성화할 수 있습니다. 이를 통해 사용자는 보다 손쉽게 2단계 인증을 설정하고 안전하게 서비스를 이용할 수 있게 됩니다.