0

I have LibNFC working from the Linux terminal recognising my ACR122U Reader, and I wanted to know if there was a method for it to work through Chrome on a Linux Desktop as it is really similar to Android Support, with all the NFC device handling done by libnfc and the browser just has to know about this library instead of every type usb or other device than can do NFC.

I have tried using the WebNFC API to connect it :

document.getElementById("scanButton").addEventListener("click", async () => {
    log.innerHTML = "NFC Register started...";

    try {
      const ndef = new NDEFReader();
      await ndef.scan();
      log.innerHTML = ("> Scan started");
  
      ndef.addEventListener("readingerror", () => {
        log.innerHTML = ("Argh! Cannot read data from the NFC tag. Try another one?");
      });
  
      ndef.addEventListener("reading", ({ message, serialNumber }) => {
        log.innerHTML = ("ID  ${serialNumber} logged @" + dt.toLocaleTimeString());   });
    } catch (error) {
      log.innerHTML = (error);
    }
  });

  document.getElementById("stopButton").onclick = function(){
    log.innerHTML = "NFC Register stopped @ " + new Date().toLocaleTimeString();
    }; 

but I'm met with Error: NFC Permission Request denied

and the WebUSB API to connect it:

var usbd = {};
let device;
let deviceEndpoint = 0x02;

let powerUpDevice = new Uint8Array([0x62,0x00, 0x00, 0x00, 0x00,0x00,0x00,0x01,0x00, 0x00]).buffer;
let getCardUID = new Uint8Array([0xff,0xca,0x00,0x00,0x04]).buffer;

(function() {
    'use strict';

    usbd.authorize = function(){
        navigator.usb.requestDevice({ filters: [{ vendorId: 0x072f }] })
            .then(selectedDevice => {
                device = selectedDevice;
                console.log(device.configuration.interfaces[0].interfaceNumber);
                console.log(device.manufacturerName);
                console.log(device.productName);
                console.log(device);
                return device.open()
                    .then(() => {
                        if (device.configuration === null) {
                            return device.selectConfiguration(1);
                        }
                    });
            })
            .then(() => device.claimInterface(0))

but I'm met with Error: ...blocked because it implements a protected interface class i.e. not supported, so that's a no go.

Is there a way to incorporate the libusb/libnfc libraries or any other method to directly connect an NFC reader to read into a web browser/application?

4
  • 1
    You'll need users to download or run a program that runs a localhost webserver which your web-application can connect to to use local hardware - this is how Dell's Service Tag lookup feature works, for example.
    – Dai
    Commented Feb 10, 2021 at 6:59
  • 1
    Ooh, thanks for that and the great example; I think that might be my plan B perhaps, but I really wanted it to be a standalone web application without extra programs to install. At least then it would be able to run on multiple platforms but yes thank you so much for that solution -- I'll fall back on that if all else fails :)
    – rxm
    Commented Feb 19, 2021 at 1:20
  • 1
    Have you tried running your WebNFC example in an https:// web-app (e.g. using letsencrypt free certificates)? As far as I understand, you need to be in a secure context in order to access the NFC reader (that's why the WebNFC online experiment should work from this https:// configured website googlechrome.github.io/samples/web-nfc )
    – FSp
    Commented Mar 3, 2021 at 10:07
  • 1
    @FSp yeah I use the application in both a localhost environment and a https domain address for testing the application. I think it's mainly the ACR122U reader that's the issue...
    – rxm
    Commented Mar 3, 2021 at 22:09

1 Answer 1

3

Web NFC is supported on Android only as of February 2021. See https://web.dev/nfc/

The WebUSB error suggests you're requesting an interface that implements a protected class (among those below):

  // USB Class Codes are defined by the USB-IF:
  // https://www.usb.org/defined-class-codes
  const uint8_t kProtectedClasses[] = {
      0x01,  // Audio
      0x03,  // HID
      0x08,  // Mass Storage
      0x0B,  // Smart Card
      0x0E,  // Video
      0x10,  // Audio/Video
      0xE0,  // Wireless Controller (Bluetooth and Wireless USB)
  };

I wonder if that's a linux thing though as I was able to communicate with the ACR122U and SCL3711 NFC reader USB devices through WebUSB. See https://github.com/beaufortfrancois/chrome-nfc

Did you give a try to WebHID by any chance first? See https://web.dev/hid

9
  • 1
    Is the example for your Chrome NFC running on WebUSB? I assumed that the chrome.nfc.* code lines meant that it was geared to the Chrome App collection rather than running directly off the web, if that makes sense? I tried it out and it works for me, but the chrome-nfc.js wouldn't be able to be applied into something running on a live website, right? Regarding WebHID I filled out the vendorID and all linking to the ACR122U but it wasn't recognised; I'll try keep at it and fiddle with it but no luck :/
    – rxm
    Commented Feb 19, 2021 at 1:18
  • 1
    As you can read in github.com/googlearchive/chrome-nfc/compare/…, chrome-nfc.js should be working as well in a browser environment as it uses WebUSB, not just a Chrome App env. Commented Feb 19, 2021 at 7:48
  • 1
    I tried the sample on your repo that uses WebUSB and ran it through Chrome on Linux and Windows but I keep getting the same error that the NFC reader is a protected class and (Uncaught (in promise) DOMException: Access denied.) so I'm still unsure how it worked for you, and I don't think there's a bypass for this either. It does work as a Chrome App though on Linux bizarrely, but as it's being phased out I don't think I'll put a focus on developing for that, right? WebHID doesn't seem to find the reader as a 'compatible device' so I'm back to sqaure one...
    – rxm
    Commented Feb 24, 2021 at 1:23
  • 1
    Sorry for the late response @François Beaufort ! ChromeNFC Sample on Linux : ibb.co/5LG8DhL USB Internals Screen on Linux : ibb.co/319857B ChromeNFC Sample on Windows : ibb.co/9ncyzfc USB Internals Screen on Windows : ibb.co/Bg1JSsK Site Information in Chrome for Both OS' : ibb.co/ZzJLpmG
    – rxm
    Commented Mar 3, 2021 at 22:50
  • 1
    Yep, here you go; the Linux window has two Interface 0 elements, one in the main section and the other in the configuration descriptor : ibb.co/mJmxz5F / ibb.co/6Pw1Y5H . On Windows I can only read the main section's Interface 0: ibb.co/Z1TBmWs
    – rxm
    Commented Mar 5, 2021 at 21:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.