web-nfcAPI如何获取权限?
How do you obtain permissions from web-nfc API?
我试图让 Web NFC 通过 Web NFC API 工作,但我无法通过 NotAllowedError: NFC permission request denied.
的错误消息来解决它
我在 Chrome 89 Dev 的 Windows 10 计算机上使用它,源代码在本地 运行。
我也尝试了网上发布的示例,包括 Google sample but it returns the same error. I'm not concerned with it being experimental at this point as referring to 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>
来自https://web.dev/nfc/#security-and-permissions
Web NFC is only available to top-level frames and secure browsing contexts (HTTPS only). Origins must first request the "nfc" permission while handling a user gesture (e.g a button click). The NDEFReader scan() and write() methods trigger a user prompt, if access was not previously granted.
我猜你是 运行 来自 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 => { ...
我不知道是事件发生的样式设置还是其他原因(嘿,这都是实验性的)
更新2
从桌面支持的评论中回答问题。
所以你现在应该是一些 desktop/browser 组合,并且将来可能会有更广泛的支持,因为这不再是实验标准。显然,正如您的测试 link 建议 Chrome 在 Linux 桌面上应该可以工作,因为这与 Android 支持非常相似,所有 NFC 设备处理都由 [=14= 完成] 并且浏览器只需要知道这个库而不是每一种类型的 USB 或其他可以进行 NFC 的设备。
从 Windows 上的 NFC 支持来看,大部分内容集中在通过 USB 直接控制 NFC reader 作为另一个 USB 设备,而 [= 中有一个 libnfc 等价物15=] API's 我没有遇到任何 NFC reader 说他们支持这个或任何使用它的人。
对于 Mac Deskstop,鉴于 Apple 在 iOS 中落后于 NFC 支持,我觉得他们的桌面支持会更落后,即使它可能类似于 Linux.
如您在 https://web.dev/nfc/#browser-support 中所见,Web NFC 目前仅支持 Android,这就是为什么您在 Windows.
上出现 "NotAllowedError: NFC permission request denied."
错误的原因
我试图让 Web NFC 通过 Web NFC API 工作,但我无法通过 NotAllowedError: NFC permission request denied.
我在 Chrome 89 Dev 的 Windows 10 计算机上使用它,源代码在本地 运行。
我也尝试了网上发布的示例,包括 Google sample but it returns the same error. I'm not concerned with it being experimental at this point as referring to 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>
来自https://web.dev/nfc/#security-and-permissions
Web NFC is only available to top-level frames and secure browsing contexts (HTTPS only). Origins must first request the "nfc" permission while handling a user gesture (e.g a button click). The NDEFReader scan() and write() methods trigger a user prompt, if access was not previously granted.
我猜你是 运行 来自 file://
URL 正如你所说的“本地”不受支持。
您需要使用 https://
URL
一旦在正确的范围内尝试扫描或写入应该会触发用户提示。
您还可以检查权限,请参阅 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 => { ...
我不知道是事件发生的样式设置还是其他原因(嘿,这都是实验性的)
更新2 从桌面支持的评论中回答问题。
所以你现在应该是一些 desktop/browser 组合,并且将来可能会有更广泛的支持,因为这不再是实验标准。显然,正如您的测试 link 建议 Chrome 在 Linux 桌面上应该可以工作,因为这与 Android 支持非常相似,所有 NFC 设备处理都由 [=14= 完成] 并且浏览器只需要知道这个库而不是每一种类型的 USB 或其他可以进行 NFC 的设备。
从 Windows 上的 NFC 支持来看,大部分内容集中在通过 USB 直接控制 NFC reader 作为另一个 USB 设备,而 [= 中有一个 libnfc 等价物15=] API's 我没有遇到任何 NFC reader 说他们支持这个或任何使用它的人。
对于 Mac Deskstop,鉴于 Apple 在 iOS 中落后于 NFC 支持,我觉得他们的桌面支持会更落后,即使它可能类似于 Linux.
如您在 https://web.dev/nfc/#browser-support 中所见,Web NFC 目前仅支持 Android,这就是为什么您在 Windows.
上出现"NotAllowedError: NFC permission request denied."
错误的原因