다음을 통해 공유

ASP.NET Core에서 TOTP 인증 앱에 QR 코드 생성 사용

  • 아티클

ASP.NET Core는 개별 인증을 위한 인증자 애플리케이션에 대한 지원과 함께 제공됩니다. TOTP(시간 기반 일회용 암호 알고리즘)를 사용하는 2FA(2단계 인증) 인증자 앱은 2FA에 대해 업계에서 권장되는 방법입니다. TOTP를 사용하는 2FA는 SMS 2FA를 선호합니다. 인증자 앱은 사용자 이름과 암호를 확인한 후 사용자가 입력해야 하는 6~8자리 코드를 제공합니다. 일반적으로 인증자 앱은 스마트폰에 설치됩니다.

Warning

ASP.NET Core TOTP 코드는 만료되기 전에 성공적으로 여러 번 인증하는 데 사용할 수 있으므로 비밀로 유지되어야 합니다.

ASP.NET Core 웹앱 템플릿은 인증자를 지원하지만 QR 코드 생성을 지원하지는 않습니다. QR 코드 생성기를 통해 2FA를 쉽게 설정할 수 있습니다. 이 문서에서는 2FA 구성 페이지에 QR 코드Razor방법에 대한 Pages 및 MVC 앱에 대한 지침을 제공합니다. s에 Blazor Web App적용되는 지침은 ASP.NET Core에서 TOTP 인증자 앱에 대한 QR 코드 생성 사용을 참조 하세요 Blazor Web App. 앱에 적용되는 지침으로는 ASP.NET Core 를 사용하여 ASP.NET Core 에서 TOTP 인증자 앱에 대한 QR 코드 생성 사용을 에서 참조하세요.

ASP.NET Core 웹앱 템플릿은 인증자를 지원하지만 QR 코드 생성을 지원하지는 않습니다. QR 코드 생성기를 통해 2FA를 쉽게 설정할 수 있습니다. 이 문서에서는 2FA 구성 페이지에 QR 코드 생성을 추가하는 방법을 안내합니다.

2단계 인증은 Google 또는 Facebook 같은 외부 인증 공급자를 사용하지 않고 수행됩니다. 외부 로그인은 외부 로그인 공급자가 제공하는 메커니즘에 의해 보호됩니다. 예를 들어 Microsoft 인증 공급자에는 하드웨어 키 또는 다른 2FA 접근 방식이 필요합니다. 기본 템플릿에 웹앱과 외부 인증 공급자 모두에 2FA가 필요한 경우 사용자는 두 가지 2FA 접근 방식을 충족해야 합니다. 두 개의 2FA 접근 방식을 요구하면 일반적으로 인증을 위해 강력한 단일 2FA 방법을 사용하는 설정된 보안 관행에서 벗어나게 됩니다.

2FA 구성 페이지에 QR 코드 추가

이러한 지침은 리포지토리에서 qrcode.js 사용합니다https://davidshimjs.github.io/qrcodejs/.

  • qrcode.jsJavaScript 라이브러리를 프로젝트의 wwwroot\lib 폴더에 다운로드합니다.
  • 스캐폴드 Identity 지침에 따라 /Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml를 생성합니다.
  • /Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml에서 파일의 끝에 있는 Scripts 섹션을 찾습니다.
@section Scripts {
    @await Html.PartialAsync("_ValidationScriptsPartial")
}
  • 호출 qr.jswwwroot/js 된 새 JavaScript 파일을 만들고 다음 코드를 추가하여 QR 코드를 생성합니다.
window.addEventListener("load", () => {
  const uri = document.getElementById("qrCodeData").getAttribute('data-url');
  new QRCode(document.getElementById("qrCode"),
    {
      text: uri,
      width: 150,
      height: 150
    });
});
  • Scripts 섹션을 업데이트하여 이전에 다운로드한 qrcode.js 라이브러리에 대한 참조를 추가합니다.
  • 호출이 포함된 qr.js 파일을 추가하여 QR 코드를 생성합니다.
@section Scripts {
    @await Html.PartialAsync("_ValidationScriptsPartial")

    <script type="text/javascript" src="~/lib/qrcode.js"></script>
    <script type="text/javascript" src="~/js/qr.js"></script>
}
  • 이러한 지침에 연결하는 단락을 삭제합니다.

앱을 실행하고 QR 코드를 검사하고 인증자가 증명하는 코드의 유효성을 검사할 수 있는지 확인합니다.

QR 코드에서 사이트 이름 변경

QR 코드의 사이트 이름은 처음에 프로젝트를 만들 때 선택한 프로젝트의 이름을 딴 것입니다. GenerateQrCodeUri(string email, string unformattedKey)의 /Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml.cs메서드를 찾아 이름을 변경할 수 있습니다.

템플릿의 기본 코드는 다음과 같습니다.

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

string.Format에 대한 호출의 두 번째 매개 변수는 솔루션 이름에서 가져온 사이트 이름입니다. 모든 값으로 변경할 수 있지만 항상 URL로 인코딩되어야 합니다.

다른 QR 코드 라이브러리 사용

QR 코드 라이브러리를 원하는 라이브러리로 바꿀 수 있습니다. HTML에는 라이브러리가 제공하는 메커니즘에 따라 QR 코드를 배치할 수 있는 qrCode 요소가 포함되어 있습니다.

QR 코드에 대한 올바른 형식의 URL은 다음에서 사용할 수 있습니다.

  • 모델의 AuthenticatorUri 속성
  • data-url 요소의 qrCodeData 속성

TOTP 클라이언트 및 서버 시간 기울이기

TOTP(시간 기반 일회용 암호) 인증은 정확한 시간을 갖는 서버 및 인증자 디바이스 모두에 따라 달라집니다. 토큰은 30초 동안만 지속됩니다. TOTP 2FA 로그인이 실패하는 경우 서버 시간이 정확하고 가급적 정확한 NTP 서비스에 동기화되는지 확인합니다.