Эта статья — перевод оригинальной статьи "NFC comes to the web".
Также я веду телеграм канал “Frontend по-флотски”, где рассказываю про интересные вещи из мира разработки интерфейсов.
Вступление
Это должно было быть примерно в 2012 году, когда Google выпустил первые телефоны с поддержкой NFC (Google Nexus S) вместе с обновлением для Android, которое позволило разработчикам использовать API NFC. Я хорошо помню, что заплатил несколько евро за несколько тегов NFC, чтобы попробовать (сегодня эти теги стоят очень дёшево). Хотя я был очень убежден, и команда CX Labs анонсировала множество прототипов, таких как покупки с помощью NFC, Apple потребовалось много лет, чтобы внедрить NFC и, наконец, открыть API для своих разработчиков. О NFC почти забыли... Но сейчас 2021 год, и большинство телефонов имеют встроенное оборудование NFC. Основной вариант использования - платежи, эмуляция карты NFC - один из трех режимов работы NFC, и большинство из нас ежедневно используют Apple или Google Pay.
Это означает, что функция NFC широко доступна для разработчиков, но, честно говоря, она не очень часто используется, кроме как через платежные приложения, поддерживаемые Google/Apple. Но только в мае 2021 года вышел Chrome для Android 91, который теперь поддерживает веб-NFC - любой веб-разработчик может экспериментировать и использовать NFC на простых HTML-страницах. Хотя Safari от Apple и другие браузеры снова опаздывают в игру, это может снова ознаменовать момент для нового прорыва в технологии NFC. Web NFC снижает барьер для разработчиков и, что более важно, функциональность NFC теперь может быть частью Интернета: никаких установок.
Web NFC 101
NFC расшифровывается как Near Field Communications и представляет собой беспроводную технологию малого радиуса действия, работающую на частоте 13,56 МГц. Малый радиус на самом деле означает близкое расстояние: для связи устройства должны находиться на расстоянии нескольких сантиметров друг от друга. Форум NFC определяет четыре режима работы: устройство чтения/записи, p2p сеть, эмуляция карты и беспроводная зарядка. Из этих четырех режимов только первый - чтение/запись - и только так называемая спецификация NDEF поддерживается Web NFC. NDEF - это формат обмена данными NFC, описывающий стандартизированный способ кодирования данных в теги NFC и считывания их обратно. Например, он определяет, как кодируется текст или как URL-адреса могут быть закодированы с сохранением байтов.
Внесу ещё немного ясности: вы не сможете имитировать кредитную карту с NFC для платежей в магазине, а также не сможете «включить беспроводную зарядку NFC» через Web NFC. Но все, что связано с чтением и записью небольших фрагментов данных в теги NFC в стандартизированном формате NDEF, включено в Web NFC.
Возможные варианты использования
В самой спецификации Web NFC перечислено несколько вариантов использования, например, использование NFC тегов в художественных галереях или музеях. Должен признать, что во многих случаях я не вижу явной выгоды. Эти теги вполне могут быть написаны с помощью специального телефона и приложения NFC, и пользователи этих тегов будут просто касаться их, чтобы открывать URL - это современное искусство. Я считаю, что Web NFC может сыграть роль, особенно в CX, когда дело доходит до случаев использования, для которых клиенты никогда не установят приложение в наши дни. Например, чтобы участвовать в игре в розничном магазине, я бы не стал устанавливать приложение, но я мог бы открыть веб-страницу для участия. Web NFC также поддерживает запись NFC тегов, которые, например, открывают некоторые интересные области применения для технических специалистов. Хотя зону обслуживания можно идентифицировать с помощью NFC тега, теперь точная дата/время обслуживания машины также может быть записана обратно в тег. Все это возможно без необходимости установки специального приложения, которое снижает барьеры для входа.
Чтобы поэкспериментировать с Web NFC на моем Pixel 5 и браузере Chrome, я создал небольшую общедоступную веб-страницу, которую вы также можете использовать, чтобы попробовать. Все следующие примеры кода взяты оттуда. Web NFC, а также стандарт NDEF для понимания сообщений, написанных или прочитанных из тегов NFC, можно найти в официальной спецификации.
Давайте напишем пару тегов
Чтобы писать NFC тег, вам необходимо понимать структуру сообщения NDEF. Сообщение, записываемое в тег, состоит из нескольких записей NDEFRecords, которые могут быть обычным текстом, URL-адресами или более сложными типами, такими как смарт-постеры.
Как видите, написать простое текстовое сообщение просто:
document.getElementById("write").addEventListener("click", async () => {
log("writeLog", "User clicked write button");
try {
const ndef = new NDEFReader();
await ndef.write("Hello Office of the CTO!");
log("writeLog", "> Text Message written");
} catch (error) {
log("writeLog", "Argh! " + error);
}
});Теперь давайте запишем URL в тег. Метод write требует от нас список, но здесь мы будем использовать только один URL:
document.getElementById("writeUrl").addEventListener("click", async () => {
log("writeUrlLog", "User clicked write button");
const ndef = new NDEFReader();
try {
await ndef.write({
records: [{ recordType: "url", data: "https://cxlabs.sap.com" }]
});
log("writeUrlLog", "> URl Message written");
} catch {
log("writeUrlLog", "Argh! " + error);
}
});Давайте прочитаем пару тегов
Чтение тегов может быть более сложной задачей, поскольку вам нужно различать разные записи, которые вы можете найти. В моем примере мы пытаемся разобраться с несколькими распространенными случаями, такими как текст, URL-адреса, а также данные в JSON, которые, конечно, будут иметь определенную структуру, о которой ваше приложение должно знать:
document.getElementById("read").addEventListener("click", async () => {
log("readLog", "User clicked read button");
try {
const ndef = new NDEFReader();
await ndef.scan();
log("readLog", "> Scan started");
ndef.addEventListener("readingerror", () => {
log(
"readLog",
"Argh! Cannot read data from the NFC tag. Try another one?"
);
});
ndef.addEventListener("reading", ({ message, serialNumber }) => {
log("readLog", `> Serial Number: ${serialNumber}`);
log("readLog", `> Records: (${message.records.length})`);
const decoder = new TextDecoder();
for (const record of message.records) {
switch (record.recordType) {
case "text":
const textDecoder = new TextDecoder(record.encoding);
log(
"readLog",
`Text: ${textDecoder.decode(record.data)} (${record.lang})`
);
break;
case "url":
log("readLog", `URL: ${decoder.decode(record.data)}`);
break;
case "mime":
if (record.mediaType === "application/json") {
log(
"readLog",
`JSON: ${JSON.parse(decoder.decode(record.data))}`
);
} else {
log("readLog", `Media not handled`);
}
break;
default:
log("readLog", `Record not handled`);
}
}
});
} catch (error) {
log("readLog", "Argh! " + error);
}
});Итог
На данный момент Web NFC доступен только на телефонах Android через браузер Chrome. Мне пришлось ждать несколько лет, когда NFC впервые пришёл в родной Android. Но apple ещё нужно наверстать упущенное, поэтому я определенно не буду пытаться предсказать, когда большинство браузеров на большинстве мобильных ОС будут поддерживать Web NFC. Но я должен сказать, что простота, с которой веб-разработчики теперь могут использовать физические теги NFC - поразительна, я почти уверен, что это вызовет множество творческих идей. Несомненно, будут случаи использования также в области обслуживания клиентов, и также ясно, что Интернет как платформа будет продолжать развиваться. Мы будем внимательно следить за Web NFC и пока нашли отличный новый API, который мы можем начать использовать уже сегодня.
Комментарии (46)
aik
03.08.2021 00:43Непонятно, зачем это надо.
Замена кур-кодам?
bankir1980
03.08.2021 01:39Ну, например, для идентификации клиента. Допустим есть веб страничка или даже приложение у клиента, которое принимает через nfc токен, подписывает его приватным ключём, хранящимся на телефоне и подписанный токен возвращает отправителю токена (сотрудник банка открывает спец веб страницу у себя), который публичным ключём расшифровывает и делает вывод, что клиент идентифицирован. Например, как замена бумажного паспорта. Этакая ЭЦП идентификация в кассе банка, например.
bankir1980
03.08.2021 01:47Ещё например для 2-х факторной аутентификации, когда мобильный банк на одном физическом телефоне, а ЭЦП для подписи распоряжений на переводы - на другом физическом телефоне. Вот обмен с шифрацией и можно через nfc организовать. А вот если бы ещё nfc девайсы к компу подключать можно было и через веб с ними работать, то тут и десктопный веб клиент-банк притянуть можно, где подпись через телефон происходила бы.
dreesh
03.08.2021 02:58а блютус чем не угодил? Может быть только ценой nfc метки, но если мы работаем с ассиметричным шифрованием то здесь и qr достаточно (приватный ключ не покидает телефон)
aik
03.08.2021 06:50При работе на компьютере у вас есть физический usb-токен. Нахрена для этого что-то мутить с телефонами — не понимаю.
MaxxONE
03.08.2021 07:42У меня, например, при работе на компьютере нет физического usb-токена. В отличие от телефона.
aik
03.08.2021 07:58А при работе с телефоном у вас физический токен есть?
MaxxONE
03.08.2021 08:48Нет. Зачем? И какое это имеет отношение к дискуссии? Я имел в виду, что телефон у меня есть, в отличие от токена.
aik
03.08.2021 09:26+1Человеку хочется nfc-токен к компьютеру прикладывать.
MaxxONE
03.08.2021 09:35Я под nfc-токеном в данном контексте видел телефон. Здорово же: телефон приложил и авторизовался.
aik
03.08.2021 09:40Ну так кур-код с экрана считал — и авторизовался.
Или, если у вас приложение для сайта стоит, отпечаток пальца на телефоне приложил — и авторизовался.
Или код из смски вбил и авторизовался.
Просто резервные способы авторизации всё равно придётся делать для тех, у кого нет NFC (или смартфона вообще, хотя тут уже дискриминация местами есть). А если делать резервный универсальный способ, то делать какой-то уникальный для определённой группы людей может показаться лишней тратой времени.
inkelyad
03.08.2021 10:34В контексте банков физический токен есть приблизительно у всех — банковская карта называется. Которые в России просто стремительно заменяются на варианты с NFC.
Телефон тут может использоваться в качестве ридера к компу либо сам по себе. Приложил банковскую карту, набрал пин (не обязательно тот же самый, что в магазине используешь) — и вход в банковский сайт произошел/транзакция авторизовалась.
bankir1980
03.08.2021 09:32Во-первых, токен не всегда работает (на линуксе нужны танцы с бубном, чтобы заработало), так же нужны плагины в браузер ставить. Во-вторых, до сих пор есть банки, где ЭЦП не на токенах, а просто файлики на флэшке.. В-третьих, таскать с собой токен не всегда удобно. Да ещё может и не один. А как его применить для мобильного приложения? Токен только для десктопа подходит.
aik
03.08.2021 09:41А NFC-токен у вас будет без всех этих проблем работать — и в линуксе без бубна, и в браузере без плагина, и таскать его проблемой не будет?
bankir1980
03.08.2021 09:46Вы кажется не поняли о чем я писал. Я не про отдельное устройство, а про то, что обмен ЭЦП можно организовать между двумя телефонами с помощью nfc. Зачем тут танцы с бубном, если вместо нас уже google потанцевать и внедрил поддержку nfc прямо в хром?
aik
03.08.2021 09:56Не понял.
Либо у вас nfc-токен как отдельный девайс, либо у вас ЭЦП в телефоне. В симке там или ещё где. Зачем тут ещё второй телефон?bankir1980
03.08.2021 10:01Для доп. защиты. Если телефон скомпрометируется или его украдут, то могут быть проблемы. Если разнести функции на разные девайсы - то это безопаснее. Но да, это скорее для совсем уже параноиков.
aik
03.08.2021 10:17А если украдут именно телефон с токеном?
inkelyad
03.08.2021 10:48Укравшему придется постараться, выковыривая из телефона ключи. А мы пока зайдем резервным способом и объявим украденный токен скомпрометированным.
Но, вообще, использовать для этих целей смартфон — это давать слишком большую поверхность атаки. Для этого должны использоваться устройства, похожие вот на это
Дешевый и универсальный ридер с минимальными клавиатурой/экраном.
aik
03.08.2021 11:23Если ему придётся постараться, то что мешает такую же степень защиты настроить на первом телефоне?
inkelyad
03.08.2021 11:39Удобство. Сильно защищенной железкой неудобно пользоваться.
В частности, сильно полезно, когда железка с важными ключами онлайна не умеет или уходит в него редко (чтобы какой-нибудь келоггер пин/пароль в сеть отправить не мог). Понятно, что это мало совместимо с прочими потребностями, для которых смарт используется.
aik
03.08.2021 11:41Тогда зачем вам вторым устройством именно смартфон? Может быть простой токен лучше иметь? NFC, usb, nfc+usb — если хочется универсальности…
inkelyad
03.08.2021 11:48Как я уже сказал в своем сообщении — я тоже считаю, что смартфон совершенно излишен. Но если он уже есть (ну завалялся на полках и купить легко, а токен пойди еще найди) — то, наверное, можно и использовать. NFC протоколу должно быть все равно.
vikarti
03.08.2021 14:19Так есть токены в том числе и от Yubico.
Там (не в одном токене конечно) и все какие только можно USBшные коннекторы включая Lightning и NFC и хоть какая поддержка работы через Web даже если клиент не умеет в Webauthn…
И никогда не будет работать с Российскими банками. Потому что там нету ГОСТа.
aik
03.08.2021 06:49Бумажный паспорт — это, в какой-то мере, подтверждение физической личности конкретного человека (по фотографии). А в случае с токеном только владение самим токеном подтвержается.
Вот как возможность использовать ЭЦП на мобильниках — да, наверное. Нынешние же токены только в usb втыкаются, да ещё и всякое криптопро хотят…
Oleg_Dolbik
03.08.2021 09:26Эцп на смартфонах давно уже. Точнее на сим карте. Пример получения
aik
03.08.2021 09:43Если у вас уже есть подпись на usb-токене, то засунуть её в симкарту может быть сложновато.
bankir1980
03.08.2021 09:42С 2023 года будут цифровые паспорта выпускать с nfc. Даже приложение уже сделали, на которое можно разместить паспорт и не брать его с собой.
BugM
03.08.2021 04:03Не факт что даже для этого взлетит.
Сейчас даже самокаты приходится арендовать по куар коду, а не по nfc. Хотя казалось бы. Поднести телефон ведь гораздо проще и удобнее чем наводить камеру при плохом освещении. И приложения в которых все давно можно у всех стоят, без них самокат и так не арендовать. И самокат стоит на порядки дороже метки. А все равно включай фонарик и фоткай куар.
Куар оставить в виде бекапа для пользователей совсем старых телефонов никаких проблем.
todoman
03.08.2021 08:22У меня и у жены совсем новый телефон, и нет NFC. А куар-код считывается любым смартфоном. Вот и всё, и никаких проблем.
P.S. А, я вас вспомнил, вы предлагали решить проблемы школьной информатики закупкой ноутбуков каждому российскому школьнику, мда. У вас очень своеобразный московский взгляд на материально-техническую базу.
vikarti
03.08.2021 14:20Телефон видимо китайский изначально для китая и не самый дорогой? Ну не используют в китае NFC для оплаты потому что уперлись в QR коды.
sergio_nsk
03.08.2021 07:03Надеюсь, что будет можно оплачивать онлайн-покупки банковской картой без ввода и сохранения карты.
OKyJIucT
03.08.2021 08:07+1Это и сейчас можно, на сайте появляется кнопка "Google Pay" или "Apple Pay", нажимаете и платите без указания данных карты.
sergio_nsk
03.08.2021 08:19На российских и китайских сайтах это всё же скорее редкость, чем правило.
0x131315
03.08.2021 20:00Не уверен. Всё таки редко встретишь сайт, который принимает оплату переводами или наложенным платежом.
Обычно у большинства как минимум всякие онлайн-кассы, которые выступают посредником между продавцом, покупателем, а часто и между продавцом и ФНС (принимают оплаты, печатают чеки).
Такие кассы сами предоставляют возможность оплатить множеством способов: и картой, и всякими g/a/s-pay, и всякими киви, иногда и wmoney/paypal.
Наиболее распространенные - я-касса, сберпей, есть и менее известные.
Так что от продавца часто почти ничего и не требуется для подключения к таким сервисам: заключил договор, завел счёт, подключил скрипт к сайту, и принимай оплаты. Всю заботу по обслуживанию/поддержке берут на себя онлайн-кассы.
Иногда, особенно у крупных или околоайтишных сайтов, есть и прямые интеграции с конкретными системами оплаты, в обход онлайн-касс: g/a/s-pay, paypal, wmoney. Это уже сложнее онлайн-касс, каждую нужно подключать отдельно, отдельные договора, и т.п., гемора больше, а потому и реже встречается.
С доставками кстати та же самая тема: полно агрегаторов, которые дают доступ сразу ко множеству сетей доставок, но встречаются и отдельные подключения в обход агрегаторов, с большей бумажной волокитой.
sergio_nsk
03.08.2021 20:38*Pay тоже требуют вводить карту в систему. Я ожидаю, что с Web NFC будет работать так, что просто приложил карту к телефону и всё, оплатил без всяких посредников, вводов и сохранения данных карты.
0x131315
04.08.2021 08:34Конечно требуется ввести карту.
А чем связка телефон+карта удобнее связки "любое устройство с доступом в интернет + сохранённая в электронном кошельке карта"?
Онлайн-кассы ставят не от хорошей жизни, а чтобы сэкономить на программистах. Вводить полноценные интеграции с платежными системами дорого. Вводить nfc-оплату как минимум не дешевле. Если где она и появится, то скорее всего в онлайн-кассах.
sergio_nsk
04.08.2021 09:20По-моему, я с самого начала и позже чётко написал, что я ожидаю: нигде не сохранять данные карты. Не надо навязывать мне своё мнение.
inkelyad
04.08.2021 09:27Тем что карта сохраненная. Паранойя срабатывает.
А в первом случае будет "нет карты (ты не прикладывал) — нет транзакции (потому что непонятно, откуда)".
С другой стороны, по этому способу наверняка получится "card present" оплата, что выгодней для продавца, но может быть неприятней для покупателя.
v1000
03.08.2021 10:14Забавная технология. Как понимаю, это развитие идей куки в браузерах, и вместе со всеми преимуществами и недостатками.
Одна из проблем, что это таки и не стало еще стандартом для всех телефонов, в отличие от камеры для считывания кодов.
Попробовал на телефоне с NFC на андроид 6 и Хром 91, не работает.
bankir1980
03.08.2021 21:09+1Неверно понимаете. NFC — технология беспроводной передачи данных малого радиуса действия, которая даёт возможность обмена данными между устройствами, находящимися на расстоянии около 10 сантиметров. Это не чудо шкатулка, где хранятся данные. Чтобы протестировать на сайте по ссылке из статьи, нажмите read и приложите любую банковскую карту с бесконтактной оплатой. Информацию не считает, но вот браузер увидит, что контакт с картой был.
bankir1980
03.08.2021 22:11+1Ещё брелки ключи от подъезда считались на этом тестовом сайте. Серийный номер.
todoman
Не факт.
Далеко не факт. Хотелось бы цифр, вменяемой статистики, а не случайно брошенного термина «большинство».
И кто эти «из нас»? Африканский континент хотел бы уточнений на этот счёт.
Заметка интересная, но небрежность автора оригинала к вводным данным сильно настораживает.
Jalt
Who cares about африканский континент? Автор из США/Европы, делает решения в первую очередь для этих регионов (где сосредоточена большая часть денег). Учитывая, что в Штатах уже 40% владельцев смартфонов используют мобильные платежи (https://techcrunch.com/2021/04/05/fueled-by-pandemic-contactless-mobile-payments-to-surpass-half-of-all-smartphone-users-in-u-s-by-2025) и что автор обращается к более технологически продвинутой аудитории, можно с высокой долей вероятности предположить, что большинство использует именно Some Pay.