Bu sayfa, Cloud Translation API ile çevrilmiştir.

Chrome'da WebAuthn için ipuçları, İlgili Kaynak İstekleri ve JSON serileştirme tanıtımı

Chrome 128 ve 129, geçiş anahtarına dayalı kimlik doğrulama sistemleri oluşturmak için temel API olan WebAuthn için heyecan verici yeni özellikler sunar.

Eiji Kitamura

İpuçları: İpuçları, güvenen taraflara (RP'ler) tarayıcıdaki WebAuthn kullanıcı arayüzü üzerinde daha iyi kontrol sağlar. Bu özelliklere özellikle güvenlik anahtarı kullanmak isteyen kurumsal kullanıcılar erişebilir.
İlgili kaynak istekleri: RP'ler, ilgili kaynak istekleriyle geçiş anahtarlarını birden fazla alanda geçerli hale getirebilir. Birden fazla siteniz varsa artık kullanıcılarınızın geçiş anahtarlarını sitelerinizde yeniden kullanmasına izin vererek girişle ilgili zorlukları ortadan kaldırabilirsiniz.
JSON serileştirme: JSON serileştirme API'leri, WebAuthn API'ye ve API'den iletilen seçenekleri ve kimlik bilgilerini kodlayıp kodlarını çözerek bir RP'nin ön uç kodunu basitleştirmenize olanak tanır.

İpuçları

hints ile güvenen taraflar (RP), geçiş anahtarı oluşturma veya geçiş anahtarıyla kimlik doğrulama için kullanıcı arayüzü tercihlerini belirtebilir.

Daha önce, bir RP geçiş anahtarı oluşturmak veya kimlik doğrulamak için kullanıcının kullanabileceği kimlik doğrulayıcıyı kısıtlamak istediğinde "platform" veya "cross-platform" belirtmek için authenticatorSelection.authenticatorAttachment kullanabiliyordu. Bunlar, kimlik doğrulayıcıyı sırasıyla platform kimlik doğrulayıcı veya dolaşım kimlik doğrulayıcı ile sınırlandırır. hints ile bu spesifikasyon daha esnek olabilir.

RP, "security-key", "client-device" ve "hybrid"'yi bir dizi içinde tercih sırasına göre belirtmek için PublicKeyCredentialCreationOptions veya PublicKeyCredentialRequestOptions içinde isteğe bağlı hints kullanabilir.

Aşağıda, ipucu olarak "security-key" ile "cross-platform" kimlik doğrulayıcılarını tercih eden bir örnek kimlik bilgisi oluşturma isteği verilmiştir. Bu, Chrome'a kurumsal kullanıcılar için güvenlik anahtarına odaklanan bir kullanıcı arayüzü göstermesini söyler.

const credential = await navigator.credentials.create({
  publicKey: {
    challenge: *****,
    hints: ['security-key'],
    authenticatorSelection: {
      authenticatorAttachment: 'cross-platform'
    }
  }
});

İpucu olarak "güvenlik anahtarı" belirtildiğinde, tarayıcı güvenlik anahtarına odaklanan bir iletişim kutusu gösterir. — İpucu olarak "security-key" belirtildiğinde tarayıcı, güvenlik anahtarına odaklanan bir iletişim kutusu gösterir.

Bir RP, cihazlar arası doğrulama senaryosuna öncelik vermek istediğinde ipucu olarak "hybrid" ile "cross-platform" kimlik doğrulayıcıları tercih eden bir kimlik doğrulama isteği gönderebilir.

const credential = await navigator.credentials.create({
  publicKey: {
    challenge: *****,
    residentKey: true,
    hints: ['hybrid']
    authenticatorSelection: {
      authenticatorAttachment: 'cross-platform'
    }
  }
});

İpucu olarak "karma"yı belirttiğinizde tarayıcı, cihazlar arası giriş odaklı bir iletişim kutusu gösterir. — İpucu olarak "karma" belirtildiğinde tarayıcı, cihazlar arası oturum açmaya odaklanan bir iletişim kutusu gösterir.

İlgili Kaynak İstekleri ile RP'ler geçiş anahtarlarını birden fazla alandan kullanılabilir hale getirebilir. Merkezi bir giriş deneyimi oluşturmak ve federasyon protokollerini kullanmak, çoğu site için önerilen çözüm olmaya devam etmektedir. Ancak birden fazla alanınız varsa ve federasyon mümkün değilse ilgili kaynaklar çözüm olabilir.

Tüm WebAuthn isteklerinde bir güvenen taraf kimliği (RP kimliği) belirtilmelidir ve tüm geçiş anahtarları tek bir RP kimliğiyle ilişkilendirilir. Geleneksel olarak bir kaynak, alan adına dayalı olarak yalnızca bir RP kimliği belirtebiliyordu. Bu durumda www.example.co.uk, example.co.uk değerinde bir RP kimliği belirtebiliyordu ancak example.com değerini belirtebiliyordu. İlgili Kaynak İstekleri ile, hak talebinde bulunulan RP kimliği, hedef alandaki /.well-known/webauthn adresinde bulunan iyi bilinen bir JSON dosyası getirilerek doğrulanabilir. Bu nedenle, example.com aşağıdaki biçimde belirtilirse example.co.uk (ve example.in, example.de vb.) tümü example.com RP kimliğini kullanabilir:

URL: https://example.com/.well-known/webauthn

{
  "origins": [
    "https://example.co.uk",
    "https://example.de",
    "https://example.sg",
    "https://example.net",
    "https://exampledelivery.com",
    "https://exampledelivery.co.uk",
    "https://exampledelivery.de",
    "https://exampledelivery.sg",
    "https://myexamplerewards.com",
    "https://examplecars.com"
  ]
}

İlgili Kaynak İstekleri ile sitelerinizde geçiş anahtarının yeniden kullanılmasına izin verme başlıklı makalede İlgili Kaynak İstekleri'ni nasıl ayarlayacağınızı öğrenin.

JSON serileştirme

WebAuthn istek ve yanıt nesneleri, ArrayBuffer içinde ham ikili veriler içeren birden fazla alana (ör. kimlik bilgisi kimliği, kullanıcı kimliği veya istem) sahiptir. Bir web sitesi bu verileri sunucusuyla paylaşmak için JSON kullanmak istiyorsa ikili veriler önce kodlanmalıdır (ör. Base64URL ile). Bu durum, web sitelerinde geçiş anahtarlarını kullanmaya başlamak isteyen geliştiriciler için gereksiz bir karmaşıklık oluşturur.

WebAuthn artık PublicKeyCredentialCreationOptions ve PublicKeyCredentialRequestOptions WebAuthn istek nesnelerini doğrudan JSON'dan ayrıştırmak ve PublicKeyCredential yanıtını doğrudan JSON biçiminde serileştirmek için API'ler sunuyor. Ham ikili veriler taşıyan tüm ArrayBuffer değerli alanlar, Base64URL kodlu değerlerine otomatik olarak dönüştürülür veya bu değerlerden dönüştürülür. Bu API'ler Chrome 129'dan itibaren kullanılabilir.

Geçiş anahtarı oluşturmadan önce, sunucudan JSON kodlu bir PublicKeyCredentialCreationOptions nesnesi alın ve PublicKeyCredential.parseCreationOptionsFromJSON() kullanarak kodunu çözün.

Tarayıcı desteği

Kaynak

export async function registerCredential() {

  // Fetch encoded `PublicKeyCredentialCreationOptions`
  // and JSON decode it.
  const options = await fetch('/auth/registerRequest').json();

  // Decode `PublicKeyCredentialCreationOptions` JSON object
  const decodedOptions = PublicKeyCredential.parseCreationOptionsFromJSON(options);  

  // Invoke the WebAuthn create() function.
  const cred = await navigator.credentials.create({
    publicKey: decodedOptions,
  });
  ...

Geçiş anahtarı oluşturduktan sonra, sunucuya gönderilebilmesi için sonuçta elde edilen kimlik bilgisini toJSON() kullanarak kodlayın.

Tarayıcı Desteği

Kaynak

  ...
  const cred = await navigator.credentials.create({
    publicKey: options,
  });

  // Encode the credential to JSON and stringify
  const credential = JSON.stringify(cred.toJSON());

  // Send the encoded credential to the server
  await fetch('/auth/registerResponse', credential);
  ...

Geçiş anahtarıyla kimlik doğrulamadan önce sunucudan JSON kodlu bir PublicKeyRequestCreationOptions alın ve PublicKeyCredential.parseRequestOptionsFromJSON() kullanarak kodunu çözün.

Tarayıcı desteği

Kaynak

export async function authenticate() {

  // Fetch encoded `PublicKeyCredentialRequestOptions`
  // and JSON decode it.
  const options = await fetch('/auth/signinRequest').json();

  // Decode `PublicKeyCredentialRequestOptions` JSON object
  const decodedOptions = PublicKeyCredential.parseRequestOptionsFromJSON(options);

  // Invoke the WebAuthn get() function.
  const cred = await navigator.credentials.get({
    publicKey: options
  });
  ...

Geçiş anahtarıyla kimlik doğrulaması yaptıktan sonra, elde edilen kimlik bilgisini sunucuya gönderilebilmesi için toJSON() yöntemini kullanarak kodlayın.

Tarayıcı desteği

Kaynak

  ...
  const cred = await navigator.credentials.get({
    publicKey: options
  });

  // Encode the credential to JSON and stringify
  const credential = JSON.stringify(cred.toJSON());

  // Send the encoded credential to the server
  await fetch(`/auth/signinResponse`, credential);
  ...

Daha fazla bilgi

WebAuthn ve geçiş anahtarları hakkında daha fazla bilgi edinmek için aşağıdaki kaynaklara göz atın:

Chrome'da WebAuthn için ipuçları, İlgili Kaynak İstekleri ve JSON serileştirme tanıtımı

İpuçları

İlgili kaynak istekleri

JSON serileştirme

Daha fazla bilgi