Share via

Povolení generování kódu QR pro ověřovací aplikace TOTP ve webové aplikaci ASP.NET Core Blazor

  • Článek

Tento článek vysvětluje, jak nakonfigurovat webovou aplikaci ASP.NET Core Blazor s generováním kódu QR pro ověřovací aplikace TOTP.

Úvod do dvojúrovňového ověřování (2FA) s ověřovacími aplikacemi využívajícími jednorázový algoritmus hesla založený na čase (TOTP) najdete v tématu Povolení generování kódu QR pro ověřovací aplikace TOTP v ASP.NET Core.

Generování uživatelského rozhraní komponenty Enable Authenticator do aplikace

Postupujte podle pokynů v generování uživatelského rozhraní Identity v projektech ASP.NET Core a vygenerujte Pages\Manage\EnableAuthenticator je do aplikace.

Poznámka:

I když je v tomto příkladu vybrána pouze komponenta EnableAuthenticator pro generování uživatelského rozhraní, generování uživatelského rozhraní aktuálně přidává do aplikace všechny Identity komponenty. Kromě toho mohou být výjimky vyvolány během procesu generování uživatelského rozhraní do aplikace. Pokud při migraci databáze dojde k výjimkám, zastavte aplikaci a restartujte ji při každé výjimce. Další informace najdete v tématu Výjimky generování uživatelského rozhraní pro Blazor webovou aplikaci (dotnet/Scaffolding č. 2694).< a1/>.

Buďte trpěliví při provádění migrací. V závislosti na rychlosti systému může dokončení migrace databází trvat až minutu nebo dvě.

Další informace najdete v tématu Generování uživatelského rozhraní Identity v projektech ASP.NET Core. Pokyny k použití rozhraní příkazového řádku .NET místo sady Visual Studio najdete v příkazu dotnet aspnet-codegenerator.

Přidání kódů QR na stránku konfigurace 2FA

Tyto pokyny používají qrcode.js Shim Sangmin: generátor QRCode pro cross-browser pro JavaScript (davidshimjs/qrcodejsúložiště GitHub).

Stáhněte knihovnu qrcode.min.jswwwroot do složky projektu serveru řešení. Knihovna nemá žádné závislosti.

V komponentě App (Components/App.razor) umístěte odkaz na skript knihovny za <script>Blazorznačku:

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

Komponenta EnableAuthenticator , která je součástí systému kódu QR v aplikaci a zobrazuje kód QR uživatelům, přijímá statické vykreslování na straně serveru (statické SSR) s vylepšenou navigaci. Normální skripty se proto nedají spustit, když se komponenta načte nebo aktualizuje v rozšířené navigaci. Další kroky jsou potřeba k aktivaci kódu QR, který se má načíst v uživatelském rozhraní při načtení stránky. Pro načtení kódu QR se přijímá přístup, který je vysvětlen v ASP.NET Core Blazor JavaScriptu se statickým vykreslováním na straně serveru (static SSR).

Do složky projektu serveru přidejte následující inicializátor JavaScriptu wwwroot . Zástupný {NAME} symbol musí být název sestavení aplikace, aby bylo možné Blazor soubor vyhledat a načíst automaticky. Pokud je BlazorSamplenázev sestavení serverové aplikace , soubor má název 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);
}

Do serverové aplikace přidejte následující sdílenou PageScript komponentu.

Components/PageScript.razor:

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

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

Přidejte následující kompletovaný JS soubor pro komponentuEnableAuthenticator, která je umístěna v Components/Account/Pages/Manage/EnableAuthenticator.razorumístění . Funkce onLoad vytvoří kód QR s knihovnou Sangmin qrcode.js pomocí identifikátoru URI kódu QR vytvořeného GenerateQrCodeUri metodou v bloku komponenty @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> Pod komponentu v komponentě EnableAuthenticator přidejte komponentu PageScript s cestou ke kompletovanému JS souboru:

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

Poznámka:

Alternativou k použití přístupu s komponentou PageScript je použití naslouchacího procesu událostí (blazor.addEventListener("enhancedload", {CALLBACK})) zaregistrovanéhoJSafterWebStartedv inicializátoru pro naslouchání aktualizacím stránek způsobeným vylepšenou navigaci. Zpětné volání ({CALLBACK} zástupný symbol) provádí logiku inicializace kódu QR.

Při použití zpětného enhancedloadvolání se kód spustí pro každou vylepšenou navigaci, i když kód <div> QR není vykreslen. Proto je nutné přidat další kód, který zkontroluje přítomnost <div> kódu před spuštěním kódu, který přidá kód QR.

<div> Odstraňte prvek, který obsahuje pokyny ke kódu QR:

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

Vyhledejte dva <div> prvky, kde by se měl kód QR objevit a kde jsou data kódu QR uložená na stránce.

Proveďte následující změny:

  • Pro prázdnou <div>hodnotu dejte prvku id znak .qrCode
  • <div> U atributu data-url udělte elementu znak .idqrCodeData
- <div></div>
- <div data-url="@authenticatorUri"></div>
+ <div id="qrCode"></div>
+ <div id="qrCodeData" data-url="@authenticatorUri"></div>

Změňte název lokality v GenerateQrCodeUri metodě EnableAuthenticator komponenty. Výchozí hodnota je Microsoft.AspNetCore.Identity.UI. Změňte hodnotu na smysluplný název webu, který uživatelé můžou snadno identifikovat v ověřovací aplikaci spolu s dalšími kódy QR pro jiné aplikace. Nechejte zakódovanou adresu URL hodnoty. Vývojáři obvykle nastaví název webu, který odpovídá názvu společnosti. Příklady: Yahoo, Amazon, Etsy, Microsoft, Zoho.

V následujícím příkladu {SITE NAME} je zástupný symbol, kde se nachází název webu (společnost):

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);
}

Spusťte aplikaci a ujistěte se, že je kód QR naskenovatelný a že se kód ověří.

EnableAuthenticator součást v referenčním zdroji

Komponentu EnableAuthenticator je možné zkontrolovat v referenčním zdroji:

EnableAuthenticator součást v referenčním zdroji

Poznámka:

Odkazy na dokumentaci k referenčnímu zdroji .NET obvykle načítají výchozí větev úložiště, která představuje aktuální vývoj pro příští verzi .NET. Pokud chcete vybrat značku pro konkrétní verzi, použijte rozevírací seznam pro přepnutí větví nebo značek. Další informace najdete v tématu Jak vybrat značku verze zdrojového kódu ASP.NET Core (dotnet/AspNetCore.Docs #26205).

Další materiály