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

Marian Harbach

Thomas Steiner

Lời nhắc cấp quyền là cơ chế chính của web để bảo vệ các tính năng mạnh mẽ có thể gây nguy hiểm cho quyền riêng tư và sự an toàn của người dùng. Với lời nhắc cấp quyền, trình duyệt sẽ cố gắng đảm bảo rằng người dùng có ý định cho phép trang web yêu cầu truy cập vào chức năng đang được đề cập. Lời nhắc cấp quyền được dùng cho một số API, trong đó có tính năng chụp nội dung đa phương tiện (máy ảnh và micrô), định vị vị trí, quyền truy cập vào bộ nhớ, MIDI và thông báo (xem tài liệu về API Quyền trên MDN để biết thêm thông tin).

Hướng dẫn này trình bày các phương pháp hay nhất để hiển thị lời 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 hay nhất này, người dùng sẽ gặp ít lời nhắc không cần thiết hơn, dẫn đến việc nhà phát triển nhận được ít quyết định "chặn" hơn. Bài viết kết thúc bằng một số mẫu mã để làm việc với các API có kiểm soát quyền và các phương pháp hay nhất để giúp người dùng khôi phục khỏi trạng thái bị chặn.

Các phương pháp hay nhất về lời nhắc

Bạn nên yêu cầu cấp quyền sau khi người dùng tương tác, vào thời điểm người dùng có thể hiểu lý do bạn yêu cầu và lợi ích họ nhận được khi cấp quyền. Nếu có thể, bạn nên cho phép người dùng sử dụng một phương tiện thay thế để thực hiện cùng một chức năng. Theo nguyên tắc chung, việc yêu cầu cấp quyền ít thường xuyên hơn bằng cách chọn thời điểm yêu cầu một cách cẩn thận sẽ làm giảm khả năng người dùng của bạn rơi vào trạng thái bị chặn khó khôi phục. Các phương pháp hay nhất sau đây sẽ cung cấp thêm thông tin chi tiết về từng đề xuất.

Không bao giờ hỏi khi tải trang hoặc khi người dùng không tương tác

Việc yêu cầu người dùng cấp quyền khi tải trang tương đương với việc 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 một lời nhắc cấp quyền (có thể nằm trong số một vài lời nhắc khác để đăng ký nhận bản tin và đồng ý sử dụng cookie) là một trải nghiệm rất khó chịu. Người dùng sẽ không hiểu lý do họ được yêu cầu và lợi ích họ 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, bạn vẫn nên cho người dùng cơ hội hiểu lý do cần có quyền truy cập đó. Ví dụ: bằng cách đặt trước lời nhắc cấp quyền bằng lời nhắc của riêng bạn để giải thích nhu cầu và cho người dùng lựa chọn (ví dụ: nếu có thể, hãy cung cấp phương tiện thay thế để thực hiện 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ì sau đây là một số ví dụ trong hướng dẫn này.

Một trường hợp tương tự không nên yêu cầu cấp quyền là khi không có hoạt động tương tác nào trước đó của người dùng (còn gọi là kích hoạt tạm thời của người dùng). Dữ liệu đo từ xa của Chrome cho thấy 77% thông báo yêu cầu cấp quyền trên Chrome cho máy tính xuất hiện mà không có tín hiệu cơ bản nào về ý định của người dùng. Do đó, chỉ 12% thông báo yêu cầu cấp quyền như vậy được cho phép. Sau khi người dùng tương tác, tỷ lệ cho phép sẽ tăng lên 30%. Vì vậy, chỉ yêu cầu cấp quyền sau khi người dùng tương tác với trang theo một hình thức nào đó.

Chỉ hỏi khi người dùng có thể hiểu lý do bạn hỏi

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 ta biết rằng các quyết định về quyền riêng tư phụ thuộc rất nhiều vào bối cảnh. Bạn có thể coi việc hiểu lý do cần quyền truy cập là một khía cạnh chính của vấn đề này. Do đó, bạn chỉ nên yêu cầu các chức năng mà bạn cần để mang lại giá trị cho người dùng (và nơi người dùng có thể đồng ý với bạn rằng họ thực sự sẽ nhận được giá trị). Ngoài ra, bạn nên yêu cầu cấp quyền vào thời điểm người dùng thấy rõ lý do cần có chức năng này. Mục đích là giúp người dùng dễ dàng hiểu được ngữ cảnh sử dụng.

Nghiên cứu người dùng của chúng tôi cho thấy rằng người dùng có nhiều khả năng cấp quyền truy cập hơn khi họ hiểu lý do một trang web yêu cầu quyền truy cập và cũng nhận thấy được lợi ích. Chúng tôi cũng nhận thấy rằng người dùng 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 đóng hoặc bỏ qua lời nhắc cấp quyền. Với quyền một lần, họ có thể cho phép một lượt truy cập trước. Ứng dụng của bạn cần hỗ trợ những hành vi này.

Cung cấp phương thức thay thế để thực hiện cùng một chức năng (nếu có 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ụ: thông tin 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ề thông tin vị trí không chính xác vì người đó đang kết nối với một VPN. Người dùng khác có thể không muốn 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 bằng tổ hợp phím theo cách thủ công. Trong những trường hợp như vậy, điều quan trọng là bạn phải cung cấp một phương tiện thay thế để đạt được cùng một kết quả. Ví dụ: nếu yêu cầu quyền truy cập thông tin vị trí địa lý, hãy cung cấp một trường văn bản để người dùng có thể tự nhập mã bưu chính hoặc địa chỉ. Với bảng nhớ tạm, hãy đảm bảo rằng bạn cũng có thể chọn và sao chép các phần tử cần sao chép thông qua tổ hợp phím hoặc trình đơn theo bối cảnh. Với thông báo, hãy đề xuất người dùng nhận email thay vì thông báo đẩy.

Một cách làm 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ể có lợi. Khi thấy một tuỳ chọn nhập vị trí bên cạnh nút kích hoạt API vị trí địa lý, người dùng sẽ cảm thấy họ có thể kiểm soát những gì sắp xảy ra vì họ hiểu rằng họ cũng có thể chỉ cần nhập địa chỉ của mình. Tương tự, nếu có lựa chọn giữa nhận thông báo qua thông báo đẩy hoặc email, hoặc tham gia một cuộc họp mà không cấp quyền truy cập vào máy ảnh và micrô, thì người dùng sẽ hiểu rõ những điều đánh đổi mà họ đưa ra.

Đừng để mình rơi vào trạng thái bị chặn, rất khó để khôi phục

Sau khi người dùng quyết định vĩnh viễn không cho phép truy cập vào một tính năng có kiểm soát quyền, trình duyệt sẽ tuân thủ quyết định đó. Nếu có thể tiếp tục nhắc người dùng cấp quyền truy cập, thì các trang web có ý đồ xấu sẽ tiếp tục liên tục nhắc người dùng. Do đó, việc khôi phục từ trạng thái bị chặn của một chức năng sẽ yêu cầu người dùng phải nỗ lực một chút. Do đó, hãy tránh yêu cầu người dùng cấp quyền trong những trường hợp có khả năng nhiều người dùng sẽ khô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 lời nhắc trước, trong đó bạn giải thích cho người dùng về những gì sắp xảy ra và lý do ứng dụng của bạn cần chức năng mà bạn sắp yêu cầu. Bạn chỉ nên kích hoạt lời nhắc cấp quyền của trình duyệt khi người dùng phản ứng tích cực với lời nhắc trước đó. Có những trường hợp người dùng có thể cần khôi phục trạng thái đó một cách hợp pháp. Hãy xem phần Giúp người dùng khôi phục 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

Bạn cần lưu ý đến một nguồn lời nhắc cấp quyền không mong muốn. Nếu bạn đưa tập lệnh của bên thứ ba vào trang web, các tập lệnh đó có thể kích hoạt lời nhắc cấp quyền mà bạn không có ý định hiển thị. Điều này có thể ảnh hưởng đến trải nghiệm của người dùng trên trang web của bạn, đặc biệt là nếu các lời nhắc đó không tuân theo các phương pháp hay nhất đã nêu. Để luôn kiểm soát trải nghiệm của người dùng, bạn nên đọc kỹ tài liệu về 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 riêng mình.

Khi nào cần yêu cầu quyền

Dưới đây là một số 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 đã mô tả:

• Sau khi người dùng nhấp vào nút "sử dụng vị trí của tôi" bên cạnh trường biểu mẫu để 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 một nút xác nhận trong hộp thoại mô tả rằng thông tin cập nhật có thể được gửi dưới dạng email hoặc thông báo đến điện thoại hoặc máy tính của họ.
• Sau khi người dùng truy cập vào trang chuẩn bị tham gia cuộc gọi video và trả lời xác nhận rằng họ muốn người khác nhìn thấy và nghe thấy mình trong lời nhắc trước (xem nghiên cứu điển hình này của Google Meet).

Các mẫu mã để yêu cầu quyền

Việc xin phép sử dụng API diễn ra thông qua nhiều phương thức, tuỳ thuộc vào API. Một số API (thường là các API cũ) sử dụng mô hình mà trình duyệt tự động yêu cầu cấp quyền trong 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ột mô hình mà trước tiên, bạn cần yêu cầu quyền một cách rõ ràng bằng cách sử dụng phương thức tĩnh. Một ví dụ điển hình là Notification.requestPermission() để cho phép thông báo hoặc DeviceOrientationEvent.requestPermission() ít phổ biến hơn, thuộc API Sự kiện hướng thiết bị. Xin lưu ý rằng một số trình duyệt có thể tự động cấp quyền cho một số API nhất định. Ví dụ: Chrome luôn cho phép truy cập vào hướng của thiết bị, trong khi Safari hiển thị lời 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. */
}

Cách kiểm tra trạng thái của 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 phương thức navigator.permissions.query() 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ố truy cập, hãy phát hiện việc họ chặn quyền truy cập bằng Permissions API và cung cấp cho họ hướng dẫn về cách thay đổi chế độ cài đặt. Ví dụ: khi người dùng tương tác với các thành phần trên giao diện người dùng được liên kết với một chức năng có quyền truy cập, hãy sử dụng mẫu được mô tả trong phần trước 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 sẽ khác nhau tuỳ theo trình duyệt. Vì vậy, bạn nên 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 và cho những trình duyệt được sử dụng phổ biến nhất trong sản phẩm của bạn.

Trong Chrome, người dùng nên chuyển đến phần Chế độ điều khiển trang web bằng cách nhấp vào biểu tượng "điều chỉnh" ở bên trái thanh địa chỉ. Tại đây, họ có thể bật quyền tương ứng. Trong một số trường hợp, họ có thể phải tải lại trang trước khi sử dụng tính năng này. 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 khi nhấp vào nút tương ứng.

Các giao diện người dùng tương tự để kiểm soát quyền cũng có trong các trình duyệt khác (ví dụ: xem cách hoạt động của giao diện này trong Firefox).