एक अच्छा साइन-आउट अनुभव देने के लिए क्या ज़रूरी है?

Kenji Baheux
Kenji Baheux

साइन आउट किया जा रहा है

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

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

ध्यान देने वाली मुख्य बातें

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

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

क्या करें

  • अगर साइन-आउट फ़्लो (या ऐक्सेस रद्द करने के अन्य फ़्लो) के हिस्से के तौर पर, सर्वर पर मौजूद किसी कुकी को अमान्य किया जाता है, तो उपयोगकर्ता के डिवाइस से भी कुकी को मिटा दें.
  • उपयोगकर्ता के डिवाइस पर सेव किए गए संवेदनशील डेटा को मिटाएं: कुकी, localStorage, sessionStorage, indexedDB, CacheStorage, और अन्य लोकल डेटा स्टोर.
  • पक्का करें कि संवेदनशील जानकारी वाले सभी रिसॉर्स (खास तौर पर एचटीएमएल दस्तावेज़) को Cache-control: no-store एचटीटीपी हेडर के साथ दिखाया जाए, ताकि ब्राउज़र इन रिसॉर्स को स्थायी स्टोरेज में सेव न करे (उदाहरण के लिए, डिस्क पर). इसी तरह, संवेदनशील जानकारी देने वाले XHRs/fetch कॉल के लिए भी Cache-Control: no-store एचटीटीपी हेडर सेट करना चाहिए, ताकि कैश मेमोरी में सेव न किया जा सके.
  • पक्का करें कि उपयोगकर्ता के डिवाइस पर खुले हुए सभी टैब अप-टू-डेट हों और सर्वर-साइड से ऐक्सेस वापस लिए गए हों.

साइन आउट करने के बाद संवेदनशील डेटा मिटाना

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

कुकी मिटाने का तरीका

साइन आउट होने की स्थिति की पुष्टि करने वाले पेज के रिस्पॉन्स में, Set-Cookie एचटीटीपी हेडर अटैच करें. इससे हर उस कुकी को मिटाया जा सकता है जो संवेदनशील जानकारी से जुड़ी है या उसमें मौजूद है. expires वैल्यू को, पिछली तारीख से पहले की तारीख पर सेट करें. साथ ही, सही माप के लिए, कुकी की वैल्यू को एक खाली स्ट्रिंग पर सेट करें.

Set-Cookie: sensitivecookie1=; expires=Thu, 01 Jan 1970 00:00:00 GMT; secure
Set-Cookie: sensitivecookie2=; expires=Thu, 01 Jan 1970 00:00:00 GMT; secure
...

ऑफ़लाइन स्थिति

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

स्टोरेज खाली करने का तरीका

साइन-आउट होने की पुष्टि करने वाले पेज के लिए, अलग-अलग डेटा स्टोर से संवेदनशील जानकारी को हटा दें:

  • sessionStorage: जब उपयोगकर्ता आपकी वेबसाइट पर अपने सेशन को खत्म करता है, तब यह समस्या हटा दी जाती है. हालांकि, उपयोगकर्ता के साइन आउट होने पर, संवेदनशील जानकारी को तुरंत हटा दें. ऐसा तब करें, जब वह आपकी वेबसाइट पर खुले हुए सभी टैब बंद करना भूल जाए.

    // Remove sensitive data from sessionStorage
    sessionStorage.removeItem('sensitiveSessionData1');
    // ...
    
    // Or if everything in sessionStorage is sensitive, clear it all
    sessionStorage.clear();
    
  • localStorage, indexedDB, कैश/सर्विस वर्कर एपीआई: जब उपयोगकर्ता साइन आउट करता है, तो इन एपीआई का इस्तेमाल करके सेव किए गए किसी भी संवेदनशील डेटा को खाली करें, ताकि यह डेटा सभी सेशन में बना रहे.

    // Remove sensitive data from localStorage:
    localStorage.removeItem('sensitiveData1');
    // ...
    
    // Or if everything in localStorage is sensitive, clear it all:
    localStorage.clear();
    
    // Delete sensitive object stores in indexedDB:
    const name = 'exampleDB';
    const version = 1;
    const request = indexedDB.open(name, version);
    
    request.onsuccess = (event) => {
      const db = request.result;
      db.deleteObjectStore('sensitiveStore1');
      db.deleteObjectStore('sensitiveStore2');
    
      // ...
    
      db.close();
    }
    
    // Delete sensitive resources stored via the Cache API:
    caches.open('cacheV1').then((cache) => {
      await cache.delete("/personal/profile.png");
    
      // ...
    }
    
    // Or better yet, clear a cache bucket that contains sensitive resources:
    caches.delete('personalizedV1');
    

कैश मेमोरी खाली करने का तरीका

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

सभी टैब पर एक जैसा उपयोगकर्ता अनुभव

ऐसा हो सकता है कि साइन आउट करने से पहले, उपयोगकर्ताओं ने आपकी वेबसाइट के लिए कई टैब खोल लिए हों. तब तक, हो सकता है कि वे अन्य टैब या अन्य ब्राउज़र विंडो के बारे में भी भूल गए हों. काम के सभी टैब और विंडो बंद करने के लिए, अपने उपयोगकर्ताओं पर निर्भर न रहना सबसे अच्छा है. इसके बजाय, यह पक्का करें कि उपयोगकर्ता के लॉगिन की स्थिति सभी टैब पर एक जैसी हो.

कैसे करें

सभी टैब पर साइन इन रहने की एक जैसी स्थिति बनाए रखने के लिए, pageshow/pagehide इवेंट और Broadcast Channel API, दोनों का इस्तेमाल करें.

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

    window.addEventListener('pageshow', (event) => {
      if (event.persisted && !document.cookie.match(/my-cookie)) {
        // The user has logged out.
        // Force a reload, or otherwise clear sensitive information right away.
        body.innerHTML = '';
        location.reload();
      }
    });
    
  • Broadcast Channel API: इस एपीआई का इस्तेमाल करके, टैब और विंडो में लॉगिन की स्थिति में हुए बदलावों के बारे में बताएं. अगर उपयोगकर्ता ने साइन आउट कर दिया है, तो सभी संवेदनशील जानकारी मिटाएं या संवेदनशील जानकारी वाले सभी टैब और विंडो पर साइन आउट करने वाले पेज पर रीडायरेक्ट करें.

    // Upon logout, broadcast new login state so that other tabs can clean up too:
    const bc = new BroadcastChannel('login-state');
    bc.postMessage('logged out');
    
    // [...]
    const bc = new BroadcastChannel('login-state');
    bc.onMessage = (msgevt) => {
      if (msgevt.data === 'logged out') {
        // Clean up, reload or navigate to the sign-out page.
        // ...
      }
    }
    

नतीजा

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