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

Eiji Kitamura

José Luis Zapata

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

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

खास जानकारी

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

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

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

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

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

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

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

इमीडिएट यूज़र इंटरफ़ेस (यूआई) मोड को कॉल करने से पहले, पुष्टि करें कि ब्राउज़र, 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 पैरामीटर का इस्तेमाल करके, तुरंत लॉगिन करने वाले डायलॉग को प्रोग्राम के हिसाब से खारिज नहीं किया जा सकता.