Chrome में WebAuthn के लिए पेश है संकेत, मिलते-जुलते ऑरिजिन अनुरोध, और JSON को क्रम में लगाना

Chrome 128 और 129 में, WebAuthn के लिए बेहतरीन नई सुविधाएं जोड़ी गई हैं— बुनियादी एपीआई, जिससे पासकी पर आधारित पुष्टि करने वाले सिस्टम बनाए जा सकते हैं.

Eiji Kitamura

  • संकेत: संकेत, भरोसेमंद पक्षों (आरपी) को WebAuthn पर बेहतर कंट्रोल देते हैं ब्राउज़र में यूज़र इंटरफ़ेस (यूआई) की इमेज. ये खास तौर पर उन एंटरप्राइज़ उपयोगकर्ताओं के लिए मददगार हैं जो इस्तेमाल करें.
  • मिलते-जुलते ऑरिजिन के अनुरोध: मिलते-जुलते ऑरिजिन के साथ अनुरोध करते हैं, तो आरपी एक से ज़्यादा डोमेन पर पासकी को मान्य बना सकते हैं. अगर आपके पास कई अब आपके पास यह विकल्प है कि उपयोगकर्ता आपकी साइटों पर अपनी पासकी दोबारा इस्तेमाल कर सकें. साथ ही, लॉगिन करने में आने वाली दिक्कतों को दूर नहीं किया जा सकता.
  • JSON को क्रम में लगाने की सुविधा: JSON को क्रम में लगाने वाले एपीआई की मदद से, आरपी के फ़्रंटएंड कोड को आसान बनाया जा सकता है. ऐसा करने के लिए, कोड में बदलने के विकल्प दिए जाते हैं और WebAuthn API को और उससे पास किए गए क्रेडेंशियल.

संकेत

hints के साथ, भरोसेमंद पार्टी (आरपी) अब पासकी से साइन इन करें या पासकी से पुष्टि करें.

पहले, जब कोई आरपी, पुष्टि करने वाले उस टूल पर पाबंदी लगाना चाहता था जिसका इस्तेमाल करके, आरपी उसका इस्तेमाल कर सकता है पासकी बना सकते हैं या पुष्टि करने के लिए, इनका इस्तेमाल कर सकते हैं "platform" या तय करने के लिए authenticatorSelection.authenticatorAttachment "cross-platform". साथ ही, पुष्टि करने वाले को एक-दूसरे के प्लैटफ़ॉर्म तक सीमित कर दिया जाता है पुष्टि करने वाला या रोमिंग पुष्टि करने वाला. hints के साथ, इस स्पेसिफ़िकेशन में ज़्यादा बदलाव किए जा सकते हैं.

PublicKeyCredentialCreationOptions में आरपी, वैकल्पिक hints का इस्तेमाल कर सकता है या "security-key" बताने के लिए PublicKeyCredentialRequestOptions, किसी कलेक्शन में प्राथमिकता के क्रम में "client-device" और "hybrid".

क्रेडेंशियल बनाने के अनुरोध का एक उदाहरण नीचे दिया गया है, जिसमें संकेत के तौर पर, "security-key" से "cross-platform" पुष्टि करने वाले. इससे पता चलता है कि Chrome, एंटरप्राइज़ उपयोगकर्ताओं को सुरक्षा कुंजी वाला यूज़र इंटरफ़ेस (यूआई) दिखाएगा.

const credential = await navigator.credentials.create({
  publicKey: {
    challenge: *****,
    hints: ['security-key'],
    authenticatorSelection: {
      authenticatorAttachment: 'cross-platform'
    }
  }
});
अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
'सुरक्षा-कुंजी' दर्ज करके इस विंडो में, ब्राउज़र सुरक्षा कुंजी वाला एक डायलॉग दिखाता है.
'सुरक्षा-कुंजी' दर्ज करके इस इमेज में एक डायलॉग दिखाया जाता है, जिसमें सुरक्षा कुंजी पर फ़ोकस किया गया एक डायलॉग दिखाया जाता है.

जब कोई आरपी, क्रॉस-डिवाइस पर पुष्टि करने की प्रोसेस को प्राथमिकता देना चाहता है, तो वह ये काम कर सकता है: पुष्टि करने का एक अनुरोध भेजें, जो "cross-platform" Authenticator को प्राथमिकता देता हो "hybrid" से संकेत के रूप में.

const credential = await navigator.credentials.create({
  publicKey: {
    challenge: *****,
    residentKey: true,
    hints: ['hybrid']
    authenticatorSelection: {
      authenticatorAttachment: 'cross-platform'
    }
  }
});
अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
'हाइब्रिड' तय करके ब्राउज़र, क्रॉस-डिवाइस लॉगिन पर फ़ोकस करने वाला डायलॉग दिखाता है.
'हाइब्रिड' दर्ज करके ब्राउज़र आपको संकेत के तौर पर, क्रॉस-डिवाइस लॉगिन पर फ़ोकस करने वाला डायलॉग दिखाता है.

मिलते-जुलते ऑरिजिन के साथ अनुरोध और प्रतिबंधित पार्टी ये कर सकती हैं पासकी को एक से ज़्यादा डोमेन से इस्तेमाल किया जा सकता है. एक ही जगह से लॉगिन करने की सुविधा बनाना अनुभव और फ़ेडरेशन प्रोटोकॉल का इस्तेमाल करना, इन मामलों में सबसे बेहतर समाधान है साइट पर जाएं. लेकिन यदि आप एकाधिक डोमेन के स्वामी हैं और फ़ेडरेशन संभव नहीं है, संबंधित ऑरिजिन एक समाधान हो सकते हैं.

WebAuthn अनुरोधों में किसी भरोसेमंद पक्ष का आईडी (आरपी आईडी) और सभी पासकी शामिल होनी चाहिए एक ही आरपी आईडी से जुड़े हों. पारंपरिक रूप से, एक ऑरिजिन सिर्फ़ यह बता सकता है आरपी आईडी, उसके डोमेन पर आधारित हो. इसलिए, इस मामले में www.example.co.uk यह जानकारी दे सकता है example.co.uk का आरपी आईडी, लेकिन example.com नहीं. संबंधित ऑरिजिन के साथ अनुरोध, जानी-मानी JSON फ़ाइल को फ़ेच करके, उस आरपी आईडी की पुष्टि की जा सकती है जिस पर दावा किया गया है टारगेट डोमेन से /.well-known/webauthn पर मौजूद है. इसलिए, example.co.uk (और example.in, example.de वगैरह) example.com, अगर 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"
  ]
}

मिलती-जुलती शुरुआत की जगह के अनुरोध सेट अप करने का तरीका जानने के लिए, अपने अलग-अलग प्लैटफ़ॉर्म पर पासकी का फिर से इस्तेमाल करने की अनुमति दें मिलती-जुलती ऑरिजिन वाली साइटें अनुरोध.

JSON को क्रम से लगाना

WebAuthn अनुरोध और रिस्पॉन्स ऑब्जेक्ट में ऐसे कई फ़ील्ड होते हैं जिनमें रॉ कॉन्टेंट होता है ArrayBuffer में मौजूद बाइनरी डेटा, जैसे कि क्रेडेंशियल आईडी, यूज़र आईडी या चैलेंज. अगर कोई वेबसाइट अपने सर्वर के साथ डेटा का लेन-देन करने के लिए JSON का इस्तेमाल करना चाहती है, तो बाइनरी पहले डेटा को एन्कोड करना होगा, जैसे कि Base64URL के साथ. इससे गैर-ज़रूरी यह उन डेवलपर के लिए मुश्किल है जो अपनी वेबसाइटों पर पासकी का इस्तेमाल शुरू करना चाहते हैं.

WebAuthn अब पार्स करने के लिए एपीआई की सुविधा देता है PublicKeyCredentialCreationOptions और PublicKeyCredentialRequestOptions WebAuthn सीधे JSON से ऑब्जेक्ट का अनुरोध करता है और PublicKeyCredential JSON में ही जवाब भेजा जा सकता है. अरेबफ़र की वैल्यू वाले सभी फ़ील्ड, जिनमें रॉ बाइनरी मौजूद होती है डेटा, Base64URL की कोड में बदली गई वैल्यू से या उनके कोड में अपने-आप बदल जाता है. ये एपीआई, Chrome 129 में उपलब्ध हैं.

पासकी बनाने से पहले, कोड में बदली गई JSON फ़ाइल फ़ेच करें सर्वर से PublicKeyCredentialCreationOptions ऑब्जेक्ट को एक्सपोर्ट करता है और इसका इस्तेमाल करके उसे डिकोड करता है PublicKeyCredential.parseCreationOptionsFromJSON().

ब्राउज़र सहायता

  • Chrome: 129. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 129. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: 119. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Safari: समर्थित नहीं. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

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

पासकी बनाने के बाद, toJSON() का इस्तेमाल करके उस क्रेडेंशियल को कोड में बदलें इसे सर्वर पर भेजा जा सकता है.

ब्राउज़र सहायता

  • Chrome: 129. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 129. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: 119. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Safari: समर्थित नहीं. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

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

पासकी की मदद से पुष्टि करने से पहले, कोड में बदला गया JSON फ़ेच करें PublicKeyRequestCreationOptions को सर्वर से लिया है और इसका इस्तेमाल करके इसे डिकोड किया है PublicKeyCredential.parseRequestOptionsFromJSON().

ब्राउज़र सहायता

  • Chrome: 129. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 129. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: 119. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Safari: समर्थित नहीं. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

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

पासकी की मदद से पुष्टि करने के बाद, जवाब मिलने वाले क्रेडेंशियल को कोड में बदलने के लिए, इनका इस्तेमाल करें toJSON() तरीका सेट अप किया है, ताकि इसे सर्वर पर भेजा जा सके.

ब्राउज़र सहायता

  • Chrome: 129. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 129. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: 119. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Safari: समर्थित नहीं. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

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

ज़्यादा जानें

WebAuthn और पासकी के बारे में ज़्यादा जानने के लिए, इन संसाधनों को देखें: