इस पेज का अनुवाद Cloud Translation API से किया गया है.

साइन-आउट करने का अनुभव बेहतर क्यों होता है?

केंजी बाहेक्स

साइन आउट करना

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

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

ज़रूरी बातें

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

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

ये काम करें

अगर साइन-आउट फ़्लो (या ऐक्सेस रद्द करने के अन्य फ़्लो) के तहत, सर्वर पर मौजूद किसी कुकी को अमान्य किया जाता है, तो उपयोगकर्ता के डिवाइस से भी कुकी को मिटाना न भूलें.
उपयोगकर्ता के डिवाइस पर सेव किया गया संवेदनशील डेटा हटाएं: कुकी, localStorage, sessionStorage, indexedDB, CacheStorage, और दूसरे लोकल डेटा स्टोर.
पक्का करें कि संवेदनशील जानकारी वाले सभी रिसॉर्स, खास तौर पर एचटीएमएल दस्तावेज़, Cache-control: no-store एचटीटीपी हेडर के साथ दिखाए जाएं. ऐसा इसलिए, ताकि ब्राउज़र इन रिसॉर्स को स्थायी स्टोरेज (जैसे कि डिस्क पर) में सेव न करे. इसी तरह, संवेदनशील जानकारी देने वाले XHR/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 कुकी को हटा दें और अगर हो सके, तो अन्य क्लीन अप ऑपरेशन करें. अगर आपके पास कोई सर्विस वर्कर है, तो हो सकता है कि आप बाद में उपयोगकर्ता के ऑनलाइन होने पर सर्वर पर स्थिति साफ़ करने के अनुरोध का फिर से प्रयास करने के लिए बैकग्राउंड फ़ेच API का लाभ उठाना चाहें.

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

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

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 एचटीटीपी हेडर शामिल है. यह पेज से मिला है.

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

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

How to

सभी टैब में एक जैसा साइन इन करने के लिए, 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.
    // ...
  }
}
```

नतीजा

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