Communicate an NFC reader with a web application
![](https://s3.amazonaws.com/media-p.slid.es/uploads/976549/images/6914389/pasted-from-clipboard.png)
Gautier Darchen
- 23 🎂
-
Fullstack dev at Takima since 2018
Working at Cartier in a lab- React
- Node.js
- Java / Spring
- Devops
![](https://s3.amazonaws.com/media-p.slid.es/uploads/976549/images/5584824/takima.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/976549/images/6714165/cartier-blanc.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/976549/images/6914389/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/976549/images/6914389/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/976549/images/7032352/haute-jo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/976549/images/7012344/71NlGMRzpzL._SY879_.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/976549/images/7012344/71NlGMRzpzL._SY879_.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/976549/images/7012344/71NlGMRzpzL._SY879_.jpg)
- Easily know the remaining tasks to be performed on a piece of jewelry for a given person
- Bar code / QR code
-
Innovation & a lot of data to hold
-
Innovation & a lot of data to hold
-
RFID- Short-range
- Short-range
- NFC ✅
![](https://s3.amazonaws.com/media-p.slid.es/uploads/976549/images/6714264/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/976549/images/6914389/pasted-from-clipboard.png)
NFC today
- Omnipresent in our daily life
- Contactless payment, access badge, etc.
- Cheap (NTAG 213 : about $ 0.08 per chip)
- Different types: frequency, encryption, etc.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/976549/images/6914389/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/976549/images/6955309/pasted-from-clipboard.png)
Target application 🎯
Loading page
![](https://s3.amazonaws.com/media-p.slid.es/uploads/976549/images/6914389/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/976549/images/6955388/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/976549/images/6955391/pasted-from-clipboard.png)
Result page
![](https://s3.amazonaws.com/media-p.slid.es/uploads/976549/images/6955391/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/976549/images/6955402/pasted-from-clipboard.png)
Local server NFC Reader and web-sockets
1st iteration
![](https://s3.amazonaws.com/media-p.slid.es/uploads/976549/images/6914389/pasted-from-clipboard.png)
Summary
-
Buy a NFC Reader 💸
- ACR 122U — USB NFC Reader
Advanced Card System Ltd.
- ACR 122U — USB NFC Reader
- Node.js server on the client ➡️ plugged devices 🔌
- Use a PC/SC library 📕
- Communicate the read payload to the web app via web-sockets 🧦
![](https://s3.amazonaws.com/media-p.slid.es/uploads/976549/images/6714275/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/976549/images/6914389/pasted-from-clipboard.png)
Connection workflow
![](https://s3.amazonaws.com/media-p.slid.es/uploads/976549/images/6887507/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/976549/images/6914389/pasted-from-clipboard.png)
NTAG 213
![](https://s3.amazonaws.com/media-p.slid.es/uploads/976549/images/6914389/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/976549/images/6955343/pasted-from-clipboard.png)
Memory organization
Local server
// src/index.js
// ...
io.on('connection', (socket) => {
socket.on('require-scan', () => {
const nfc = new NFC();
nfc.on('reader', (reader) => {
const pageNumber = 4;
const bufferLength = 48;
reader.on('card', async (card) => {
try {
const data = await reader.read(pageNumber, bufferLength);
const extractedPayload = data.toString().split('/')[1];
socket.emit('nfc-tag-scanned', extractedPayload);
} catch (err) {
// boilerplate code to handle the error
}
});
});
});
});
![](https://s3.amazonaws.com/media-p.slid.es/uploads/976549/images/6914389/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/976549/images/6955343/pasted-from-clipboard.png)
Client app
// src/pages/home/components/HomeContainer.jsx
// ...
const HomeContainer = () => {
const [socket, setSocket] = useState();
const [readTag, setReadTag] = useState();
useEffect(() => {
setSocket(SocketIO.connect(APILocalSocketUrl));
}, [APILocalSocketUrl]);
useEffect(() => {
if (!socket) {
return () => {};
}
socket.emit("require-scan");
socket.on("nfc-tag-scanned", payload => {
setReadTag(payload);
});
return () => socket.close();
}, [socket]);
return <Home readTag={readTag} />;
};
export default HomeContainer;
![](https://s3.amazonaws.com/media-p.slid.es/uploads/976549/images/6914389/pasted-from-clipboard.png)
Demo 1
![](https://media0.giphy.com/media/xTiN0CNHgoRf1Ha7CM/giphy.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/976549/images/6914393/pasted-from-clipboard.png)
Cons
- Node.js on the client 🛠
- Start the web-socket server 👷
-
Update on each client web-socket server if needed 🔄
- Works well on servers, what about desktop apps?
- Change our distribution mode
Pros
- Last version of the app ⚡️
![](https://s3.amazonaws.com/media-p.slid.es/uploads/976549/images/6914389/pasted-from-clipboard.png)
Key learnings
- Easy installation 🛠️
- Easy distribution 🚚
- Desktop app 🖥️
![](https://s3.amazonaws.com/media-p.slid.es/uploads/976549/images/6914389/pasted-from-clipboard.png)
How to do it with web technologies? 🤔
Electron application using a NFC Reader
2nd iteration
![](https://s3.amazonaws.com/media-p.slid.es/uploads/976549/images/6914389/pasted-from-clipboard.png)
Electron
Build cross platform desktop apps with JavaScript, HTML, and CSS
- Easy installation on the client side
- Node.js server on the client side
- File-system, hardware, etc.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/976549/images/6872160/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/976549/images/6872165/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/976549/images/6872167/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/976549/images/6872169/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/976549/images/6914389/pasted-from-clipboard.png)
![](https://upload.wikimedia.org/wikipedia/commons/thumb/8/80/Atom_editor_logo.svg/1200px-Atom_editor_logo.svg.png)
![](https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Visual_Studio_Code_1.35_icon.svg/1200px-Visual_Studio_Code_1.35_icon.svg.png)
![](https://a.slack-edge.com/80588/marketing/img/icons/icon_slack_hash_colored.png)
Summary
-
NFC reader bought for solution #1
- Electron ➡️ plugged devices 🔌
- Use a PC/SC library that we already master 📕
![](https://s3.amazonaws.com/media-p.slid.es/uploads/976549/images/6714275/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/976549/images/6914389/pasted-from-clipboard.png)
Use the library
const HomeContainer = () => {
const nfc = new NFC();
const [readTag, setReadTag] = useState(undefined);
nfc.on("reader", reader => {
const pageNumber = 4;
const bufferLength = 48;
reader.on("card", card => {
reader.read(pageNumber, bufferLength).then(data => {
const extractedPayload = data.toString().split("/")[1];
setReadTag(extractedPayload);
});
});
});
return <Home readTag={readTag} />;
};
![](https://s3.amazonaws.com/media-p.slid.es/uploads/976549/images/6914389/pasted-from-clipboard.png)
Demo 2
![](https://media1.giphy.com/media/5GoVLqeAOo6PK/giphy.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/976549/images/6914393/pasted-from-clipboard.png)
Limits
- Build for each target platform
- Reinstall on each device after updates
- Packaging and installation
- Slow and heavy release cycles
- Configuration to use native modules
![](https://s3.amazonaws.com/media-p.slid.es/uploads/976549/images/6914389/pasted-from-clipboard.png)
![](https://media3.giphy.com/media/5z0cCCGooBQUtejM4v/giphy.gif)
Dream solution
- Web app 🌐
- Nothing installed client-side 🤤
![](https://s3.amazonaws.com/media-p.slid.es/uploads/976549/images/6914389/pasted-from-clipboard.png)
Using WebUSB and an Arduino board
3rd iteration
![](https://s3.amazonaws.com/media-p.slid.es/uploads/976549/images/6914389/pasted-from-clipboard.png)
WebUSB API
- API implemented in the browser 🌐
- "Plug and play" devices for web apps 🔌
- Security: "web origins" (white list) 🛡
-
Equivalent to CORS for HTTP requests
-
Equivalent to CORS for HTTP requests
- Native code & SDKs ➡️ cross-platform & "web-ready" libraries 📚
W3C spec draft: wicg.github.io/webusb
![](https://s3.amazonaws.com/media-p.slid.es/uploads/976549/images/6914389/pasted-from-clipboard.png)
WebUSB API
Workflow
![](https://s3.amazonaws.com/media-p.slid.es/uploads/976549/images/6914389/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/976549/images/6928371/webusb-workflow__1_.png)
NFC Reader
- Arduino Leonardo
Compatible devices here:
https://github.com/webusb/arduino#compatible-hardware
- Adafruit PN532 NFC/RFID Controller Shield
- A bit of solder 👨🏭
![](https://s3.amazonaws.com/media-p.slid.es/uploads/976549/images/6914098/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/976549/images/6914101/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/976549/images/6914104/pasted-from-clipboard.png)
1/2
![](https://s3.amazonaws.com/media-p.slid.es/uploads/976549/images/6914389/pasted-from-clipboard.png)
NFC Reader
- $50 per device 💵
- Handicraft and not yet industrialized 👨🔬
- Will be subcontracted
2/2
![](https://s3.amazonaws.com/media-p.slid.es/uploads/976549/images/6914115/IMG_20191001_150600.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/976549/images/6914139/IMG_20191001_173242.jpeg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/976549/images/6914389/pasted-from-clipboard.png)
Arduino programming
Import libraries and configure the WebUSB Serial
// NFC Reading libraries
#include <Wire.h>
#include <PN532_I2C.h>
#include <PN532.h>
#include <NfcAdapter.h>
// WebUSB library
#include <WebUSB.h>
// Web origin
#define PROTOCOL_HTTP 0 /* http:// */
WebUSB WebUSBSerial(PROTOCOL_HTTP, "localhost:3000");
// NFC Shield configuration
PN532_I2C pn532_i2c(Wire);
NfcAdapter nfc = NfcAdapter(pn532_i2c);
#define BAUD_RATE 9600
![](https://s3.amazonaws.com/media-p.slid.es/uploads/976549/images/6914389/pasted-from-clipboard.png)
Arduino programming
Reading loop
void loop() {
if (nfc.tagPresent()){
NfcTag tag = nfc.read();
if (tag.hasNdefMessage()) { // If your tag has a message
NdefMessage message = tag.getNdefMessage();
// If you have more than 1 record then it will cycle through them
int recordCount = message.getRecordCount();
for (int i = 0; i < recordCount; i++) {
NdefRecord record = message.getRecord(i);
int payloadLength = record.getPayloadLength();
byte payload[payloadLength];
record.getPayload(payload);
String payloadAsString = ""; // Processes the message as a string vs as a HEX value
for (int c = 0; c < payloadLength; c++) {
payloadAsString += (char)payload[c];
}
WebUSBSerial.write(payloadAsString.c_str());
}
}
};
WebUSBSerial.flush();
delay(250);
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/976549/images/6914389/pasted-from-clipboard.png)
Client live coding
👨💻
![](https://media1.giphy.com/media/zOvBKUUEERdNm/giphy.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/976549/images/6914393/pasted-from-clipboard.png)
Working zone 🚧
![](https://s3.amazonaws.com/media-p.slid.es/uploads/976549/images/6914389/pasted-from-clipboard.png)
- Draft Community status (since Aug. 2019)
- Enabled in Chrome 61 (Sept. 2017)
- Disabled for several months (security)
- Only available in secured context (HTTPs)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/976549/images/6961007/pasted-from-clipboard.png)
Production 🏭
![](https://s3.amazonaws.com/media-p.slid.es/uploads/976549/images/6914389/pasted-from-clipboard.png)
- Only client-side code
- https://gdarchen.github.io/webusb-arduino-nfc/
Thank you! 🙏
![](https://s3.amazonaws.com/media-p.slid.es/uploads/976549/images/6914389/pasted-from-clipboard.png)
Light - Communicate a NFC Reader with a web application
By Gautier Darchen
Light - Communicate a NFC Reader with a web application
Lorsqu'on développe un outil qui interagit avec un périphérique, nous sommes encore forcés de développer des clients lourds ou d'utiliser des conteneurs comme Electron. Pourquoi ne pas directement utiliser le navigateur? Eh oui, vos browsers, et notamment Chrome, ont de plus en plus d'APIs vous permettant d'accéder à des parties natives de vos équipements. Viens découvrir la WebUSB API à travers un exemple simple : la réalisation d'un lecteur de carte NFC en 100% web.
- 1,123