Bagikan melalui

Mengaktifkan pembuatan kode QR untuk aplikasi pengautentikasi TOTP di ASP.NET Core Blazor Web App

  • Artikel

Artikel ini menjelaskan cara mengonfigurasi ASP.NET Core Blazor Web App dengan pembuatan kode QR untuk aplikasi pengautentikasi TOTP.

Untuk pengenalan autentikasi dua faktor (2FA) dengan aplikasi pengautentikasi menggunakan Algoritma Kata Sandi Satu Kali Berbasis Waktu (TOTP), lihat Mengaktifkan pembuatan kode QR untuk aplikasi pengautentikasi TOTP di ASP.NET Core.

Perancah komponen Aktifkan Authenticator ke dalam aplikasi

Ikuti panduan dalam Perancah Identity dalam proyek ASP.NET Core untuk perancah Pages\Manage\EnableAuthenticator ke dalam aplikasi.

Catatan

Meskipun hanya EnableAuthenticator komponen yang dipilih untuk perancah dalam contoh ini, perancah saat ini menambahkan semua Identity komponen ke aplikasi. Selain itu, pengecualian dapat dilemparkan selama proses perancah ke dalam aplikasi. Jika pengecualian terjadi saat migrasi database terjadi, hentikan aplikasi dan mulai ulang aplikasi pada setiap pengecualian. Untuk informasi selengkapnya, lihat Pengecualian perancah untuk Blazor Aplikasi Web (dotnet/Scaffolding #2694).

Bersabarlah saat migrasi dijalankan. Tergantung pada kecepatan sistem, diperlukan waktu hingga satu atau dua menit agar migrasi database selesai.

Untuk informasi selengkapnya, lihat Perancah Identity dalam proyek ASP.NET Core. Untuk panduan tentang menggunakan .NET CLI alih-alih Visual Studio, lihat perintah dotnet aspnet-codegenerator.

Menambahkan kode QR ke halaman konfigurasi 2FA

Instruksi ini menggunakan qrcode.js Shim Sangmin: Generator QRCode lintas browser untuk JavaScript (davidshimjs/qrcodejs repositori GitHub).

qrcode.min.js Unduh pustaka ke wwwroot folder proyek server solusi. Pustaka tidak memiliki dependensi.

App Di komponen (Components/App.razor), tempatkan referensi skrip pustaka setelah <script>Blazortag:

<script src="qrcode.min.js"></script>

Komponen EnableAuthenticator , yang merupakan bagian dari sistem kode QR di aplikasi dan menampilkan kode QR kepada pengguna, mengadopsi penyajian sisi server statis (SSR statis) dengan navigasi yang ditingkatkan. Oleh karena itu, skrip normal tidak dapat dijalankan saat komponen dimuat atau diperbarui di bawah navigasi yang ditingkatkan. Langkah tambahan diperlukan untuk memicu kode QR untuk dimuat di UI saat halaman dimuat. Untuk mencapai pemuatan kode QR, pendekatan yang dijelaskan dalam ASP.NET Core Blazor JavaScript dengan penyajian sisi server statis (SSR statis) diadopsi.

Tambahkan penginisialisasi JavaScript berikut ke folder proyek wwwroot server. Tempat {NAME} penampung harus menjadi nama perakitan aplikasi agar Blazor dapat menemukan dan memuat file secara otomatis. Jika nama rakitan aplikasi server adalah BlazorSample, file diberi nama BlazorSample.lib.module.js.

wwwroot/{NAME}.lib.module.js:

const pageScriptInfoBySrc = new Map();

function registerPageScriptElement(src) {
  if (!src) {
    throw new Error('Must provide a non-empty value for the "src" attribute.');
  }

  let pageScriptInfo = pageScriptInfoBySrc.get(src);

  if (pageScriptInfo) {
    pageScriptInfo.referenceCount++;
  } else {
    pageScriptInfo = { referenceCount: 1, module: null };
    pageScriptInfoBySrc.set(src, pageScriptInfo);
    initializePageScriptModule(src, pageScriptInfo);
  }
}

function unregisterPageScriptElement(src) {
  if (!src) {
    return;
  }

  const pageScriptInfo = pageScriptInfoBySrc.get(src);
  
  if (!pageScriptInfo) {
    return;
  }

  pageScriptInfo.referenceCount--;
}

async function initializePageScriptModule(src, pageScriptInfo) {
  if (src.startsWith("./")) {
    src = new URL(src.substr(2), document.baseURI).toString();
  }

  const module = await import(src);

  if (pageScriptInfo.referenceCount <= 0) {
    return;
  }

  pageScriptInfo.module = module;
  module.onLoad?.();
  module.onUpdate?.();
}

function onEnhancedLoad() {
  for (const [src, { module, referenceCount }] of pageScriptInfoBySrc) {
    if (referenceCount <= 0) {
      module?.onDispose?.();
      pageScriptInfoBySrc.delete(src);
    }
  }

  for (const { module } of pageScriptInfoBySrc.values()) {
    module?.onUpdate?.();
  }
}

export function afterWebStarted(blazor) {
  customElements.define('page-script', class extends HTMLElement {
    static observedAttributes = ['src'];

    attributeChangedCallback(name, oldValue, newValue) {
      if (name !== 'src') {
        return;
      }

      this.src = newValue;
      unregisterPageScriptElement(oldValue);
      registerPageScriptElement(newValue);
    }

    disconnectedCallback() {
      unregisterPageScriptElement(this.src);
    }
  });

  blazor.addEventListener('enhancedload', onEnhancedLoad);
}

Tambahkan komponen bersama PageScript berikut ke aplikasi server.

Components/PageScript.razor:

<page-script src="@Src"></page-script>

@code {
    [Parameter]
    [EditorRequired]
    public string Src { get; set; } = default!;
}

Tambahkan file yang dikolokasi JS berikut untuk EnableAuthenticator komponen, yang terletak di Components/Account/Pages/Manage/EnableAuthenticator.razor. Fungsi ini onLoad membuat kode QR dengan pustaka Sangmin qrcode.js menggunakan URI kode QR yang diproduksi oleh GenerateQrCodeUri metode di blok komponen @code .

Components/Account/Pages/Manage/EnableAuthenticator.razor.js:

export function onLoad() {
  const uri = document.getElementById('qrCodeData').getAttribute('data-url');
  new QRCode(document.getElementById('qrCode'), uri);
}

<PageTitle> Di bawah komponen dalam EnableAuthenticator komponen, tambahkan PageScript komponen dengan jalur ke file yang dikolokasiJS:

<PageScript Src="./Components/Account/Pages/Manage/EnableAuthenticator.razor.js" />

Catatan

Alternatif untuk menggunakan pendekatan dengan PageScript komponen adalah menggunakan pendengar peristiwa (blazor.addEventListener("enhancedload", {CALLBACK})) yang terdaftar di penginisialisasi afterWebStartedJS untuk mendengarkan pembaruan halaman yang disebabkan oleh navigasi yang ditingkatkan. Panggilan balik ({CALLBACK} tempat penampung) melakukan logika inisialisasi kode QR.

Menggunakan pendekatan panggilan balik dengan enhancedload, kode dijalankan untuk setiap navigasi yang ditingkatkan, bahkan ketika kode <div> QR tidak dirender. Oleh karena itu, kode tambahan harus ditambahkan untuk memeriksa keberadaan <div> sebelum menjalankan kode yang menambahkan kode QR.

<div> Hapus elemen yang berisi instruksi kode QR:

- <div class="alert alert-info">
-     Learn how to <a href="https://go.microsoft.com/fwlink/?Linkid=852423">enable 
-     QR code generation</a>.
- </div>

Temukan dua <div> elemen tempat kode QR akan muncul dan tempat data kode QR disimpan di halaman.

Lakukan perubahan berikut:

  • Untuk yang kosong <div>, berikan elemen id dari qrCode.
  • <div> Untuk dengan data-url atribut , berikan elemen id dari qrCodeData.
- <div></div>
- <div data-url="@authenticatorUri"></div>
+ <div id="qrCode"></div>
+ <div id="qrCodeData" data-url="@authenticatorUri"></div>

Ubah nama situs dalam GenerateQrCodeUri metode EnableAuthenticator komponen. Nilai defaultnya adalah Microsoft.AspNetCore.Identity.UI. Ubah nilai menjadi nama situs yang bermakna yang dapat diidentifikasi pengguna dengan mudah di aplikasi pengautentikasi mereka bersama kode QR lainnya untuk aplikasi lain. Biarkan URL nilai dikodekan. Pengembang biasanya menetapkan nama situs yang cocok dengan nama perusahaan. Contoh: Yahoo, Amazon, Etsy, Microsoft, Zoho.

Dalam contoh berikut, {SITE NAME} tempat penampung adalah tempat nama situs (perusahaan):

private string GenerateQrCodeUri(string email, string unformattedKey)
{
    return string.Format(
        CultureInfo.InvariantCulture,
        AuthenticatorUriFormat,
-       UrlEncoder.Encode("Microsoft.AspNetCore.Identity.UI"),
+       UrlEncoder.Encode("{SITE NAME}"),
        UrlEncoder.Encode(email),
        unformattedKey);
}

Jalankan aplikasi dan pastikan kode QR dapat dipindai dan kode divalidasi.

EnableAuthenticator komponen dalam sumber referensi

Komponen EnableAuthenticator dapat diperiksa di sumber referensi:

EnableAuthenticator komponen dalam sumber referensi

Catatan

Tautan dokumentasi ke sumber referensi .NET biasanya memuat cabang default repositori, yang mewakili pengembangan saat ini untuk rilis .NET berikutnya. Untuk memilih tag rilis tertentu, gunakan daftar dropdown Beralih cabang atau tag. Untuk informasi lebih lanjut, lihat Cara memilih tag versi kode sumber ASP.NET Core (dotnet/AspNetCore.Docs #26205).

Sumber Daya Tambahan: