1

我正在尝试让 Web NFC 通过Web NFC API工作,但我无法通过错误消息NotAllowedError: NFC permission request denied.

我在 Windows 10 计算机上的 Chrome 89 Dev 上使用它,源代码正在本地运行。

我也尝试过发布在 Internet 上的示例,包括Google 示例,但它返回相同的错误。我不担心它在这一点上是实验性的,因为提到确实表明它已经成功通过了必要的测试,包括权限。

我正在使用的 HTML/JS 代码如下,并且我已经阅读了规范点 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>

4

2 回答 2

3

来自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/

这适用于我在 Android Chrome 87 上启用了“实验性 Web 平台功能”

当您点击扫描按钮时,会弹出一个询问权限的对话框。

将此示例中的代码与您的代码进行比较,我注意到:-

ndef.addEventListener("reading" , ({ message, serialNumber }) => { ...

和你一样:-

ndef.onreading = event => { ...

我不知道是事件发生的样式设置还是其他什么(嘿,这都是实验性的)

Update2 从桌面支持的评论中回答问题。

因此,您目前应该是一些桌面/浏览器组合,并且将来可能会有更广泛的支持,因为这不再是实验性标准。显然,正如您的测试链接所建议的那样,Linux 桌面上的 Chrome 应该可以工作,因为这与 Android 支持非常相似,所有 NFC 设备处理都由完成,libnfc浏览器只需要知道这个库而不是每种类型的 USB 或其他设备即可做NFC。

从 Windows 上的 NFC 支持来看,其中大部分都集中在通过 USB 直接控制 NFC 阅读器作为另一个 USB 设备,而Windows.Networking.ProximityAPI 中有一个等效的 libnfc 我没有遇到任何 NFC 阅读器说他们支持这个或任何人使用它。

对于 Mac Deskstop,鉴于 Apple 在 iOS 的 NFC 支持方面落后于曲线,我觉得他们的桌面支持将更加落后,即使它可能类似于 Linux。

于 2020-12-13T00:58:41.647 回答
2

正如您在https://web.dev/nfc/#browser-support中看到的那样,Web NFC 目前仅支持 Android,这就是您"NotAllowedError: NFC permission request denied."在 Windows 上出现错误的原因。

于 2020-12-15T11:27:20.963 回答