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, WebAuthn için heyecan verici yeni özellikler sunar: geçiş anahtarı tabanlı kimlik doğrulama sistemleri oluşturmak için temel API.

Eiji Kitamura

İpuçları: İpuçları, bağlı tarafların (RP'ler) WebAuthn üzerinde daha iyi kontrol sahibi olmasını sağlar Tarayıcıdaki kullanıcı arayüzü. Bu özellikler, özellikle de geçiş yapmak isteyen kurumsal güvenlik anahtarlarını kullanabilir.
İlgili kaynak istekleri: İlgili kaynakla RP'ler, geçiş anahtarlarını birden fazla alan adında geçerli hâle getirebilir. Birden fazla artık kullanıcılarınızın geçiş anahtarlarını sitelerinizde tekrar kullanmalarını sağlayabilirsiniz. Böylece girişle ilgili zorluklar ortadan kalkmış olur.
JSON serileştirme: JSON serileştirme API'leri, seçenekleri kodlama ve kod çözme yoluyla bir RP'nin ön uç kodunu basitleştirmenizi sağlar ve WebAuthn API'ye veya WebAuthn API'den iletilen kimlik bilgileri.

İpuçları

hints ile, bağlı taraflar (RP) artık bir oluşturmak için kullanıcı arayüzü tercihlerini belirtebilir geçiş anahtarı veya geçiş anahtarıyla kimlik doğrulaması yapma.

Önceden kısıtlanmış taraf, kullanıcının kimlik doğrulayıcıyı yalnızca tek tek geçiş anahtarı oluşturabilir veya kimlik doğrulaması için "platform" belirtmek için authenticatorSelection.authenticatorAttachment veya "cross-platform". Bunlar sırasıyla kimlik doğrulayıcıyı bir platformla sınırlandırırlar. kimlik doğrulayıcı veya dolaşımda kimlik doğrulayıcı. hints ile bu spesifikasyon daha esnek olabilir.

Kısıtlanmış taraf, isteğe bağlı PublicKeyCredentialCreationOptions içinde isteğe bağlı hints veya "security-key" belirtmek için PublicKeyCredentialRequestOptions, Bir dizide, tercih sırasına göre "client-device" ve "hybrid".

Aşağıda, İpucu olarak "security-key" ile "cross-platform" kimlik doğrulayıcı. Bu durum Chrome, kurumsal kullanıcılar için güvenlik anahtarı odaklı bir kullanıcı arayüzü gösterir.

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

"security-key" değerini belirterek tarayıcıda güvenlik anahtarı odaklı bir iletişim kutusu gösterilir. — "güvenlik-anahtarı"nı belirterek tarayıcıda güvenlik anahtarına odaklanan bir iletişim kutusu gösteriliyor.

Kısıtlanmış taraf, cihazlar arası doğrulama senaryosuna öncelik vermek istediğinde "cross-platform" kimlik doğrulayıcıyı tercih eden bir kimlik doğrulama isteği gönder "hybrid" ile başlayın.

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

"Karma" değerini belirterek tarayıcıda, cihazlar arası giriş odaklı bir iletişim kutusu gösterilir. — "Karma" değerini belirterek Tarayıcıda, cihazlar arası giriş odaklı bir iletişim kutusu gösteriliyor.

ziyaret edin.

İlgili Kökenli İstekler ise RP'ler geçiş anahtarlarını birden fazla alan adından kullanılabilir hale getirebilirsiniz. Merkezi giriş oluşturma ve federasyon protokollerini kullanmak hâlâ çoğu sitede bulabilirsiniz. Ancak birden fazla alanınız varsa ve federasyon mümkün değilse ilgili kaynaklar çözüm olabilir.

Tüm WebAuthn isteklerinde bağlı taraf kimliği (RP kimliği) ve tüm geçiş anahtarları belirtilmelidir tek bir RP kimliğiyle ilişkili olmalıdır. Geleneksel olarak, bir kaynak yalnızca alanına dayalı bir Kısıtlanmış Taraf Kimliği. Bu durumda www.example.co.uk, Kısıtlanmış taraf kimliği example.co.uk olmalı, example.com olmamalıdır. İlgili Kökenli İstekler; talep edilen bir RP kimliği, iyi bilinen bir JSON dosyası getirilerek doğrulanabilir Hedef alandan /.well-known/webauthn adresinde bulunanlar. Yani example.co.uk (ve example.in, example.de vb.) tamamı şu Kısıtlanmış Taraf Kimliği kullanabilir example.com bunları aşağıdaki biçimde belirtiyorsa example.com:

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'ni nasıl oluşturacağınızı öğrenmek için Geçiş anahtarının şu cihazlarınızda yeniden kullanılmasına izin verme: İlişkili Köklü siteler İstekler.

JSON serileştirme

WebAuthn istek ve yanıt nesnelerinde, RAW içeren birden çok alan bulunur ArrayBuffer'daki kimlik bilgisi kimliği, kullanıcı kimliği veya sorgulama gibi ikili veriler. Bir web sitesi bu verileri sunucusuyla değiş tokuş etmek için JSON kullanmak isterse ikili program verilerinin ilk olarak (örneğin, Base64URL ile) kodlanması gerekir. Bu, projenin yürütülmesi sırasında web sitelerinde geçiş anahtarı kullanmaya başlamak isteyen geliştiriciler için daha karmaşıktır.

WebAuthn artık ayrıştırılacak API'ler sunuyor PublicKeyCredentialCreationOptions ve PublicKeyCredentialRequestOptions WebAuthn nesnelerini doğrudan JSON dosyasından yapabilir ve PublicKeyCredential JSON biçiminde bir yanıt oluşturabilirsiniz. Ham ikili program içeren tüm ArrayBuffer değerli alanlar verileri otomatik olarak Base64URL kodlamalı değerlerine veya bu değerlere dönüştürülür. Bu API'ler Chrome 129 sürümünde kullanılabilir.

Geçiş anahtarı oluşturmadan önce JSON kodlu bir kod getirin PublicKeyCredentialCreationOptions nesnesini sorgulayın ve bunu PublicKeyCredential.parseCreationOptionsFromJSON().

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, elde edilen kimlik bilgisini toJSON() kullanarak kodlayın. sunucuya gönderilebileceğinden emin olun.

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ğrulaması yapmadan önce JSON kodlu bir dosya getirin. PublicKeyRequestCreationOptions kodlayıcısını kullanarak kodu çözün ve kodunu PublicKeyCredential.parseRequestOptionsFromJSON().

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 toJSON() yöntemini çağırı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