ASP.NET Core Blazor Web App'te TOTP kimlik doğrulayıcı uygulamaları için QR kodu oluşturmayı etkinleştirme
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 . ASP.NET Core kod oluşturucu aracı ('aspnet-codegenerator').
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/qrcodejs
GitHub 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 App
sonra 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.razor
bileş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.js
GenerateQrCodeUri
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 PageScript
EnableAuthenticator
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 afterWebStarted
JS olay dinleyicisi (blazor.addEventListener("enhancedload", {CALLBACK})
) kullanmaktır. Geri çağırma ({CALLBACK}
yer tutucu) QR kodu başlatma mantığını gerçekleştirir.
ile enhancedload
geri ç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 öğesiniid
verinqrCode
. <div>
özniteliği ile içindata-url
öğesine öğesiniid
verinqrCodeData
.
- <div></div>
- <div data-url="@authenticatorUri"></div>
+ <div id="qrCode"></div>
+ <div id="qrCodeData" data-url="@authenticatorUri"></div>
Bileşenin yönteminde GenerateQrCodeUri
EnableAuthenticator
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
ASP.NET Core
Geri Bildirim
https://aka.ms/ContentUserFeedback.
Çok yakında: 2024 boyunca, içerik için geri bildirim mekanizması olarak GitHub Sorunları’nı kullanımdan kaldıracak ve yeni bir geri bildirim sistemiyle değiştireceğiz. Daha fazla bilgi için bkz.Gönderin ve geri bildirimi görüntüleyin