หน้านี้ได้รับการแปลโดย Cloud Translation API

อะไรคือปัจจัยที่ทำให้ประสบการณ์ออกจากระบบที่ดี

Kenji Baheux

ออกจากระบบ

เมื่อผู้ใช้ออกจากระบบเว็บไซต์ ก็เท่ากับเป็นการบอกความต้องการที่จะได้รับจากประสบการณ์การใช้งานที่ปรับเปลี่ยนให้เหมาะกับผู้ใช้อย่างสิ้นเชิง ดังนั้น การยึดถือหลักจิตใจของผู้ใช้อย่างเคร่งครัดจึงเป็นสิ่งสำคัญ เช่น ประสบการณ์การออกจากระบบที่เหมาะสมควรพิจารณาแท็บต่างๆ ที่ผู้ใช้อาจเปิดไว้ก่อนที่จะตัดสินใจออกจากระบบด้วย

กุญแจสำคัญที่นำไปสู่ประสบการณ์การออกจากระบบที่ยอดเยี่ยมนั้นสรุปได้ว่ามีความสอดคล้องกันทั้งด้านภาพและสถานะของประสบการณ์ของผู้ใช้ คู่มือนี้จะให้คำแนะนำที่เป็นรูปธรรมเกี่ยวกับสิ่งที่ควรให้ความสนใจ และวิธีมอบประสบการณ์การออกจากระบบที่ดี

ข้อควรพิจารณาที่สำคัญ

เมื่อใช้ฟังก์ชันการออกจากระบบในเว็บไซต์ โปรดให้ความสำคัญกับปัจจัยต่อไปนี้เพื่อให้ขั้นตอนการออกจากระบบเป็นไปอย่างราบรื่น ปลอดภัย และใช้งานง่าย

UX การออกจากระบบที่ชัดเจนและสอดคล้องกัน: แสดงปุ่มหรือลิงก์ออกจากระบบที่ชัดเจนและมองเห็นได้อย่างสม่ำเสมอ ซึ่งสามารถระบุได้ง่ายและเข้าถึงได้ทั่วทั้งเว็บไซต์ หลีกเลี่ยงการใช้ป้ายกำกับที่กำกวมหรือซ่อนฟังก์ชันออกจากระบบในเมนู หน้าเว็บย่อย หรือตำแหน่งอื่นๆ ที่ไม่ชัดเจน
ข้อความแจ้งให้ยืนยัน: ใช้ข้อความแจ้งยืนยันก่อนเสร็จสิ้นกระบวนการออกจากระบบ วิธีนี้จะช่วยป้องกันไม่ให้ผู้ใช้ออกจากระบบโดยไม่ตั้งใจ และช่วยให้ผู้ใช้พิจารณาใหม่ในกรณีที่จำเป็นต้องออกจากระบบจริงๆ เช่น ในกรณีที่ตั้งใจล็อกอุปกรณ์ด้วยรหัสผ่านที่รัดกุมหรือกลไกการตรวจสอบสิทธิ์แบบอื่นๆ
จัดการหลายแท็บ: หากผู้ใช้เปิดหลายหน้าจากเว็บไซต์เดียวกันในแท็บต่างๆ ให้ตรวจสอบว่าการออกจากระบบจากแท็บหนึ่งจะอัปเดตแท็บอื่นๆ ที่เปิดอยู่ทั้งหมดจากเว็บไซต์ดังกล่าวด้วย
เปลี่ยนเส้นทางไปยังหน้า Landing Page ที่ปลอดภัย: เมื่อออกจากระบบเรียบร้อยแล้ว ให้เปลี่ยนเส้นทางผู้ใช้ไปยังหน้า Landing Page ที่ปลอดภัยซึ่งระบุอย่างชัดเจนว่าไม่ได้ลงชื่อเข้าใช้อีกต่อไป หลีกเลี่ยงการเปลี่ยนเส้นทางผู้ใช้ไปยังหน้าที่มีข้อมูลที่ปรับเปลี่ยนในแบบของคุณ ในทำนองเดียวกัน ให้ตรวจสอบว่าแท็บอื่นๆ ไม่ได้แสดงสถานะลงชื่อเข้าใช้แล้วเช่นกัน นอกจากนี้ คุณต้องไม่สร้างการเปลี่ยนเส้นทางแบบเปิดที่ผู้โจมตีจะใช้ประโยชน์ได้
การล้างข้อมูลเซสชัน: เมื่อผู้ใช้ออกจากระบบแล้ว ให้นำข้อมูลเซสชันของผู้ใช้ที่มีความละเอียดอ่อน คุกกี้ หรือไฟล์ชั่วคราวที่เชื่อมโยงกับเซสชันของผู้ใช้ออกให้หมด วิธีนี้ช่วยป้องกันการเข้าถึงข้อมูลหรือกิจกรรมในบัญชีโดยไม่ได้รับอนุญาต และจะป้องกันไม่ให้เบราว์เซอร์คืนค่าหน้าเว็บที่มีข้อมูลที่ละเอียดอ่อนจากแคชต่างๆ ของเบราว์เซอร์ โดยเฉพาะแคชย้อนหลัง
การจัดการข้อผิดพลาดและความคิดเห็น: ส่งข้อความแสดงข้อผิดพลาดหรือแสดงความคิดเห็นให้ผู้ใช้ทราบอย่างชัดเจนหากมีปัญหาใดๆ เมื่อออกจากระบบ แจ้งให้ลูกค้าทราบถึงความเสี่ยงด้านความปลอดภัยหรือข้อมูลรั่วไหลที่อาจเกิดขึ้นหากออกจากระบบไม่สำเร็จ
ข้อควรพิจารณาเกี่ยวกับการช่วยเหลือพิเศษ: ตรวจสอบว่าผู้ใช้ที่มีความพิการสามารถเข้าถึงกลไกการออกจากระบบได้ รวมถึงผู้ใช้ที่ใช้เทคโนโลยีความช่วยเหลือพิเศษ เช่น โปรแกรมอ่านหน้าจอหรือการนำทางด้วยแป้นพิมพ์
ความเข้ากันได้กับทุกเบราว์เซอร์: ทดสอบฟังก์ชันการออกจากระบบในเบราว์เซอร์และอุปกรณ์ต่างๆ เพื่อให้แน่ใจว่าทำงานได้อย่างถูกต้องและเชื่อถือได้
การตรวจสอบและการอัปเดตอย่างต่อเนื่อง: ตรวจสอบกระบวนการออกจากระบบเป็นประจำเพื่อหาช่องโหว่หรือช่องโหว่ด้านความปลอดภัยที่อาจเกิดขึ้น ทำการอัปเดตและแพตช์อย่างทันท่วงทีเพื่อแก้ไขปัญหาที่พบ
การรวมศูนย์ข้อมูลประจำตัว: หากผู้ใช้ลงชื่อเข้าใช้ด้วยข้อมูลประจำตัวแบบรวมศูนย์ ให้รองรับและจำเป็นต้องออกจากระบบของผู้ให้บริการข้อมูลประจำตัวด้วยหรือไม่ นอกจากนี้ หากผู้ให้บริการข้อมูลประจำตัวรองรับการลงชื่อเข้าใช้โดยอัตโนมัติ โปรดอย่าลืมป้องกัน

สิ่งที่ควรทำ

หากคุณทำให้คุกกี้บนเซิร์ฟเวอร์ใช้งานไม่ได้โดยเป็นส่วนหนึ่งของขั้นตอนการออกจากระบบ (หรือกระบวนการเพิกถอนสิทธิ์เข้าถึงอื่นๆ) โปรดตรวจสอบว่าได้ลบคุกกี้บนอุปกรณ์ของผู้ใช้ด้วยเช่นกัน
ล้างข้อมูลที่ละเอียดอ่อนที่คุณอาจเก็บไว้ในอุปกรณ์ของผู้ใช้ ไม่ว่าจะเป็นคุกกี้, localStorage, sessionStorage, indexedDB, CacheStorage และพื้นที่เก็บข้อมูลอื่นๆ ในเครื่อง
ตรวจสอบว่าทรัพยากรที่มีข้อมูลที่ละเอียดอ่อน โดยเฉพาะเอกสาร HTML ได้แสดงผลพร้อมส่วนหัว HTTP Cache-control: no-store เพื่อไม่ให้เบราว์เซอร์เก็บทรัพยากรเหล่านี้ไว้ในพื้นที่เก็บข้อมูลถาวร (เช่น ในดิสก์) ในทํานองเดียวกัน การเรียก XHR/fetch ที่ส่งคืนข้อมูลที่ละเอียดอ่อนควรตั้งค่าส่วนหัว Cache-Control: no-store ของ HTTP เพื่อป้องกันการแคชใดๆ
ตรวจสอบว่าแท็บที่เปิดอยู่ในอุปกรณ์ของผู้ใช้มีการเพิกถอนสิทธิ์เข้าถึงฝั่งเซิร์ฟเวอร์เป็นเวอร์ชันล่าสุด

การล้างข้อมูลที่ละเอียดอ่อนเมื่อออกจากระบบ

เมื่อออกจากระบบ ให้พิจารณาล้างข้อมูลที่ละเอียดอ่อนและจัดเก็บไว้ในเครื่องชั่วคราว การมุ่งเน้นที่ข้อมูลที่ละเอียดอ่อนนั้นเกิดจากข้อเท็จจริงที่ว่าการล้างข้อมูลทุกอย่างจะส่งผลให้ประสบการณ์ของผู้ใช้แย่ลงอย่างมาก เนื่องจากอาจกลับมาเป็นผู้ใช้อีกครั้งก็ได้ ตัวอย่างเช่น หากคุณล้างข้อมูลที่จัดเก็บไว้ในเครื่องทั้งหมด จากนั้นผู้ใช้จะต้องรับทราบข้อความแจ้งเกี่ยวกับความยินยอมในการใช้คุกกี้อีกครั้ง และดำเนินการอื่นๆ เสมือนว่าไม่เคยเข้าชมเว็บไซต์ของคุณตั้งแต่แรก

วิธีล้างคุกกี้

ในการตอบสนองของหน้าเว็บที่ยืนยันสถานะออกจากระบบ ให้แนบส่วนหัว HTTP ของ 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
...

สถานการณ์ออฟไลน์

แม้ว่าวิธีการที่อธิบายไว้ข้างต้นเพียงพอแล้วสําหรับ Use Case ทั่วไป แต่จะใช้งานไม่ได้หากผู้ใช้ทํางานแบบออฟไลน์ คุณอาจต้องพิจารณากำหนดให้ใช้คุกกี้ 2 รายการเพื่อติดตามสถานะลงชื่อเข้าใช้ ได้แก่ คุกกี้สำหรับ HTTPS เท่านั้นที่ปลอดภัย 1 คุกกี้ และคุกกี้ปกติ 1 คุกกี้ที่เข้าถึงได้ผ่านทาง JavaScript หากผู้ใช้พยายามออกจากระบบขณะที่ออฟไลน์ ให้ล้างคุกกี้ JavaScript และดำเนินการล้างข้อมูลอื่นๆ หากเป็นไปได้ หากคุณมี Service Worker คุณอาจต้องใช้ประโยชน์จาก Background Fetch API เพื่อลองส่งคำขอเพื่อล้างสถานะบนเซิร์ฟเวอร์อีกครั้งเมื่อผู้ใช้ออนไลน์ในภายหลัง

วิธีล้างพื้นที่เก็บข้อมูล

ในการตอบสนองของหน้าเว็บที่ยืนยันสถานะออกจากระบบ ให้ใช้วิธีล้างข้อมูลที่ละเอียดอ่อนจากพื้นที่เก็บข้อมูลต่างๆ ดังนี้

sessionStorage: แม้ว่าระบบจะล้างสถานะนี้เมื่อผู้ใช้สิ้นสุดเซสชันกับเว็บไซต์ของคุณ แต่ให้พิจารณาการล้างข้อมูลที่ละเอียดอ่อนเมื่อผู้ใช้ออกจากระบบเผื่อไว้ในกรณีที่ลืมปิดแท็บทั้งหมดที่เปิดอยู่ในเว็บไซต์
```
// Remove sensitive data from sessionStorage
sessionStorage.removeItem('sensitiveSessionData1');
// ...

// Or if everything in sessionStorage is sensitive, clear it all
sessionStorage.clear();
```

localStorage, indexedDB, Cache/Service Worker API: เมื่อผู้ใช้ออกจากระบบ ให้ล้างข้อมูลที่ละเอียดอ่อนที่คุณอาจจัดเก็บไว้โดยใช้ API เหล่านี้ เนื่องจากข้อมูลดังกล่าวจะยังคงอยู่ในเซสชัน

// 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');

วิธีล้างแคช

แคช HTTP: ตราบใดที่คุณตั้งค่า Cache-control: no-store ในทรัพยากรที่มีข้อมูลที่ละเอียดอ่อน แคช HTTP จะไม่เก็บข้อมูลที่มีความละเอียดอ่อน
Back-Forward Cache: ในทำนองเดียวกัน หากคุณทำตามคำแนะนำเกี่ยวกับ Cache-control: no-store และเกี่ยวกับการล้างคุกกี้ที่ละเอียดอ่อน (เช่น คุกกี้ HTTPS ที่ปลอดภัยเกี่ยวกับการตรวจสอบสิทธิ์เท่านั้น) เมื่อผู้ใช้ออกจากระบบ คุณก็ไม่ต้องกังวลว่าจะมีการเก็บรักษาข้อมูลที่ละเอียดอ่อนไว้ใน Back-Forward Cache ฟีเจอร์ Back-Forward Cache จะนำออกหน้าต้นทางเดียวกันที่แสดงด้วยส่วนหัว HTTP ของ Cache-control: no-store หากสังเกตเห็นสัญญาณต่อไปนี้อย่างน้อย 1 รายการ
- มีการแก้ไขหรือลบคุกกี้ที่ใช้ HTTPS เท่านั้นซึ่งมีความปลอดภัยอย่างน้อย 1 รายการ
- การตอบกลับอย่างน้อย 1 รายการสำหรับการเรียก XHR/fetch ซึ่งออกโดยหน้าเว็บ มีส่วนหัว HTTP ของ 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: ใช้ 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.
    // ...
  }
}
```

บทสรุป

เมื่อปฏิบัติตามคำแนะนำในเอกสารนี้ คุณจะสามารถออกแบบประสบการณ์ของผู้ใช้ในการออกจากระบบที่ดี ซึ่งช่วยป้องกันการออกจากระบบโดยไม่ตั้งใจ และปกป้องข้อมูลส่วนบุคคลของผู้ใช้ได้