Web 权限最佳实践

Marian Harbach
Marian Harbach
X
Thomas Steiner

权限提示是 Web 的主要机制，用于保护用户免受强大功能的影响，这些功能可能会危及用户的隐私和安全。浏览器旨在确认用户打算允许在特定网站上使用某项功能。 您可以为许多 API 实现权限， 包括媒体捕获（相机和麦克风）、地理位置、存储空间访问权限、 MIDI 和通知。

在向用户显示权限提示时，请遵循以下做法，这些做法基于 Chrome 使用情况统计信息和用户研究。 如果遵循这些做法，您的用户应该会遇到更少的非必要提示，从而减少屏蔽决定。

本文档的结尾部分介绍了一些权限控制型 API 的 代码模式，以及如何帮助用户 从屏蔽状态恢复。

提示最佳实践

在用户互动后请求权限，以便用户了解您请求权限的原因以及允许访问权限的好处。

如果可能，请提供替代方法来完成相同的任务。通过仔细选择合适的请求时间，您可以降低用户进入难以恢复的屏蔽状态的可能性。

切勿在网页加载时或未经用户互动的情况下请求权限

在网页加载时请求权限，相当于在客户走进实体店时向其索取敏感信息。看到权限提示（可能与其他几个提示（例如订阅简报和 Cookie 同意）一起显示）是一种令人不适的体验。用户不会理解 为何系统会向他们提出请求，以及他们会获得哪些好处。

即使您的 Web 应用在没有对特定功能的访问权限的情况下无法正常运行，也要让用户有机会了解为何需要该权限。例如， 在权限提示之前说明为何需要该提示，并 为用户提供选择（例如，通过 提供替代方法来完成相同的功能）。 如果您认为在网页加载时请求权限是最佳时机，请参阅本指南后面的几个示例。

在没有用户互动的情况下请求权限也是无效的。 这称为 “临时用户激活”。 Chrome 遥测数据显示，桌面设备上 77% 的权限提示是在没有用户意图信号的情况下显示的，因此，只有 12% 的此类提示被允许。在用户互动后，允许率会提高到 30%。

只有在用户与网页互动后，才请求权限。

只有在用户能够理解原因时才请求权限

权限决定通常是隐私决定。根据 情境完整性框架， 我们知道隐私决定具有高度的情境性。了解为何需要访问权限至关重要。您应该仅请求提供价值所需的功能，用户可能会同意他们会发现价值。此外，当用户清楚了解该功能为何有帮助时，才请求权限。让用户更容易了解使用情境。

我们的 用户研究 表明，当用户 了解网站请求访问权限的原因并感知到好处时，他们允许访问权限的可能性会大大提高。我们还发现，用户希望先探索不熟悉的网站，以便更好地了解允许访问权限后可以获得哪些价值。在此期间，他们通常会关闭或忽略权限提示。对于单次授权，他们可能会先允许单次访问。在您的应用中支持这些行为。

提供替代方案

某些功能的结果可能对用户没有帮助。例如，没有 GPS 传感器的桌面设备的地理位置可能会返回错误的位置，因为该用户连接到了 VPN。其他用户可能不想提供剪贴板访问权限，因为他们更喜欢保持控制，并使用按键组合手动触发这些事件。在这些情况下，请提供替代方法来实现相同的结果。

例如，如果请求地理位置权限，请提供一个文本字段，供用户输入邮政编码或地址。允许使用键盘快捷键或上下文菜单选择元素并将其复制到剪贴板。对于通知，请提供电子邮件而不是推送通知。

一种有用的模式是，将替代界面也用作解释为何访问权限可能有利。看到在触发地理位置 API 的按钮旁边输入位置的选项的用户会感到自己可以控制，因为他们知道自己可以输入地址。同样，如果用户可以在通过推送或电子邮件接收通知之间进行选择，或者在不允许访问相机和麦克风的情况下加入会议，他们就会了解权衡取舍。

避免屏蔽状态

一旦用户永久拒绝访问权限控制型功能，浏览器就会遵守该决定。如果可以继续提示访问权限，恶意网站就会向用户发送大量提示。从功能的屏蔽状态恢复需要付出努力。避免在用户不太可能允许访问权限的情况下请求权限。

一种常见的方法是使用所谓的“预提示”，即向用户说明即将发生的情况，以及您的应用为何需要您将要请求的功能。只有在用户对这类预提示做出肯定回应时，您才应触发浏览器的权限提示。 在某些情况下，用户可能需要合法地从该状态恢复。如需了解详情，请参阅 帮助用户从屏蔽状态恢复部分。

注意第三方内容

注意权限提示的意外来源。您网站上的第三方脚本可能会触发意外的权限提示。这可能会影响用户的体验，尤其是在提示不遵循最佳实践的情况下。如需控制用户体验，请阅读您添加到代码中的任何第三方库和脚本的文档。

何时请求权限

以下是一些适合请求权限的时机示例，这些时机遵循了最佳实践：

  • 在用户手动输入地址时，点击表单字段旁边的使用我的位置信息 后。
  • 在用户订阅视频频道或帖子后，点击对话框中的肯定按钮，该对话框说明更新可以以电子邮件或通知的形式发送。
  • 在用户进入准备加入视频通话的页面后，并在预提示中肯定回答他们希望被看到和听到。如需了解详情，请参阅 Google Meet 案例研究。

代码模式

使用 API 的权限通过不同的方式授予，具体取决于 API。某些较旧的 API 使用的模型是，浏览器会在您首次尝试使用 API 时自动请求权限。一个示例是调用 navigator.geolocation.getCurrentPosition()时的 Geolocation API。

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

其他 API 使用的模型是，您首先使用静态方法显式请求权限。一个很好的示例是 Notification.requestPermission() （用于允许通知）或不太常见的 DeviceOrientationEvent.requestPermission()， 它是 Device Orientation Events API 的一部分。

某些浏览器会自动授予对某些 API 的权限。例如，Chrome 始终允许访问设备方向，而 Safari 会显示提示。

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. */
}

检查权限状态

Browser Support

  • Chrome: 43.
  • Edge: 79.
  • Firefox: 46.
  • Safari: 16.

Source

如需检查是否可以使用特定 API，请使用 Permissions API 中的 navigator.permissions.query() 方法。

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.
}

帮助用户从屏蔽状态恢复

如需帮助用户排查访问权限问题，请使用 Permissions API 检测用户是否屏蔽了访问权限，并提供有关如何更改设置的指南。 当用户与权限控制型功能关联的界面元素互动时，请检查权限状态并打开问题排查对话框。

更改权限状态的具体步骤因浏览器而异，因此请根据最常用浏览器的用户代理字符串提供匹配的说明。

在 Chrome 中，用户可以在地址栏中找到查看网站信息 > 网站设置， 并在此处更改权限。在某些情况下，他们可能必须先重新加载网页，然后才能使用某项功能。在这种情况下，窗口顶部会显示一条消息栏，提示重新加载网站。

Chrome 浏览器中的网站控制。

使用网站控件更改权限后，系统会显示重新加载提示。

其他浏览器（例如 Firefox）中也存在类似的界面，用于控制权限。