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

아티클
07/05/2022
읽는 데 5분 걸림

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

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

Google 또는 Facebook과 같은 외부 인증 공급자를 사용하면 2단계 인증이 수행되지 않습니다. 외부 로그인은 외부 로그인 공급자가 제공하는 메커니즘에 의해 보호됩니다. 예를 들어 Microsoft 인증 공급자에는 하드웨어 키 또는 다른 2FA 접근 방식이 필요합니다. 기본 템플릿이 "로컬" 2FA를 적용하는 경우 사용자는 일반적으로 사용되는 시나리오가 아닌 두 가지 2FA 접근 방식을 충족해야 합니다.

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

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

qrcode.js javascript 라이브러리를 프로젝트의 wwwroot\lib 폴더에 다운로드합니다.
스캐폴드의 Identity 지침에 따라 생성/Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml합니다.
에서 /Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml파일의 끝에 있는 섹션을 찾 Scripts 습니다.

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

wwwroot/js에서 호출 qr.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 코드의 사이트 이름은 처음에 프로젝트를 만들 때 선택한 프로젝트 이름에서 가져온 것입니다. 에서 메서드/Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml.cs를 GenerateQrCodeUri(string email, string unformattedKey) 찾아 변경할 수 있습니다.

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

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 속성
qrCodeData 요소의 data-url 속성

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

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