Aracılığıyla paylaş

ASP.NET Core Blazor Web App'te TOTP kimlik doğrulayıcı uygulamaları için QR kodu oluşturmayı etkinleştirme

  • Makale

Bu makalede, TOTP kimlik doğrulayıcı uygulamaları için QR kodu oluşturma ile bir ASP.NET Core Blazor Web Uygulamasını yapılandırma işlemi açıklanmaktadır.

Zaman Tabanlı Tek Seferlik Parola Algoritması (TOTP) kullanarak kimlik doğrulayıcı uygulamalarıyla iki öğeli kimlik doğrulamasına (2FA) giriş için bkz . ASP.NET Core'da TOTP kimlik doğrulayıcı uygulamaları için QR kodu oluşturmayı etkinleştirme.

Authenticator'ı Etkinleştir bileşenini uygulamaya iskeleyle ekleme

Uygulamaya iskele eklemek için ASP.NET Core projelerindeki yapı iskelesindeki Pages\Manage\EnableAuthenticator yönergeleri Identity izleyin.

Not

Bu örnekte yapı iskelesi için yalnızca EnableAuthenticator bileşen seçili olsa da, yapı iskelesi şu anda tüm Identity bileşenleri uygulamaya ekler. Ayrıca, uygulamaya iskele oluşturma işlemi sırasında özel durumlar oluşturulabilir. Veritabanı geçişleri gerçekleştiğinde özel durumlar oluşursa, uygulamayı durdurun ve her özel durumda uygulamayı yeniden başlatın. Daha fazla bilgi için bkz . Web Uygulaması için Blazor yapı iskelesi özel durumları (dotnet/Scaffolding #2694).

Geçişler yürütülürken sabırlı olun. Sistemin hızına bağlı olarak veritabanı geçişlerinin tamamlanması bir veya iki dakika kadar sürebilir.

Daha fazla bilgi için bkz. ASP.NET Core projelerinde yapı iskelesiIdentity. Visual Studio yerine .NET CLI kullanma yönergeleri için bkz . dotnet aspnet-codegenerator komutu.

2FA yapılandırma sayfasına QR kodları ekleme

Bu yönergelerde Shim Sangmin'in qrcode.js kullanılır: JavaScript için tarayıcılar arası QRCode oluşturucusu (davidshimjs/qrcodejsGitHub deposu).

qrcode.min.js Kitaplığı çözümün wwwroot sunucu projesinin klasörüne indirin. Kitaplığın bağımlılıkları yok.

() bileşeninde, etiketinden Appsonra Blazor<script> bir kitaplık betiği başvurusu yerleştirin:Components/App.razor

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

EnableAuthenticator Uygulamadaki QR kod sisteminin bir parçası olan ve QR kodunu kullanıcılara görüntüleyen bileşen, gelişmiş gezinti ile statik sunucu tarafı işlemeyi (statik SSR) benimser. Bu nedenle, bileşen yüklendiğinde veya gelişmiş gezinti altında güncelleştirildiğinde normal betikler yürütülemez. Sayfa yüklendiğinde QR kodunun kullanıcı arabirimine yüklenmesini tetikleyen ek adımlar gerekir. QR kodunu yüklemeyi gerçekleştirmek için, ASP.NET Core Blazor JavaScript'te statik sunucu tarafı işleme (statik SSR) ile açıklanan yaklaşım benimsenmiştir.

Aşağıdaki JavaScript başlatıcısını sunucu projesinin wwwroot klasörüne ekleyin. Yer tutucunun {NAME} , dosyayı otomatik olarak bulup yükleyebilmesi için Blazor uygulamanın derlemesinin adı olması gerekir. Sunucu uygulamasının derleme adı ise BlazorSample, dosya olarak adlandırılır 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);
}

Aşağıdaki paylaşılan PageScript bileşeni sunucu uygulamasına ekleyin.

Components/PageScript.razor:

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

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

konumunda bulunan Components/Account/Pages/Manage/EnableAuthenticator.razorbileşen için EnableAuthenticator aşağıdaki birlikte bulunan JS dosyayı ekleyin. işlevi, onLoad bileşenin @code bloğundaki yöntemi tarafından üretilen QR kodu URI'sini qrcode.jsGenerateQrCodeUri kullanarak Sangmin kitaplığıyla QR kodunu oluşturur.

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

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

Bileşendeki <PageTitle> bileşenin PageScriptEnableAuthenticator altına, birlikte bulunan JS dosyanın yolunu içeren bileşeni ekleyin:

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

Not

Bileşenle PageScript yaklaşımı kullanmanın bir alternatifi, iyileştirilmiş gezintinin neden olduğu sayfa güncelleştirmelerini dinlemek için başlatıcıya kayıtlı bir afterWebStartedJS olay dinleyicisi (blazor.addEventListener("enhancedload", {CALLBACK})) kullanmaktır. Geri çağırma ({CALLBACK} yer tutucu) QR kodu başlatma mantığını gerçekleştirir.

ile enhancedloadgeri çağırma yaklaşımını kullanarak kod, QR kodu <div> işlenmediğinde bile her gelişmiş gezinti için yürütülür. Bu nedenle, QR kodu ekleyen kodu yürütmeden önce varlığını <div> denetlemek için ek kod eklenmelidir.

<div> QR kodu yönergelerini içeren öğeyi silin:

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

QR kodunun görünmesi gereken ve QR kodu verilerinin sayfada depolandığı iki <div> öğeyi bulun.

Aşağıdaki değişiklikleri yapın:

  • Boş <div>için öğesine öğesini id verin qrCode.
  • <div> özniteliği ile için data-url öğesine öğesini id verinqrCodeData.
- <div></div>
- <div data-url="@authenticatorUri"></div>
+ <div id="qrCode"></div>
+ <div id="qrCodeData" data-url="@authenticatorUri"></div>

Bileşenin yönteminde GenerateQrCodeUriEnableAuthenticator site adını değiştirin. Varsayılan değer şudur: Microsoft.AspNetCore.Identity.UI. Değeri, kullanıcıların diğer uygulamalar için diğer QR kodlarının yanı sıra kimlik doğrulayıcı uygulamalarında kolayca tanımlayabilecekleri anlamlı bir site adıyla değiştirin. Değer URL'sini kodlanmış olarak bırakın. Geliştiriciler genellikle şirketin adıyla eşleşen bir site adı ayarlar. Örnekler: Yahoo, Amazon, Etsy, Microsoft, Zoho.

Aşağıdaki örnekte yer tutucu, {SITE NAME} sitenin (şirket) adının bulunduğu yerdir:

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

Uygulamayı çalıştırın ve QR kodunun taranabilir olduğundan ve kodun doğrulandığından emin olun.

EnableAuthenticator başvuru kaynağındaki bileşen

Bileşen EnableAuthenticator başvuru kaynağında incelenebilir:

EnableAuthenticator başvuru kaynağındaki bileşen

Not

.NET başvuru kaynağına yönelik belge bağlantıları genellikle deponun varsayılan dalını yükler ve bu dal .NET'in sonraki sürümü için geçerli geliştirmeyi temsil eder. Belirli bir sürümün etiketini seçmek için Dalları veya etiketleri değiştir açılan listesini kullanın. Daha fazla bilgi için bkz. ASP.NET Core kaynak kodunun sürüm etiketini seçme (dotnet/AspNetCore.Docs #26205).

Ek kaynaklar