Как вы получаете разрешения от web-nfc API?
Я пытаюсь заставить Web NFC работать через Web NFC API, но не могу получить сообщение об ошибке NotAllowedError: NFC permission request denied.
Я использую это в Chrome 89 Dev на компьютере с Windows 10, и исходный код запускается локально.
Я также пробовал примеры, размещенные в Интернете, в том числе пример 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>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
От https://web.dev/nfc/#security-and-permissions
Web NFC доступен только для фреймов верхнего уровня и безопасных контекстов просмотра (только HTTPS). Origins должен сначала запросить разрешение «nfc» при обработке пользовательского жеста (например, нажатия кнопки). Методы NDEFReader scan() и write() запускают запрос пользователя, если доступ не был ранее предоставлен.
Я предполагаю, что вы работаете с URL-адреса file://, как вы сказали, «локально», который не поддерживается.
Вам необходимо разместить его на локальном веб-сервере, используя URL-адрес https://.
После того, как вы попали в нужную область, попытка сканирования или записи должна вызвать запрос пользователя.
Вы также можете проверить разрешения, см. https://web.dev/nfc/#check-for-permission
Обновление:
Поэтому я попробовал пример страницы https://googlechrome.github.io/samples/web-nfc/
И это работает для меня на Android Chrome 87 с включенными «Экспериментальными функциями веб-платформы».
Когда вы нажмете кнопку сканирования, появится диалоговое окно с запросом разрешения.
Сравнивая код в этом образце с вашим, я заметил, что он делает: -
ndef.addEventListener("reading" , ({ message, serialNumber }) => { ...
Где, как у вас: -
ndef.onreading = event => { ...
Я не знаю, то ли это настройка стиля, что происходит на событии, или что-то еще (Эй, это все экспериментально)
Обновление2 Чтобы ответить на вопрос из комментариев службы поддержки Desktop.
Таким образом, на данный момент вы должны использовать некоторые из комбинаций рабочего стола / браузера, и, возможно, в будущем будет более широкая поддержка, поскольку это больше не экспериментальные стандарты. Очевидно, что ваша тестовая ссылка предполагает, что Chrome на рабочем столе Linux должен работать, поскольку это действительно похоже на поддержку Android, при этом вся обработка устройств NFC выполняется libnfc, и браузер просто должен знать об этой библиотеке, а не о каждом типе USB или другом устройстве, чем может сделать NFC.
Из того, что видно из поддержки NFC в Windows, большая часть этого сосредоточена на прямом управлении считывателем NFC через USB как просто еще одним USB-устройством, в то время как в Windows.Networking.Proximity API есть эквивалент libnfc. Я не встречал ни одного считывателя NFC, говорящего, что они поддерживают это или кто-нибудь, кто его использует.
Что касается Mac Desktop, учитывая, что Apple отстает от поддержки NFC в iOS, я чувствую, что их поддержка настольных компьютеров будет еще дальше, хотя она может быть похожа на Linux.
Обновил ответ, так как мне удалось заставить работать другой пример кода.
Возился с кодом, и я, наконец, заставил его работать с вашим изменением кода; Спасибо! Как вы думаете, можно ли повторить эти результаты в десктопном браузере? Я видел много успехов в поддержке настольного Chrome (например, wpt.fyi/results/…), но я не уверен, почему он не обрабатывает его таким же образом, даже с подключенным считывателем NFC ://
Добавлено обновление о поддержке настольных компьютеров, так как ссылка на результаты тестирования показывает, что поддержка Chrome в Linux должна быть такой же хорошей, как и на Android (потому что на самом деле это одно и то же).
Понятно! Большое спасибо за то, что поделились своим мнением - это очень ценно :)
эй, @andrew, я только что перечитал твой обновленный ответ о том, что libnfc работает в Linux; похоже, у вас есть приблизительное представление о том, как можно связать libnfc в браузере? У меня он работает отдельно от терминала, и я пытаюсь понять, как я могу включить его в веб-приложение, так что у вас есть какие-нибудь советы по этому поводу?
Извините, что нет советов, это было просто общее наблюдение того, как nfc обрабатывается на низком уровне в различных ОС и, возможно, насколько сложно для разных разработчиков браузеров добавить поддержку этого стандарта. У меня нет внутренней информации о различных планах или сроках веб-браузера, чтобы добавить поддержку в различных ОС.
Ага, стоит попробовать! В любом случае спасибо за вашу помощь @andrew :)
Как вы можете прочитать на https://web.dev/nfc/#browser-support, Web NFC пока поддерживает только Android, поэтому вы получаете ошибку "NotAllowedError: NFC permission request denied." в Windows.
Полезно знать, спасибо! Проводятся ли испытания поддержки Windows и API?
На данный момент их нет.
Итак, я интегрировал код разрешений и разместил его на tina.rf.gd (проверьте страницу на наличие исходных кодов), и теперь я не уверен, что происходит, поскольку я даже не могу получить его. отображать что-либо в консоли, ни приглашение пользователя.