Các phương pháp hay nhất về quyền trên web

Marian Harbach

Thomas Steiner

Thông báo nhắc cấp quyền là cơ chế chính của web để bảo vệ người dùng khỏi các chức năng mạnh mẽ, có thể gây nguy hiểm cho quyền riêng tư và tính bảo mật của họ. Trình duyệt nhằm mục đích xác nhận rằng người dùng có ý định cho phép một khả năng trên một trang web cụ thể. Bạn có thể triển khai quyền cho một số API, bao gồm cả tính năng ghi lại nội dung nghe nhìn (máy ảnh và micrô), vị trí địa lý, quyền truy cập vào bộ nhớ, MIDI và thông báo.

Hãy làm theo các phương pháp này khi hiển thị thông báo nhắc cấp quyền cho người dùng, dựa trên số liệu thống kê về việc sử dụng Chrome và nghiên cứu về người dùng. Khi làm theo các phương pháp này, người dùng sẽ ít gặp phải các thông báo nhắc không cần thiết hơn, dẫn đến ít quyết định chặn hơn.

Tài liệu này kết thúc bằng một số mẫu mã cho các API được kiểm soát bằng quyền và cách giúp người dùng åkhôi phục từ trạng thái bị chặn.

Các phương pháp hay nhất để nhắc cấp quyền

Yêu cầu cấp quyền sau lượt tương tác của người dùng, khi người dùng có bối cảnh để hiểu lý do bạn yêu cầu và lợi ích mà họ nhận được khi cho phép truy cập.

Khi có thể, hãy cung cấp các phương tiện thay thế để hoàn thành cùng một việc cần làm. Bằng cách cẩn thận chọn đúng thời điểm để yêu cầu, bạn sẽ giảm khả năng người dùng rơi vào trạng thái bị chặn mà khó khôi phục.

Không bao giờ yêu cầu khi tải trang hoặc khi người dùng không tương tác

Yêu cầu cấp quyền khi tải trang cũng giống như yêu cầu khách hàng cung cấp thông tin nhạy cảm khi họ bước vào một cửa hàng thực tế. Việc thấy thông báo nhắc cấp quyền, có thể là trong số một số thông báo nhắc khác để đăng ký nhận bản tin và đồng ý sử dụng cookie, là một trải nghiệm khó chịu. Người dùng sẽ không hiểu lý do họ được yêu hỏi và lợi ích mà họ sẽ nhận được.

Ngay cả khi ứng dụng web của bạn không thể hoạt động nếu không có quyền truy cập vào một chức năng nhất định, hãy cho người dùng cơ hội hiểu lý do cần có quyền đó. Ví dụ: hãy bắt đầu thông báo nhắc cấp quyền bằng lý do cần có thông báo nhắc và cho người dùng lựa chọn (ví dụ: bằng cách cung cấp các phương tiện thay thế để hoàn thành cùng một chức năng). Nếu bạn không nghĩ ra thời điểm nào tốt hơn để yêu cầu cấp quyền ngoài thời điểm tải trang, thì có một vài ví dụ sau trong hướng dẫn này.

Yêu cầu cấp quyền mà không có sự tương tác trước đó của người dùng cũng không hiệu quả. Đây được gọi là kích hoạt người dùng tạm thời. Dữ liệu đo từ xa của Chrome cho thấy 77% thông báo nhắc cấp quyền trên máy tính được hiển thị mà không có tín hiệu về ý định của người dùng và do đó, chỉ có 12% thông báo nhắc như vậy được cho phép. Sau khi lượt tương tác của người dùng, tỷ lệ cho phép tăng lên 30%.

Chỉ yêu cầu cấp quyền sau khi người dùng tương tác với trang.

Chỉ yêu cầu khi người dùng có thể hiểu lý do

Quyết định về quyền thường là quyết định về quyền riêng tư. Dựa trên khung tính toàn vẹn theo bối cảnh, chúng tôi biết rằng các quyết định về quyền riêng tư mang tính bối cảnh cao. Việc hiểu lý do cần có quyền truy cập là rất quan trọng. Bạn chỉ nên yêu cầu các chức năng cần thiết để mang lại giá trị, trong đó người dùng có khả năng đồng ý rằng họ sẽ tìm thấy giá trị. Ngoài ra, hãy yêu cầu cấp quyền khi người dùng thấy rõ lý do chức năng đó hữu ích. Giúp người dùng dễ hiểu bối cảnh sử dụng hơn.

Nghiên cứu về người dùng của chúng tôi cho thấy người dùng có nhiều khả năng cho phép truy cập hơn khi họ hiểu lý do một trang web yêu cầu truy cập và cũng nhận thấy lợi ích. Chúng tôi cũng nhận thấy rằng người dùng mong muốn khám phá các trang web lạ trước để hiểu rõ hơn về giá trị mà họ có thể nhận được khi cho phép truy cập. Trong thời gian chờ đợi, họ thường sẽ bỏ qua hoặc bỏ qua các thông báo nhắc cấp quyền. Với quyền một lần, họ có thể cho phép truy cập trong một lần truy cập trước. Hỗ trợ các hành vi này trong ứng dụng của bạn.

Cung cấp lựa chọn thay thế

Kết quả của một số chức năng có thể không hữu ích cho người dùng. Ví dụ: vị trí địa lý của một thiết bị máy tính không có cảm biến GPS có thể trả về vị trí không chính xác vì người đó được kết nối với một VPN. Những người dùng khác có thể không muốn cung cấp quyền truy cập vào bảng nhớ tạm vì họ muốn kiểm soát và kích hoạt các sự kiện này theo cách thủ công bằng các tổ hợp phím. Trong những trường hợp này, hãy cung cấp một cách thay thế để đạt được cùng một kết quả.

Ví dụ: nếu yêu cầu quyền truy cập vị trí địa lý, hãy cung cấp một trường văn bản để người dùng có thể nhập mã bưu chính hoặc địa chỉ. Cho phép chọn và sao chép các phần tử vào bảng nhớ tạm bằng phím tắt hoặc trình đơn theo bối cảnh. Đối với thông báo, hãy cung cấp email thay vì thông báo đẩy.

Một mẫu hữu ích là sử dụng giao diện người dùng thay thế cũng như giải thích lý do quyền truy cập có thể mang lại lợi ích. Những người dùng thấy một lựa chọn để nhập vị trí bên cạnh một nút kích hoạt API vị trí địa lý cảm thấy được kiểm soát, vì họ hiểu rằng họ có thể nhập địa chỉ của mình. Tương tự, nếu có lựa chọn giữa việc nhận thông báo qua thông báo đẩy hoặc email, hoặc tham gia cuộc họp mà không cho phép truy cập vào máy ảnh và micrô, thì người dùng sẽ hiểu được những điểm đánh đổi.

Tránh trạng thái bị chặn

Sau khi người dùng từ chối vĩnh viễn quyền truy cập vào một chức năng được kiểm soát bằng quyền, trình duyệt sẽ tôn trọng quyết định đó. Nếu có thể tiếp tục nhắc cấp quyền, các trang web độc hại sẽ liên tục nhắc người dùng. Việc khôi phục từ trạng thái bị chặn của một chức năng sẽ tốn nhiều công sức. Tránh yêu cầu cấp quyền trong những trường hợp người dùng khó có khả năng cho phép truy cập.

Một cách phổ biến để thực hiện việc này là sử dụng cái gọi là thông báo nhắc trước, trong đó bạn giải thích cho người dùng những gì sắp xảy ra và lý do ứng dụng của bạn cần khả năng mà bạn sắp yêu cầu. Chỉ khi người dùng phản ứng tích cực với thông báo nhắc trước như vậy, bạn mới nên kích hoạt thông báo nhắc cấp quyền của trình duyệt. Có những trường hợp người dùng có thể cần khôi phục từ trạng thái đó. Hãy xem phần Giúp người dùng khôi phục từ trạng thái bị chặn để biết thêm thông tin về vấn đề này.

Chú ý đến nội dung của bên thứ ba

Hãy lưu ý đến các nguồn thông báo nhắc cấp quyền không mong muốn. Tập lệnh của bên thứ ba trên trang web của bạn có thể kích hoạt các thông báo nhắc cấp quyền không mong muốn. Điều này có thể ảnh hưởng đến trải nghiệm của người dùng, đặc biệt nếu thông báo nhắc không tuân theo các phương pháp hay nhất. Để kiểm soát trải nghiệm người dùng, hãy đọc tài liệu cho mọi thư viện và tập lệnh của bên thứ ba mà bạn thêm vào mã của mình.

Thời điểm yêu cầu cấp quyền

Dưới đây là một vài ví dụ về những thời điểm phù hợp để yêu cầu cấp quyền, theo các phương pháp hay nhất:

• Sau khi người dùng nhấp vào Sử dụng vị trí của tôi bên cạnh một trường biểu mẫu, khi nhập địa chỉ theo cách thủ công.
• Sau khi người dùng đăng ký một kênh video hoặc bài đăng và nhấp vào nút xác nhận trên một hộp thoại mô tả rằng các bản cập nhật có thể được gửi dưới dạng email hoặc thông báo.
• Sau khi người dùng truy cập vào một trang chuẩn bị cho họ tham gia cuộc gọi video và trả lời khẳng định trong một thông báo nhắc trước rằng họ muốn được nhìn thấy và nghe thấy. Đọc thêm trong nghiên cứu điển hình về Google Meet.

Mẫu mã

Quyền sử dụng API được cấp thông qua nhiều phương tiện, tuỳ thuộc vào API. Một số API cũ sử dụng mô hình trong đó trình duyệt tự động yêu cầu cấp quyền vào lần đầu tiên bạn cố gắng sử dụng API. Một ví dụ là API vị trí địa lý khi gọi navigator.geolocation.getCurrentPosition().

try {
  navigator.geolocation.getCurrentPosition((pos) => console.log(pos));
} catch (error) {
  console.error(error);
}

Các API khác sử dụng mô hình trong đó bạn yêu cầu cấp quyền trước một cách rõ ràng bằng phương thức tĩnh. Một ví dụ hay là Notification.requestPermission() để cho phép thông báo hoặc DeviceOrientationEvent.requestPermission()ít phổ biến hơn, đây là một phần của API Sự kiện hướng thiết bị.

Một số trình duyệt tự động cấp quyền cho một số API. Ví dụ: Chrome luôn cho phép truy cập vào hướng thiết bị, trong khi Safari hiển thị thông báo nhắc.

const result = await DeviceOrientationEvent.requestPermission();
console.log(`The user's decision when prompted to use the Device Orientation
Events API was: ${result}.`);
if (result === 'granted') {
  /* Use the API. */
}

Kiểm tra trạng thái quyền

Để kiểm tra xem bạn có thể sử dụng một API nhất định hay không, hãy sử dụng navigator.permissions.query() phương thức từ API Quyền.

const result = await navigator.permissions.query({ name: 'geolocation' });
console.log(`The result of querying for the Geolocation API is:
${result.state}.`);
if (result.state === 'granted') {
  // Use the API.
}

Giúp người dùng khôi phục từ trạng thái bị chặn

Để giúp người dùng khắc phục sự cố về quyền truy cập, hãy phát hiện rằng họ đã chặn quyền truy cập bằng API Quyền và cung cấp hướng dẫn về cách thay đổi chế độ cài đặt. Khi người dùng tương tác với các phần tử giao diện người dùng được liên kết với một chức năng được kiểm soát bằng quyền, hãy sử dụng trạng thái quyền kiểm tra và mở hộp thoại khắc phục sự cố.

Các bước chính xác để thay đổi trạng thái quyền khác nhau tuỳ theo trình duyệt, vì vậy, hãy cung cấp nội dung mô tả phù hợp dựa trên chuỗi tác nhân người dùng cho các trình duyệt thường dùng nhất.

Trong Chrome, người dùng có thể thay đổi quyền trong phần Xem thông tin trang web > Cài đặt trang web, có trong thanh địa chỉ. Trong một số trường hợp, họ có thể phải tải lại trang trước khi sử dụng một chức năng. Trong trường hợp đó, một thanh thông báo sẽ xuất hiện ở đầu cửa sổ, đề nghị tải lại trang web.

Các giao diện người dùng tương tự để kiểm soát quyền tồn tại trong các trình duyệt khác, chẳng hạn như trong Firefox.