Webauthn | Javascript İstemcisi

WebAuthn (Web Authentication API), açık anahtar kriptografisi kullanarak güvenli, parolasız kimlik doğrulamayı etkinleştiren bir W3C standardıdır. Parolalar yerine kullanıcılar, donanım tabanlı kimlik doğrulayıcılar (parmak izi okuyucuları, Face ID, YubiKeys vb. gibi) veya platform kimlik doğrulayıcıları (Touch ID gibi yerleşik) kullanarak kayıt olur ve kimlik doğrular.

 

Bir Javascript istemcisi kullanarak Kaydı ve Kimlik Doğrulamasını nasıl ele alacağınızı aşağıda bulun.

WebAuthn Kayıt

WebAuthn Kaydı nasıl çalışır

 

• Kullanıcı Kaydı Başlatır:

  • Kullanıcı bir kullanıcı adı sağlar ve Register öğesine tıklar.

• Tarayıcı Sunucudan Options İster:

  • Ön uç (frontend), kayıt seçeneklerini almak için bir POST isteği yapar.

• Tarayıcı Kimlik Bilgileri Oluşturur:

  • SimpleWebAuthnBrowser.startRegistration() aracılığıyla navigator.credentials.create() API'sini kullanarak bir kimlik bilgisi oluşturulur.

• Sunucu Kaydı Doğrular:

  • Tarayıcı, kimlik bilgisini sunucuya geri gönderir.

  • Sunucu, kaydı doğrular ve o kullanıcı için public key'i saklar.

 

 

TsgcWSAPIServer_WebAuthn bileşeni, WebAuthn protokolünü test etmek için bir html dosyasına sahiptir. Bu HTML dosyası, WebAuthn ile etkileşim kurmak için minimal bir UI ve JavaScript içerir.

 

sgcWebAuthn.html'in İncelemesi

 

Yapı Genel Bakışı:

 

• Username Input: Kullanıcının tanımlayıcısını yakalar.

• Düğmeler:

  • Register – WebAuthn kaydını başlatır.

  • Authenticate – oturum açmayı başlatır (benzer şekilde işlenir).

• Hata Ayıklama Konsolu: Gerçek zamanlı hata ayıklama bilgisini gösterir (WebAuthn'dan JSON).

 

 

1. Girdi için HTML Kullanıcı Arabirimi

 

<input type="text" id="username" name="username" autocomplete="username webauthn" />
<button id="btnRegBegin"><strong>Register</strong></button>

 

2. JavaScript: Düğme Tıklama İşleyicisi

 

document.querySelector('#btnRegBegin').addEventListener('click', async () => {
const username = document.getElementById("username").value;
if (username == "") {
document.getElementById('Error').innerText = 'Please enter a username to register';
return;
}

const resp = await fetch('<#webauthn_registration_options>', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ username, algorithms: [] })
});

const options = await resp.json();
const attResp = await startRegistration(options); // WebAuthn API

 

3. Sunucu Yanıtı (HTML'de Sahte Uç Nokta)

 

fetch('/sgcWebAuthn/Registration/Options', ...)

fetch('/sgcWebAuthn/Registration/Verify', ...)

 

4. Kaydı Sonlandırma

 

const verificationResp = await fetch('/webauthn/register/verify', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(attResp)
});

const verificationJSON = await verificationResp.json();
if (verificationJSON && verificationJSON.verified) {
document.getElementById('Success').innerHTML = `Authenticator registered!`;
}

 

 

 

WebAuthn Kimlik Doğrulama

WebAuthn Kimlik Doğrulaması nasıl çalışır

 

• Kullanıcı Kimlik Doğrulamayı Başlatır:

  • Kullanıcı bir kullanıcı adı sağlar ve Register öğesine tıklar.

• Tarayıcı Sunucudan Options İster:

  • Ön uç, kimlik doğrulama seçeneklerini almak için bir POST isteği yapar.

• Tarayıcı Kimlik Bilgileri Oluşturur:

  • SimpleWebAuthnBrowser.startAuthentication() aracılığıyla navigator.credentials.get() API'sini kullanma.

• Sunucu Kimlik Doğrulamasını Doğrular:

  • Tarayıcı kimlik bilgisini sunucuya geri gönderir.

  • Sunucu, imzalı sonucu doğrular.

 

1. HTML UI Kurulumu

 

<div class="container">
<h1>WebAuthn Authentication Sample</h1>

<section id="userdata">
<label for="username">Username:</label>
<input type="text" id="username" name="username" autocomplete="username webauthn" autofocus />
</section>

<button id="btnAuthBegin"><strong>Authenticate</strong></button>

<p id="Success" class="success"></p>
<p id="Error" class="error"></p>

<details open>
<summary>Console</summary>
<textarea id="Debug"></textarea>
</details>
</div>

 

2. Kimlik Doğrulama Seçeneklerini Alın

 

startAuthentication çağrısından önce, kullanıcı adını sunucuya gönderirsiniz

 

const resp = await fetch('<#webauthn_authentication_options>', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
username: document.getElementById("username").value,
user_verification: 'preferred'
}),
});

 

Sunucu, aşağıdakileri içeren bir JSON nesnesiyle yanıt verir:

 

{
"challenge": "base64url-encoded-random-string",
"allowCredentials": [
{
"id": "base64url-credential-id",
"type": "public-key"
}
],
"userVerification": "preferred",
"rpId": "yourdomain.com"
}

 

Buna PublicKeyCredentialRequestOptions denir.

 

 

3. Authenticator Yanıtını Alın

 

asseResp şuna benzer (basitleştirilmiş):

 

{
"id": "credentialId",
"rawId": "base64url-encoded-id",
"response": {
"authenticatorData": "...",
"clientDataJSON": "...",
"signature": "...",
"userHandle": "..."
},
"type": "public-key",
"clientExtensionResults": {}
}

 

Bu yanıt, kullanıcının şunu kanıtlar:

• Authenticator'da saklanan özel anahtara sahiptir
• Sunucunun challenge'ını imzaladı
• Fiziksel olarak mevcuttu (gerekiyorsa)

 

 

 

4. İmzalı Kimlik Doğrulama Yanıtını Sunucuya Gönderin

 

Kullanıcı kimlik doğrulayıcısıyla etkileşime girdikten sonra (startAuthentication() aracılığıyla), JavaScript'te bir yanıt nesnesi alırsınız.

 

const verificationResp = await fetch('/webauthn/authenticate/verify', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(asseResp), // this is the signed response
});

 

 

5. Sunucunun Yanıtını Alın

 

Sunucu şuna benzer bir sonuçla yanıt verir:

 

{ "verified": true }

 

Ya da bir şeyler ters giderse:

 

{ "verified": false, "error": "Invalid signature" }

 

Ve bunu frontend kodunuzda işlersiniz:

 

const result = await verificationResp.json();

if (result.verified) {
document.getElementById('Success').textContent = 'User authenticated!';
} else {
document.getElementById('Error').textContent = 'Authentication failed!';
}