Mengaktifkan pembuatan Kode QR untuk aplikasi pengautentikasi TOTP di ASP.NET Core

ASP.NET Core dikirim dengan dukungan untuk aplikasi pengautentikasi untuk autentikasi individual. Dua aplikasi pengautentikasi autentikasi faktor (2FA), menggunakan Algoritma Kata Sandi Satu Kali Berbasis Waktu (TOTP), adalah pendekatan yang direkomendasikan industri untuk 2FA. 2FA menggunakan TOTP lebih disukai daripada SMS 2FA. Aplikasi pengautentikasi menyediakan kode 6 hingga 8 digit yang harus dimasukkan pengguna setelah mengonfirmasi nama pengguna dan kata sandi mereka. Biasanya aplikasi pengautentikasi diinstal pada ponsel cerdas.

Templat aplikasi web ASP.NET Core mendukung pengautentikasi tetapi tidak memberikan dukungan untuk pembuatan kode QR. Generator kode QR memudahkan penyiapan 2FA. Dokumen ini menyediakan panduan untuk Razor aplikasi Pages dan MVC tentang cara menambahkan pembuatan kode QR ke halaman konfigurasi 2FA. Untuk panduan yang berlaku untuk Blazor Web Apps, lihat Mengaktifkan pembuatan kode QR untuk aplikasi pengautentikasi TOTP di ASP.NET Core Blazor Web App.

Autentikasi dua faktor tidak terjadi menggunakan penyedia autentikasi eksternal, seperti Google atau Facebook. Login eksternal dilindungi oleh mekanisme apa pun yang disediakan penyedia login eksternal. Pertimbangkan, misalnya, penyedia autentikasi Microsoft memerlukan kunci perangkat keras atau pendekatan 2FA lainnya. Jika templat default memberlakukan 2FA "lokal" maka pengguna akan diminta untuk memenuhi dua pendekatan 2FA, yang bukan skenario yang umum digunakan.

Menambahkan kode QR ke halaman konfigurasi 2FA

Instruksi ini digunakan qrcode.js dari repositori https://davidshimjs.github.io/qrcodejs/ .

• qrcode.js Unduh pustaka JavaScript ke wwwroot\lib folder di proyek Anda.
• Ikuti instruksi di Scaffold Identity untuk menghasilkan /Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml.
• Di /Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml, temukan bagian Scripts di akhir file:

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

• Buat file JavaScript baru yang dipanggil qr.jswwwroot/js dan tambahkan kode berikut untuk menghasilkan Kode QR:

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

• Perbarui bagian Scripts untuk menambahkan referensi ke pustaka yang qrcode.js sebelumnya diunduh.
• qr.js Tambahkan file dengan panggilan untuk menghasilkan kode 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>
}

• Hapus paragraf yang menautkan Anda ke instruksi ini.

Jalankan aplikasi Anda dan pastikan Anda dapat memindai kode QR dan memvalidasi kode yang terbukti oleh pengautentikasi.

Mengubah nama situs dalam kode QR

Nama situs dalam kode QR diambil dari nama proyek yang Anda pilih saat awal membuat proyek Anda. Anda dapat mengubahnya dengan mencari GenerateQrCodeUri(string email, string unformattedKey) metode di /Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml.cs.

Kode default dari templat terlihat sebagai berikut:

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

Parameter kedua dalam panggilan ke string.Format adalah nama situs Anda, diambil dari nama solusi Anda. Ini dapat diubah ke nilai apa pun, tetapi harus selalu dikodekan URL.

Menggunakan pustaka Kode QR yang berbeda

Anda dapat mengganti pustaka Kode QR dengan pustaka pilihan Anda. HTML berisi qrCode elemen tempat Anda dapat menempatkan Kode QR dengan mekanisme apa pun yang disediakan pustaka Anda.

URL yang diformat dengan benar untuk Kode QR tersedia di:

• AuthenticatorUri properti model.
• data-url properti dalam qrCodeData elemen .

Klien TOTP dan penyimpangan waktu server

Autentikasi TOTP (Kata Sandi Satu Kali Berbasis Waktu) bergantung pada server dan perangkat pengautentikasi yang memiliki waktu yang akurat. Token hanya berlangsung selama 30 detik. Jika login TOTP 2FA gagal, periksa apakah waktu server akurat, dan sebaiknya disinkronkan ke layanan NTP yang akurat.