显示剪贴板权限弹出窗口

Question

我正在开发需要用户许可才能读取/写入剪贴板的应用程序。如果他们没有授予这些权限，我想阻止访问我的网站的一部分。此外，如果他们尚未授予权限，则会显示一个按钮，单击该按钮时会在浏览器的左上角显示一个小弹出窗口以授予权限。我已经尝试过使用这个，但它不起作用：

async function checkClipboardPermissionAndRequest() {
  try {
    const result = await navigator.permissions.query({ name: 'clipboard-read' });
    
    if (result.state !== 'granted') {
      const permissionRequest = await navigator.permissions.request({ name: 'clipboard-read' });
      if (permissionRequest.state === 'granted') {
        console.log('Clipboard read permission granted.');
      } else {
        console.log('Clipboard read permission denied.');
      }
    } else {
      console.log('Clipboard read permission already granted.');
    }
  } catch (error) {
    console.error('Error checking clipboard permission:', error);
  }
}

// Call the function to check clipboard permissions and request if necessary
checkClipboardPermissionAndRequest();

这仅用于 Web 控制台测试，但我想在我的 Next.js 应用程序中实现它。

Answer 1

您提供的代码片段的主要问题是 navigator.permissions.request() 的使用。目前，navigator.permissions API 中没有名为 request 的方法。这就是该功能无法按预期工作的原因。

navigator.permissions API 允许使用 navigator.permissions.query() 查询权限状态，但不提供直接请求权限的方法。当尝试执行需要该权限的操作（例如读取或写入剪贴板）时，通常会隐式请求访问剪贴板（或任何其他敏感资源）的权限。

以下是有关如何管理剪贴板权限的正确方法：

示例 Html：

<div id="contentArea" style="display: none;">
    <p>Clipboard-accessible content here.</p>
</div>

示例js：

async function checkClipboardPermissionAndRequest() {
        const contentArea = document.getElementById('contentArea');
        try {
            const result = await navigator.permissions.query({ name: 'clipboard-read' });
            console.log(`Clipboard read permission: ${result.state}`);

            if (result.state !== 'granted') {
                try {
                    const text = await navigator.clipboard.readText();
                    console.log('Clipboard read successfully:', text);
                    console.log('Clipboard read permission granted after read attempt.');
                    contentArea.style.display = 'block';
                } catch (error) {
                    console.log('Clipboard read permission denied after read attempt:', error);
                    contentArea.style.display = 'none'; 
                }
            } else {
                console.log('Clipboard read permission was already granted.');
                contentArea.style.display = 'block';
            }
        } catch (error) {
            console.error('Error checking clipboard permission:', error);
            contentArea.style.display = 'none'; 
        }
    }

checkClipboardPermissionAndRequest();