您如何从 web-nfc API 获取权限？
Posted
技术标签:
【中文标题】您如何从 web-nfc API 获取权限？【英文标题】：How do you obtain permissions from web-nfc API? 【发布时间】：2020-12-13 00:32:43 【问题描述】：我正在尝试让 Web NFC 通过Web NFC API 工作，但我无法通过NotAllowedError: NFC permission request denied. 的错误消息来处理它
我在 Windows 10 计算机上的 Chrome 89 Dev 上使用它，源代码正在本地运行。
我也尝试了互联网上发布的示例，包括Google sample，但它返回相同的错误。我不担心它在这一点上是实验性的，因为提到 this 确实表明它已经成功通过了必要的测试，包括权限。
我正在使用的 html/JS 代码如下，我已经阅读了specification point 9.3，但我无法理解将其编写为代码，因此是否有一个指导算法会有所帮助来这里解决这个问题？
async function readTag()
if ("NDEFReader" in window)
const reader = new NDEFReader();
try
await reader.scan();
reader.onreading = event =>
const decoder = new TextDecoder();
for (const record of event.message.records)
consoleLog("Record type: " + record.recordType);
consoleLog("MIME type: " + record.mediaType);
consoleLog("=== data ===\n" + decoder.decode(record.data));
catch(error)
consoleLog(error);
else
consoleLog("Web NFC is not supported.");
async function writeTag()
if ("NDEFWriter" in window)
const writer = new NDEFWriter();
try
await writer.write("helloworld");
consoleLog("NDEF message written!");
catch(error)
consoleLog(error);
else
consoleLog("Web NFC is not supported.");
function consoleLog(data)
var logElement = document.getElementById('log');
logElement.innerHTML += data + '\n';
;<!DOCTYPE html>
<html>
<head>
<script src="webnfc.js"></script>
</head>
<body>
<p>
<button onclick="readTag()">Test NFC Read</button>
<button onclick="writeTag()">Test NFC Write</button>
</p>
<pre id="log"></pre>
</body>
</html>【问题讨论】：
【参考方案1】：来自https://web.dev/nfc/#security-and-permissions
Web NFC 仅适用于***框架和安全浏览上下文（仅限 HTTPS）。 Origins 在处理用户手势（例如单击按钮）时必须首先请求“nfc”权限。如果之前未授予访问权限，则 NDEFReader scan() 和 write() 方法会触发用户提示。
我猜你是从file:// URL 运行的，正如你所说的“本地”，这是不受支持的。
您需要使用 https:// URL 从本地 Web 服务器托管它
一旦在正确的范围内尝试扫描或写入应该会触发用户提示。
您也可以查看权限查看https://web.dev/nfc/#check-for-permission
更新： 所以我尝试了示例页面https://googlechrome.github.io/samples/web-nfc/
这适用于我在启用了“实验性 Web 平台功能”的 android Chrome 87 上
当您点击扫描按钮时，会弹出一个询问权限的对话框。
将此示例中的代码与您的代码进行比较，我发现确实如此：-
ndef.addEventListener("reading" , ( message, serialNumber ) => ...
和你一样：-
ndef.onreading = event => ...
我不知道是样式设置在 Event 上发生了什么还是其他什么（嘿，这都是实验性的）
更新2 回答来自桌面支持的 cmets 的问题。
因此，您目前应该是一些桌面/浏览器组合，并且将来可能会有更广泛的支持，因为这不再是实验性标准。显然，正如您的测试链接所建议的那样，Linux 桌面上的 Chrome 应该可以工作，因为这与 Android 支持非常相似，所有 NFC 设备处理都由 libnfc 完成，浏览器只需要知道这个库而不是每种类型的 usb 或其他NFC 的设备。
从 Windows 上的 NFC 支持来看，其中大部分都集中在通过 USB 直接控制 NFC 阅读器作为另一个 USB 设备，而 Windows.Networking.Proximity API 中有一个等效的 libnfc 我没有遇到任何 NFC读者说他们支持这个或任何使用它的人。
对于 Mac Deskstop，鉴于 Apple 在 ios 中的 NFC 支持方面落后，我认为他们的桌面支持将更加落后，即使它可能类似于 Linux。
【讨论】：
好的，所以我已经集成了权限代码并将其托管到 tina.rf.gd （检查页面的源代码），现在我不确定发生了什么，因为我什至不能让它在控制台或用户提示中显示任何内容。 更新了答案，因为我能够让其他一些示例代码工作。 搞乱了代码，我终于让它与您的代码更改一起工作；谢谢你！你认为这些结果可以在桌面浏览器上重复吗？我已经看到桌面 Chrome 支持的许多成功（例如wpt.fyi/results/…），但我不确定为什么它没有以相同的方式处理它，即使使用连接的 NFC 阅读器:// 添加了关于桌面支持的更新，因为测试结果的链接显示 Linux 上的 Chrome 支持应该和 Android 上的一样好（因为引擎盖它们真的是一回事） 嘿@andrew 我刚刚读回你关于在 Linux 上运行的 libnfc 的最新答案；似乎您对如何有机会在浏览器中链接 libnfc 有粗略的想法？我让它在终端上独立工作，我正在试图弄清楚如何将它整合到 Web 应用程序中，那么你有什么建议吗？【参考方案2】：正如您在 https://web.dev/nfc/#browser-support 上看到的那样，Web NFC 目前仅支持 Android，这就是您在 Windows 上收到 "NotAllowedError: NFC permission request denied." 错误的原因。
【讨论】：
很高兴知道，谢谢！-- Windows 支持和 API 是否正在进行任何试验？ 暂时没有。以上是关于您如何从 web-nfc API 获取权限？的主要内容，如果未能解决你的问题，请参考以下文章
如何以编程方式获取 Azure AD 应用程序的 Graph API 权限指南？
如何获取 Facebook 公共页面内容访问权限只是为了提取数据？
您如何从 Azure Active Directory 中获取搭建的 Weather Forecast Api 将接受的访问令牌？