लॉगिन के लिए, यूज़र इंटरफ़ेस (यूआई) मोड को तुरंत चालू करना

Eiji Kitamura

José Luis Zapata

पब्लिश होने की तारीख: 12 मई, 2026

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

खास जानकारी

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

मई 2026 तक, Chrome ही ऐसा ब्राउज़र है जिस पर तुरंत यूज़र इंटरफ़ेस (यूआई) मोड काम करता है.

ज़रूरी शर्तें देखना

इमीडिएट यूज़र इंटरफ़ेस (यूआई) मोड का इस्तेमाल करने के लिए, उपयोगकर्ता के पास ज़रूरी क्रेडेंशियल होने चाहिए. ये क्रेडेंशियल, उसके डिवाइस पर स्थानीय तौर पर उपलब्ध होने चाहिए. Chrome पर, इन क्रेडेंशियल में ये शामिल हैं:

• पासकी की सुविधा देने वाली किसी सेवा में सेव की गई पासकी. जैसे, Google Password Manager, Windows Hello या iCloud Keychain.
• Google Password Manager में सेव किए गए पासवर्ड.

अगर कोई लोकल क्रेडेंशियल मौजूद नहीं है, तो एपीआई, अनुरोध को अस्वीकार कर देता है. साथ ही, तुरंत लॉगिन करने का डायलॉग नहीं दिखाता है.

सुविधा के काम करने की जानकारी का पता लगाना

इमीडिएट यूज़र इंटरफ़ेस (यूआई) मोड को कॉल करने से पहले, यह पुष्टि करें कि ब्राउज़र में immediateGet सुविधा काम करती है या नहीं. इसके लिए, immediateGet तरीके का इस्तेमाल करें.PublicKeyCredential.getClientCapabilities() अगर यह सुविधा काम नहीं करती है, तो साइन इन करने के मौजूदा तरीकों का इस्तेमाल करें. जैसे, ईमेल और पासवर्ड वाले फ़ॉर्म, फ़ोन नंबर की पुष्टि करना या सोशल लॉगिन.

async function checkImmediateAvailability() {
  try {
    const capabilities = await PublicKeyCredential.getClientCapabilities();
    if (capabilities.immediateGet) {
      console.log("Immediate UI mode is supported.");
    } else {
      console.log("Immediate UI mode is NOT supported.");
    }
  } catch (error) {
    console.error("Error checking client capabilities:", error);
  }
}

ज़्यादा ब्राउज़र पर काम करने वाले पॉलीफ़िल का इस्तेमाल करने के लिए, WebAuthn Polyfills GitHub रिपॉज़िटरी में उपलब्ध पॉलीफ़िल का इस्तेमाल करें.

क्रेडेंशियल का अनुरोध करना

तुरंत लॉगिन करने की सुविधा को ट्रिगर करने के लिए, navigator.credentials.get() को कॉल करें. साथ ही, uiMode फ़ील्ड को 'immediate' पर सेट करें.

अपने अनुरोध में password: true को शामिल करके, उपयोगकर्ता इस सुविधा का फ़ायदा पा सकते हैं. हालांकि, इसके लिए ज़रूरी है कि ब्राउज़र पासवर्ड क्रेडेंशियल के साथ काम करता हो.

// This call must follow a user gesture, like a button click
button.addEventListener('click', async (event) => {
  event.preventDefault();
  try {
    const cred = await navigator.credentials.get({
      password: true,
      publicKey: {
        challenge: serverGeneratedChallenge,
        rpId: 'example.com'
      },
      uiMode: 'immediate',
    });
    // Handle successful sign-in
  } catch (error) {
    if (error.name === 'NotAllowedError') {
      // Provide a fallback sign-in experience
      showFallbackUI();
    }
  }
});

आपको NotAllowedError को catch ब्लॉक में हैंडल करना होगा, ताकि फ़ॉलबैक साइन-इन का अनुभव दिया जा सके.

साइन-इन करने की प्रोसेस मैनेज करना

यूज़र इंटरफ़ेस (यूआई) मोड को दो मुख्य स्थितियों के लिए तुरंत लागू किया जा सकता है.

बटन की मदद से साइन इन करना

साइन-इन करने के लिए एक बटन उपलब्ध कराएं. इससे उपयोगकर्ताओं को साफ़-सुथरा अनुभव मिलेगा और उन्हें अचानक दिखने वाले प्रॉम्प्ट नहीं दिखेंगे.

1. उपयोगकर्ता, साइन इन करें बटन पर क्लिक करता है.
2. आपकी साइट, uiMode: "immediate" के साथ navigator.credentials.get() को कॉल करती है.
3. ब्राउज़र, स्थानीय क्रेडेंशियल की जांच करता है.
4. अगर ब्राउज़र को क्रेडेंशियल मिलते हैं, तो वह उपयोगकर्ता को तुरंत लॉगिन डायलॉग दिखाता है, ताकि वह कोई खाता चुन सके.
5. अगर ब्राउज़र को कोई क्रेडेंशियल नहीं मिलता है या उपयोगकर्ता तुरंत लॉगिन करने वाले डायलॉग को खारिज कर देता है, तो यह NotAllowedError दिखाता है.
6. अगर NotAllowedError थ्रो किया जाता है, तो आपकी साइट अपने स्टैंडर्ड साइन-इन पेज पर चली जाती है.

चेकआउट करने से पहले साइन इन करें

उपयोगकर्ता के किसी ऐसे काम से पहले क्रेडेंशियल ऑफ़र करें जिससे पुष्टि करने पर उसे फ़ायदा मिल सकता हो. जैसे, किसी ऑनलाइन स्टोरफ़्रंट पर चेकआउट फ़्लो शुरू करना.

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

1. जब उपयोगकर्ता कोई कार्रवाई करता है. जैसे, शॉपिंग फ़्लो के दौरान चेकआउट बटन पर क्लिक करना.
2. आपकी साइट, uiMode: "immediate" के साथ navigator.credentials.get() को कॉल करती है.
3. अगर क्रेडेंशियल मौजूद हैं, तो उपयोगकर्ता साइन-इन करने के लिए किसी एक क्रेडेंशियल को चुनता है.
4. अगर क्रेडेंशियल मौजूद नहीं हैं, तो ब्राउज़र गड़बड़ी का मैसेज दिखाता है. साथ ही, तुरंत लॉगिन करने का डायलॉग नहीं दिखाता. उपयोगकर्ता के अनुभव में कोई बदलाव नहीं होता. साथ ही, उपयोगकर्ता को मौजूदा चेकआउट स्क्रीन पर ले जाया जा सकता है. इस स्क्रीन पर, साइन इन करने के अन्य विकल्प या बिना लॉग-इन खरीदारी करने का फ़ॉर्म उपलब्ध हो सकता है.

निजता और सुरक्षा से जुड़े उपायों की समीक्षा करना

उपयोगकर्ता की निजता को सुरक्षित रखने के लिए, ब्राउज़र ये ज़रूरी कदम उठाता है:

• उपयोगकर्ता के जेस्चर से जुड़ी ज़रूरी शर्त: आपको एपीआई कॉल को उपयोगकर्ता के जेस्चर, जैसे कि क्लिक से शुरू करना होगा, ताकि चुपचाप जांच न की जा सके. इस कॉल से, ऐक्टिवेशन का इस्तेमाल नहीं होता.
• गुप्त मोड से जुड़ी पाबंदियां: गुप्त या निजी सेशन में किए गए अनुरोधों के लिए, हमेशा NotAllowedError दिखता है.
• कोई भी अनुमति वाली सूची नहीं है: अगर अनुरोध में allowCredentials सूची में कोई वैल्यू मौजूद है, तो NotAllowedError दिखेगा. इससे क्रॉस-सेशन ट्रैकिंग को रोका जा सकेगा.
• प्रोग्राम के हिसाब से रद्द नहीं किया जा सकता: signal पैरामीटर का इस्तेमाल करके, तुरंत लॉगिन करने वाले डायलॉग को प्रोग्राम के हिसाब से खारिज नहीं किया जा सकता.