AspNetCore.Docs/aspnetcore/security/authentication/identity-enable-qrcodes.md

title	author	description	keywords	ms.author	manager	ms.date	ms.topic	ms.technology	ms.prod	uid
Enabling QR Code generation for authenticator apps in ASP.NET Core	rick-anderson	Enabling QR Code generation for authenticator apps in ASP.NET Core	ASP.NET Core, MVC, QR Code generation, authenticator, 2FA	riande	wpickett	7/24/2017	article	aspnet	asp.net-core	security/authentication/identity-enable-qrcodes

Enabling QR Code generation for authenticator apps in ASP.NET Core

Note: This topic applies to ASP.NET Core 2.x with Razor Pages.

ASP.NET Core ships with support for authenticator applications for individual authentication. Two factor authentication (2FA) authenticator apps, using a Time-based One-time Password Algorithm (TOTP), are the industry recommended approch for 2FA. 2FA using TOTP is preferred to SMS 2FA. An authenticator app provides a 6 to 8 digit code which users must enter after confirming their username and password. Typically an authenticator app is installed on a smart phone.

The ASP.NET Core web app templates support authenticators, but do not provide support for QRCode generation. QRCode generators ease the setup of 2FA. This document will guide you through adding QR Code generation to the 2FA configuration page.

Adding QR Codes to the 2FA configuration page

These instructions use qrcode.js from the https://davidshimjs.github.io/qrcodejs/ repo.

• Download the qrcode.js javascript library to the wwwroot\lib folder in your project.

• In the Pages\Account\Manage\EnableAuthenticator.cshtml file, locate the Scripts section at the end of the file:

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

• Update the Scripts section to add a reference to the qrcodejs library you added and a call to generate the QR Code. It should look as follows:

@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>
}

• Delete the paragraph which links you to these instructions.

Run your app and ensure that you can scan the QR code and validate the code the authenticator proves.

Change the site name in the QR Code

The site name in the QR Code is taken from the project name you choose when initially creating your project. You can change it by looking for the GenerateQrCodeUri(string email, string unformattedKey) method in the EnableAuthenticator.cshtml.cs file.

The default code from the template looks as follows:

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

The second parameter in the call to string.Format is your site name, taken from your solution name. It can be changed to any value, but it must always be URL encoded.

Using a different QR Code library

You can replace the QR Code library with your preferred library. The HTML contains a qrCode element into which you can place a QR Code by whatever mechanism your library provides.

The correctly formatted URL for the QR Code is available in the:

• AuthenticatorUri property of the model.
• data-url property in the qrCodeData element.

Use @Html.Raw to access the model property in a view (otherwise the ampersands in the url will be double encoded and the label parameter of the QR Code will be ignored).