[ASP.NET Core] 2차 인증을 위한 QR코드 생성하기

ASP.NET Core는 2차 인증기 앱을 지원합니다. TOTP(Time-based One-time Password Algorithm, 시간 기반 일회성 비밀번호 알고리즘)을 사용하는 2차 인증기 앱들은 2차 인증을 위해 사용되는 수단 중 하나입니다. TOTP 2차인증 앱을 사용하는 방법은 SMS나 이메일을 통한 2차인증 보다 선호되는 방법입니다. 사용자가 ID와 비밀번호를 입력한 후 2차인증 앱에서 생성된 6~8자리의 코드를 입력하는 방법이죠. 이 경우 사용자의 스마트폰에 인증기 앱이 설치되어 있기 마련입니다.

ASP.NET Core 웹앱 템플릿은 2차 인증기를 지원하지만, QR코드 통한 인증방법은 기본적으로 제공하지 않습니다. QRCode를 통한 인증방법은 사용자가 쉽게 2차인증을 완료하도록 도와줍니다. 이 문서는 2차인증 설정 페이지에 QR Code 생성기를 추가하는 방법에 대해 소개합니다.

Google이나 Facebook 등의 외부 로그인을 사용하는 경우에는 2차인증이 발생하지 않습니다. 외부 로그인은 외부 로그인 공급자가 제공하는 2차인증 메카니즘을 사용하기 때문입니다. 예를들어 [Microsoft 계정으로 로그인]은 자체적인 2차인증 수단을 사용자에게 제공하고 있습니다. 만약 ASP.NET Core 템플릿이 2차인증을 강제한다면 사용자는 2차인증을 두 번 중복 진행하는 불편을 겪게 될 것입니다.

2차 인증 페이지에 QR Code 추가

이 가이드는 https://davidshimjs.github.io/qrcodejs/에서 제공하는 qrcode.js를 사용합니다.

• qrcode.js 자바스크립트 라이브러리를 wwwroot/lib 폴더에 다운로드 해주세요.
• Scaffold Identity 가이드를 따라서 /Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml 파일을 생성해주세요. (파일샘플)
• /Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml 파일에서 아래 코드와 같은 Scripts 섹션을 최하단에 추가해주세요.
  

  @section Scripts {
      @await Html.PartialAsync("_ValidationScriptsPartial")
  }

• Scripts 섹션에 qrcodejs 라이브러리 참조를 추가하시고 QR Code를 생성하는 코드를 추가해주세요. 완성된 코드는 다음과 같습니다.
  

  @section Scripts {
      @await Html.PartialAsync("_ValidationScriptsPartial")
  
      <script type="text/javascript" src="~/lib/qrcode.js"></script>
      <script type="text/javascript">
          new QRCode(document.getElementById("qrCode"),
              {
                  text: "@Html.Raw(Model.AuthenticatorUri)",
                  width: 150,
                  height: 150
              });
      </script>
  }

• 그 외 불필요한 코드를 삭제하는 등 원하는 형태로 페이지를 수정해주세요.

QR Code의 사이트명 변경

생성된 QR Code에는 사이트명이 추가되어 있습니다. 이 값은 프로젝트를 생성할 때 설정한 프로젝트명이 기본 값입니다. 이 값을 변경하려면 /Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml.cs 파일에서 GenerateQrCodeUristring email, string unformattedKey)를 수정해야 합니다.

아래 메서드를 찾아서 _urlEncoder.Encode("Razor Pages")부분을 원하는 형태로 변경해주세요. 반드시 URL Encode된 값으로 변경해야 합니다.

private string GenerateQrCodeUri(string email, string unformattedKey)
{
    return string.Format(
        AuthenticatorUriFormat,
        _urlEncoder.Encode("Razor Pages"),
        _urlEncoder.Encode(email),
        unformattedKey);
}

다른 QR Code 라이브러리 사용

qrcode.js 대신 다른 라이브러리를 사용할 수 있습니다. EnableAuthenticator.cshtml 파일의 qrCode 엘리먼트에 QR Code 이미지를 위치시키면 됩니다.

QR Code 생성에 필요한 URL 값은 다음 위치에서 찾을 수 있습니다.

• Model 인스턴스의 AuthenticatorUri Property 값
• qrCodeData 엘리먼트의 data-url 속성 값

TOTP 클라이언트와 서버의 시간 불일치

서버와 인증기의 시간이 불일치 할 경우 TOTP 인증이 실패할 수 있습니다. TOTP 인증 토큰은 30초 동안만 유효하기 때문입니다. 만약 TOTP 인증이 실패한다면 서버와 인증기의 시간이 정확한지 확인해주세요.

References

• 원문: https://docs.microsoft.com/en-us/aspnet/core/security/authentication/identity-enable-qrcodes?view=aspnetcore-3.1