how to read data from a web UI and share using NFC card

Question

I am new to NFC,what we want is that we have a web page where we have all user details like Name, Email, Facebook URL, Linked in URL and is stored in a database. Now my question is is it possible that an NFC card or any app can read that data and share using the NFC card.

Please bear with my question and may be wrong.

Answer 1

Web NFC allows you to read and write NFC tags on Chrome for Android.

To write a simple text record, pass a string to the NDEFReader write() method.

const ndef = new NDEFReader();
await ndef.write("Hello World");

Scannibg nearby NFC tags is pretty easy as well:

const ndef = new NDEFReader();
await ndef.scan();

ndef.addEventListener("reading", ({ message, serialNumber }) => {
  console.log(`> Serial Number: ${serialNumber}`);
  console.log(`> Records: (${message.records.length})`);
});

I'd recommend you read https://web.dev/nfc and play with https://googlechrome.github.io/samples/web-nfc/ to see if that's what you're looking for.

In your specific case, I'd store data in a JSON format and read them later:

const encoder = new TextEncoder();
const data = {
  firstname: "François",
  lastname: "Beaufort"
};
const jsonRecord = {
  recordType: "mime",
  mediaType: "application/json",
  data: encoder.encode(JSON.stringify(data))
};

const ndef = new NDEFReader();
await ndef.write({ records: [jsonRecord] });

// Scan NFC tags and go trough |message.records|. 
// Once you have a record, check its |mediaType| and read |data|.
if (record.mediaType === "application/json") {
  const textDecoder = new TextDecoder();
  console.log(`JSON: ${JSON.parse(decoder.decode(record.data))}`);
}