0

Леонид Каганов: дневник

Другие записи за это число:
2022/12/07_qdrinx - Хроники полураспада
<< предыдущая заметкаследующая заметка >>
07 декабря 2022
Логин на сайте по ключу NFC, банковской или транспортной карте

Мои читатели постоянно жалуются на проблемы с логином на сайте. Там действительно постоянные проблемы, часть из которых связана с глючащими сторонними сервисами, через которые можно логиниться Гуглем, Фейсбуком и прочей ерундой. Родная часть авторизации сайта, которую писал я сам (логин-пароль), она второе десятилетие работает без проблем, вот только мало кто использует логин-пароль. И потом не могут вспомнить. И емайл давно сменили. Тем не менее, я что-то время от времени дорабатываю и чиню. А сегодня сделал логин по банковской карточке. Шучу. В смысле — не шучу. В смысле, не по банковской карточке. Вообще по любой метке NFC. И банковская не исключение.

Расскажу по порядку. Cовременные телефоны умеют читать поднесенные к ним метки NFC. А некоторые браузеры — в частности, Android Chrome — позволяют делать это скриптом прямо со страниц сайта. Сразу скажу, что твой браузер — хрен знает, что за зверь. Скорее всего, ты читаешь пост не на моем сайте, а в какой-нибудь соцсети, RSS или иной помойке, куда копию текста занес робот. Тогда можно дальше не читать, речь про мой сайт..

Меткой NFC может быть что угодно — большинство ключей от домофона или офиса, любая транспортная карта или банковская бесконтактная. Некоторые карты в принципе тоже NFC, но имеют другой стандарт, и там не читается даже серийник. Например, водительские права и еще пару экзотических карт мне прочесть не удалось — связь по NFC срабатывает, но в ответ пишет, что формат неизвестен. Но у большинства карт телефон может прочесть уникальный номер чипа (типа A0:CD:48:1E:DF) и использовать как простой уникальный ключ для логина.

Как добавить ключ NFC к своему действующему аккаунту?

Видим кружочек в правой верхней части страницы и жмем на него (стараясь не попасть в квадратик письма, иначе откроется личная почта, а не личная карточка). Когда открылась личная карточка, видим в ней посерединке новую надпись с кнопкой: «Ключ NFC: [Add]» Жмем «Add», и если все хорошо (если не вылетит сообщение, что браузер не поддерживает NFC), то экран потемнеет и в центре будет крутиться каруселька. Это значит, что у вас есть долгие 10 секунд, чтобы поднести к телефону какую-нибудь карту. Если прочитать NFC удалось, телефон напишет «Saved!», и отныне вы всегда сможете этой картой залогиниться на моем сайте (пока не удалите ее в той же личной карточке при помощи красной кнопки).

Теперь как залогиниться ключом NFC?

Из той же личной карточки жмем вверху кнопку «залогиниться» (есть и прямая ссылка: https://lleo.me/dnevnik/login), в открывшемся окне жмем кнопку «Scan NFC». Экран темнеет, каруселька крутится, подносим карту — ура, сайт нас узнал.

Как это работает физически?

Технологии не стоят на месте. Но, как всегда бывает, сильно опережают практическое применение. Сейчас в браузерах, особенно мобильных, есть JS-доступ ко всяким полезным сервисам, датчикам, микрофону, камере и прочим технологическим чудесам, и все это позволяет чуть ли не писать полноценные мобильные приложения прямо на странице сайта. Вы наверно помните, я иногда писал на страницах сайта то проверялку карантинных QR-кодов, то систему закадрвого смеха, который раздается в паузах, возникающих при разговоре, так что можно положить мобильник с этой страничкой на стол во время деловых переговоров и сильно оживить их... Иными словами, возможностей море, но пройдут годы и даже десятилетия, прежде чем неповоротливые разработчики сайтов и соцетей используют хотя бы часть этого потенциала.

Недавно я узнал, что в некоторых мобильных браузерах уже есть поддержка NDEFReader — работы с NFC-картами. На уровне JS-запроса можно просканировать ID почти любой NFC-карты, а для незащищенных карт еще почитать блоки данных и даже позаписывать информацию в ячейки. Кому интересно — гуглим «JS NDEFReader», а ниже я покидал примеров.

[технические подробности]
Проверка, поддерживает ли браузер технологию:

<?phpif('NDEFReader'in window)alert('поддерживает');

Чтение карты:

<?phpconstNFC_scan=async(m) => {сonst ndef= newNDEFReader();ndef.onreadingerror= (ev) => {alert('Error! Cannot read the NFC tag!');
};ndef.onreading= (ev) => {
  constR=ev.message.records;alert('Serial Number: '+ev.serialNumber+' Records: '+R.length);
  for(vari=0;i<R.length;i++) { vare=R[i];alert(i+'. recordType='+e.recordType+'+(e.mediaType?'MIME type='+e.mediaType:'');
    // данные data в загадочной кодировке, текст вытягивается так
    var enc = e.encoding; if(!enc) enc='utf-8';
    const decoder = new TextDecoder(enc);
    var text = decoder.decode(e.data);
    alert('text='+text);
  }
};
await ndef.scan();
};

Разумеется, здесь и далее внутри у подобных процедур рекомендуется содержимое заворачивать в try{}catch(){} дабы избежать возможных ошибок.

Типы данных богаты. recordType бывает таким:

<?php"text"— просто текст на любом языке)"mime"— тогда подробности о типе данных записаны в mediaType,например"application/json"
"url"— ссылка,которая обычно откроется в браузере,если просто подносить телефон"...:pkg"— приложение,которое откроется при поднесении,например,можно записать такую ячейку,чтобы сразу открылись контакты:recordType:"android.com:pkg",data:encoder.encode("com.android.contacts")"...:act"  — тоже похожая фигня,уже не помню.

И всё это точно так же можно в карту записывать (разумеется, в тэг, не закрытый от записи, и желательно с большим объемом памяти, у меня такой был для экспериментов):

<?phpconstNFC_write=async(m) => {сonst ndef= newNDEFReader();// await ndef.write('Я пишу на Расте — потолок покрасьте!');constencoder= newTextEncoder();await ndef.write({records: [
   {recordType:'mime',mediaType:'application/json',data:encoder.encode(JSON.stringify({name:'Leo Kaganov',title:'Writer'}))
   },
   {recordType:'mime',mediaType:'application/json',data:encoder.encode(JSON.stringify({name:'Иван Говнов',title:'Engineer'}))
   },
   {recordType:'url',data:'https://natribu.org'},
   {recordType:'android.com:pkg',data:encoder.encode('com.android.contacts')
   },
   {recordType:'mime',mediaType:'image/webp',data:await(await fetch('/image_file.webp')).arrayBuffer()
   },
   {recordType:'mime',mediaType:'audio/mp3',data:await(await fetch('/audio_file.mp3')).arrayBuffer()
   },
 ]
});

Кстати, из-за параноидальной политики браузера я не могу пока эту систему поставить на Биноник: одно из требований — работа в главном окне if(window.top===window). А в многопользовательском режиме движка политика безопасности у меня построена ровно наоборот: в главном окне ты можешь делать что хочешь (владельцам аккаунтов разрешен JS), зато все авторизационные и секретные действия выполняются в специальном защищенном поддомене. Но со временем я подумаю, как сделать и в многопользовательском движке NFC-логин безопасным.

Иными словами, в тестовую карту я пробовал даже писать крохотные файлы, но без особого успеха — памяти не хватает. Хотя какую-то картинку 30x30 пикселей мне залить удалось. Но зачем, если можно просто ссылку? В любом случае я пока не придумал практического применения записи на карту. Но вот чтение ID карты — штука, которая позволяет использовать ее как ключ. Так что добро пожаловать протестировать. На данный момент уже протестировали 10, считая меня :)

Для не разбирающихся в технике поясню, что нет причин бояться подносить к телефону карты и электронные ключи: с тем же успехом можно бояться, что фотограф унесет вашу душу, сделав снимок. При всем желании не существует способа испортить карту, записать на нее что-то (важные карты всегда закрыты от записи), спиздить секретные данные или получить доступ к вашим деньгам и поездкам в метро. Разработчики карт и браузеров много потрудились над политикой безопасности. ID читать позволяется именно потому, что он не является секретом — это тупо серийник чипа внутри пластика, и с цифрами, написанными на поверхности карты и ее счетом он никак не связан.

Однако если вас как-то напряг мой сегодняшний рассказ о возможностях браузера, если вас напугала мысль, что в браузере вашего мобильника, пока он болтается в кармане, может случайно открыться какой-то левый сайт, потом случайно нажмётся кнопка «разрешить NFC», и этот сайт сможет прочесть тэг лежащей в том же кармане банковской карты... то вы, разумеется, можете применить шапочку из фольги. То есть буквально: полностью обернуть свои банковские карты фольгой. Я попробовал — через фольгу не читает.

<< предыдущая заметка следующая заметка >>
пожаловаться на эту публикацию администрации портала
архив понравившихся мне ссылок

Комментарии к этой заметке скрываются - они будут видны только вам и мне.

Оставить комментарий