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

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ẽ nhưng có thể gây nguy hiểm đối với quyền riêng tư và bảo mật 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ẽ ít gặp phải những lời nhắc không cần thiết hơn, nhờ đó nhà phát triển sẽ ít phải nhận các quyết định "chặn" hơn. Bài viết này sẽ kết thúc bằng một số mẫu mã để làm việc với các API bị hạn chế quyền và các phương pháp hay nhất để 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 về câu lệnh

Bạn nên xin phép sau khi người dùng tương tác, ở thời điểm người dùng có thể hiểu lý do bạn yêu cầu và họ sẽ nhận được lợi ích gì khi cho phép. Nếu có thể, bạn nên cho phép người dùng sử dụng các phương tiện thay thế để thực hiện chức năng tương tự. 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 những thời điểm mà bạn yêu cầu một cách cẩn thận sẽ giúp giảm khả năng người dùng rơi vào trạng thái bị chặn và 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 không có sự tương tác của người dùng

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 một thông tin nhạy cảm khi họ bước vào cửa hàng thực tế. Việc nhìn thấy lời nhắc cấp quyền (có thể trong số nhiều lời nhắc khác về việ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 tại sao họ được hỏi và họ sẽ được hưởng lợi như thế nào.

Ngay cả khi ứng dụng web 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 cung cấp cho người dùng cơ hội để hiểu lý do bạn cần ứng dụng đó. Ví dụ: bằng cách đặt 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ể, bằng cách cung cấp các 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 được thời điểm nào là thích hợp nhất để xin phép thay vì tải trang, thì bạn có thể tham khảo một số ví dụ ở phần sau của hướng dẫn này.

Một tình huống xấu tương tự là yêu cầu quyền mà không cần sự tương tác trước đó của người dùng (còn 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% lời nhắc cấp quyền trên Chrome cho máy tính được hiển thị mà không có tín hiệu rất cơ bản về ý định của người dùng và do đó, chỉ 12% trong số các lời nhắc đó được cho phép. Sau khi người dùng tương tác, hãy cho phép tăng giá 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 trong một số hình thức.

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

Quyết định về quyền thường là quyết định về quyền riêng tư. Dựa trên khung toàn vẹn theo ngữ cảnh, chúng tôi biết rằng các quyết định về quyền riêng tư phụ thuộc nhiều vào ngữ cảnh. Việc hiểu rõ lý do cần có quyền truy cập có thể được coi là một khía cạnh quan trọng của việc này. Do đó, bạn chỉ nên yêu cầu những tính năng mà bạn cần cung cấp cho người dùng giá trị (và ở những trường hợp người dùng có khả năng đồ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 ngay khi người dùng thấy rõ lý do của chức năng này. Mục đích là giúp người dùng dễ dàng hiểu được bối 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 kể khả năng người dùng cho phép truy cập sẽ cao hơn khi họ hiểu lý do một trang web yêu cầu quyền truy cập và đồng thời nhận thấy được một 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 không quen thuộc trước để hiểu rõ hơn giá trị họ có thể nhận được khi cho phép truy cập. Họ thường đóng hoặc bỏ qua các lời nhắc cấp quyền trong thời gian chờ đợi. Với quyền một lần, họ có thể cho phép một lượt truy cập trước tiên. Ứng dụng của bạn cần hỗ trợ những hành vi này.

Cung cấp các phương tiện thay thế để thực hiện cùng một chức năng khi 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ụ: 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 đó đã kết nối với VPN. Những 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 nắm quyền kiểm soát và kích hoạt các sự kiện này bằng các tổ hợp phím theo cách thủ công. Trong những tình huống như vậy, bạn cần phải cung cấp phương tiện thay thế để đạt được kết quả tương tự. Ví dụ: nếu yêu cầu quyền truy cập thông tin định vị vị trí, 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 tự đị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 một tổ hợp phím hoặc trình đơn theo bối cảnh. Với thông báo, hãy đề nghị mọi người 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 nhìn thấy lựa chọn nhập thông tin 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ọ nắm quyền 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ỉ. 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 để bản thân rơi vào trạng thái bị chặn, 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 bị giới hạn quyền, các 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 truy cập, thì các trang web có ý đồ xấu sẽ tiếp tục bắn phá người dùng bằng các lời nhắc. Do đó, việc khôi phục từ trạng thái bị chặn của một chức năng có chủ đích khiến người dùng mất một chút công sức. 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 để làm việc này là sử dụng lời nhắc trước, nơi 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 chức năng mà bạn yêu cầu. Chỉ khi người dùng phản ứng chắc chắn với lời nhắc trước như vậy, bạn mới kích hoạt lời nhắc cấp quyền của trình duyệt. Có những trường hợp mà người dùng có thể cần khôi phục một cách hợp pháp từ trạng thái đó. Hãy xem phần Giúp người dùng khôi phục sau 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

Có một nguồn lời nhắc cấp quyền không mong muốn cần lưu ý. Nếu bạn đưa các tập lệnh của bên thứ ba vào trang web của mình, thì các tập lệnh này 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à khi những 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 bên thứ ba mà bạn thêm vào mã của 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 khoảnh khắc nên xin phép bằng cách làm theo các phương pháp hay nhất đã mô tả:

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

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

Việc được cấp quyền sử dụng API sẽ diễn ra thông qua các phương thức khác nhau, tuỳ thuộc vào API. Một số API (thường là API cũ) sử dụng mô hình mà trình duyệt tự động yêu cầu 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ột mô hình mà trước tiên bạn cần yêu cầu cấp quyền rõ ràng bằng một 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ị. Lưu ý rằng một số trình duyệt có thể tự động cấp quyền cho các 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() trong 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.
}

Hỗ trợ trình duyệt

  • 43
  • 79
  • 46
  • 16

Nguồn

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 dùng API Quyền để phát hiện xem họ đã chặn quyền truy cập hay chưa và hướng dẫn họ 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 liên kết với một chức năng có giới hạn quyền, hãy sử dụng mẫu đã 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 các nội dung mô tả trùng khớp dựa trên chuỗi tác nhân người dùng và cho các trình duyệt thường dùng nhất trong sản phẩm.

Trong Chrome, người dùng phải chuyển đến phần Site Controls (Kiểm soát trang web) bằng cách nhấp vào biểu tượng "điều chỉnh" ở phía 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ẽ hiển thị ở đầu cửa sổ và đề xuất tải lại khi bạn nhấp vào nút tương ứng.

Các chế độ kiểm soát trang web trong trình duyệt Chrome.

Lời nhắc tải lại sau khi thay đổi quyền bằng các chế độ kiểm soát trang web.

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