पासकी बनाने की शर्त (लॉगिन करने के बाद प्रमोशन)

इस गाइड में बताया गया है कि पासवर्ड से साइन इन करने के तुरंत बाद, उपयोगकर्ता के लिए पासकी को अपने-आप और बिना किसी सूचना के कैसे रजिस्टर किया जाए. इससे, पासकी को आसानी से और ज़्यादा से ज़्यादा इस्तेमाल किया जा सकेगा.

ट्रिगर करने का सही समय

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

• पासवर्ड के बिना साइन इन करने के फ़्लो के लिए, कंडीशनल क्रिएशन की सुविधा का इस्तेमाल न करें. जैसे, मैजिक लिंक, एसएमएस ओटीपी या आइडेंटिटी फ़ेडरेशन.
• अगर कई चरणों में पुष्टि करने की सुविधा चालू करना ज़रूरी है, तो आपको शर्त के हिसाब से खाता बनाने की प्रोसेस शुरू करने से पहले, पुष्टि के सभी चरणों के पूरा होने का इंतज़ार करना होगा.
• क्रिएशन एंडपॉइंट पर अनुरोध करने से पहले, पक्का करें कि उपयोगकर्ता का मान्य और पुष्टि किया गया सेशन चालू हो.

लागू करने के चरण

1. जानकारी ऑटोमैटिक भरने की पिछली कार्रवाइयां रद्द करें

अगर साइन-इन पेज पर, फ़ॉर्म को जानकारी अपने-आप भरने की सुविधा (कंडिशनल यूज़र इंटरफ़ेस/Get) का इस्तेमाल किया जाता है, तो क्रेडेंशियल पाने के लिए किए गए कॉल को रद्द करना होगा. इससे ब्राउज़र से जुड़ी समस्याओं से बचा जा सकता है.

• navigator.credentials.create() को कॉल करने से पहले, navigator.credentials.get() की जानकारी ऑटोमैटिक भरने के अनुरोध के साथ अटैच किए गए AbortController पर abortController.abort() को कॉल करें.

2. सुविधा की पहचान करना

PublicKeyCredential.getClientCapabilities() के साथ conditionalCreate की जांच करके, यह पता लगाएं कि कंडीशनल क्रिएट की सुविधा उपलब्ध है या नहीं.

const capabilities = await PublicKeyCredential.getClientCapabilities();
if (capabilities.conditionalCreate) {
  // Conditional create is available
}

3. कंडिशनल क्रिएट की मदद से पासकी बनाना

• navigator.credentials.create() विकल्पों में mediation: 'conditional' पास करें. इससे ब्राउज़र को बैकग्राउंड में या कॉन्टेक्स्ट के हिसाब से, पासकी बनाने के फ़्लो को बिना किसी रुकावट के मैनेज करने का सिग्नल मिलता है. इससे, रुकावट डालने वाले मॉडल डायलॉग नहीं दिखते.
• excludeCredentials को उपयोगकर्ता के मौजूदा पासकी क्रेडेंशियल आईडी से भरें, ताकि डुप्लीकेट पासकी रजिस्टर न हों.

4. गड़बड़ी को साइलेंट तरीके से मैनेज करना

• पासकी बनाने के प्रॉम्प्ट (navigator.credentials.create) को try/catch ब्लॉक में रैप करें. आपको इस्तेमाल करने वाले लोगों के लिए उपलब्ध सामान्य अपवादों (InvalidStateError, NotAllowedError, AbortError) को पकड़ना होगा और उन्हें अनदेखा करना होगा. इसके लिए, उपयोगकर्ता को कोई गड़बड़ी वाला यूज़र इंटरफ़ेस (यूआई) न दिखाएं.

5. सर्वर-साइड पर उपयोगकर्ता की मौजूदगी की पुष्टि करना

• सर्वर साइड से की जाने वाली पुष्टि के एंडपॉइंट को, उपयोगकर्ता की मौजूदगी (यूपी) की शर्त (requireUserPresence: false) में छूट देनी चाहिए. ऐसा सिर्फ़ तब करना चाहिए, जब शर्त के आधार पर क्रेडेंशियल बनाने वाले ट्रिगर से जनरेट किए गए क्रेडेंशियल की पुष्टि की जा रही हो. साफ़ तौर पर अश्लील कॉन्टेंट बनाने के लिए, मौजूदगी की पुष्टि करने की सुविधा को हमेशा चालू रखना होगा.

6. सर्वर की पुष्टि न होने पर, गड़बड़ी को सही तरीके से मैनेज करना

• अगर navigator.credentials.create() सफल हो जाता है, लेकिन सर्वर की पुष्टि करने के लिए फ़ेच करने पर गलत जवाब मिलता है (उदाहरण के लिए, हस्ताक्षर की पुष्टि नहीं हो पाती है), तो PublicKeyCredential.signalUnknownCredential() को कॉल करें. इससे, पासकी की सेवा देने वाली कंपनी के पास मौजूद ऐसे क्रेडेंशियल को रोका जा सकता है जिनका कोई मालिक नहीं है.

कोड का उदाहरण

// optionsFetch and registerVerifyFetch are app-defined server endpoint requests
import { optionsFetch, registerVerifyFetch } from './api.js';

async function triggerConditionalCreate(loginAbortController) {
  const capabilities = await PublicKeyCredential.getClientCapabilities();
  if (capabilities.conditionalCreate !== true) {
    return; // Platform does not support conditional creation
  }

  // 1. Abort any active autofill conditional-get controllers to clear the WebAuthn pipeline
  loginAbortController.abort();

  // 2. Fetch creation options signaling the backend that this is a conditional request
  const creationOptionsJSON = await optionsFetch({ conditional: true });
  const publicKey = PublicKeyCredential.parseCreationOptionsFromJSON(creationOptionsJSON);

  let credential;
  try {
    // 3. Invoke silent credentials creation prompt
    credential = await navigator.credentials.create({ 
      publicKey,
      mediation: 'conditional' // Silent background creation mediation
    });
  } catch (e) {
    // 4. Silently swallow common WebAuthn browser exceptions
    if (['InvalidStateError', 'NotAllowedError', 'AbortError'].includes(e.name)) {
      return; 
    }
    console.error('Unexpected conditional create error:', e);
    return;
  }

  // 5. Server verification step using dedicated Try/Catch block
  let encodedResponse = credential.toJSON();
  try {
    const response = await registerVerifyFetch(encodedResponse);
    if (!response.ok) {
      // If the server verification fails, clean up using Signal API
      if (PublicKeyCredential.signalUnknownCredential) {
        await PublicKeyCredential.signalUnknownCredential({
          rpId, // RP ID must match the one defined on the server
          credentialId: encodedResponse.id
        });
      }
    }
  } catch (serverErr) {
    console.error('Verification network failure:', serverErr);
    if (PublicKeyCredential.signalUnknownCredential) {
      await PublicKeyCredential.signalUnknownCredential({
        rpId, // RP ID must match the one defined on the server
        credentialId: encodedResponse.id
      });
    }
  }
}

फ़ॉलबैक रणनीतियां

पासकी की सुविधा का पता लगाने के लिए फ़ॉलबैक

हमेशा 'webauthn-polyfills' इंस्टॉल करें और उसे कॉन्टेक्स्ट में इंपोर्ट करें. ध्यान रखें कि जब तक PublicKeyCredential का इस्तेमाल किया जा सकता है, तब तक PublicKeyCredential.getClientCapabilities का भी इस्तेमाल किया जा सकता है.

import 'webauthn-polyfills';

Signal API Synchronization Fallback

WebAuthn Signal API (webauthn-signals) एक प्रोग्रेसिव ऑप्टिमाइज़ेशन है. इसका इस्तेमाल, पासवर्ड मैनेजर को सर्वर क्रेडेंशियल की स्थिति के साथ सिंक रखने के लिए किया जाता है.

• फ़ॉलबैक अनुभव: if (PublicKeyCredential.signalUnknownCredential) के ज़रिए गेट किया गया. अगर यह सुविधा काम नहीं करती है, तो बैकग्राउंड में पुष्टि करने की प्रोसेस को सिंक करने की सुविधा को बायपास कर दिया जाता है. इससे ब्राउज़र में कोई गड़बड़ी नहीं होती.

Easy JSON Serialization Fallback

हमेशा 'webauthn-polyfills' इंस्टॉल करें और उसे कॉन्टेक्स्ट में इंपोर्ट करें. ध्यान रखें कि जब तक PublicKeyCredential का इस्तेमाल किया जा सकता है, तब तक PublicKeyCredential.parseCreationOptionsFromJSON और PublicKeyCredential.prototype.toJSON का भी इस्तेमाल किया जा सकता है.

import 'webauthn-polyfills';