Implementacja RFID w Web/PWA Jak to zrobić ?

Question

Witam was serdecznie

Od piątku próbuję w aplikacji Web/PWA uruchomić NFC i stworzyć coś w stylu aby można było logować się kartą RFID do aplikacji

<style>
div {
	color:white;
}
</style>
<?php 
		require('../session.php');
		require('../header.php');
		require ('../logo.php');

?>
<div class="m">XX</div>
<div class="n">YY</div>
<div class="nn">YY</div>

<input type="text" value="" id="cc">

<button id="xxx">Scan</button>



<script>
if ("NDEFReader" in window) { 
	$(".m").text("TAK");
}else{
	$(".m").text("NIE");
}












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

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

  
  
  // const ndef = new NDEFReader();

// function read() {
  // return new Promise((resolve, reject) => {
    // const ctlr = new AbortController();
    // ctlr.signal.onabort = reject;
    // ndef.addEventListener("reading", event => {
      // ctlr.abort();
      // resolve(event);
    // }, { once: true });
    // ndef.scan({ signal: ctlr.signal }).catch(err => reject(err));
  // });
// }

// read().then(({ serialNumber }) => {
  // $(".m").text(serialNumber);
// });




const ndef = new NDEFReader();
ndef.scan().then(() => {
  $(".n").text("1");
  ndef.onreadingerror = (event) => {
   $(".n").text(event);
  };
  ndef.onreading = (event) => {
	  
	const ndefMessage = event.message;
	for (const record of ndefMessage.records) {
		$(".nn").text(record.recordType+"/"+record.mediaType+"/"+record.id);
	}
	

	const record = event.message.records;
    const textDecoder = new TextDecoder(record.encoding);
    const decodedData = textDecoder.decode(record.data);


    $(".c").val(decodedData);
    $(".n").text(event);
  };
}).catch((error) => {
  $(".n").text(error);
});





document.getElementById("xxx").onclick = async () => {
    const ndef = new NDEFReader();
    await ndef.scan();
    ndef.onreading = event => {
    };
  };
  


// </script>

Dotarłem tu i nie mogę oczytać numeru seryjnego karty

Znalazłem stronę web-nfc na której to działa ale nie wiem jak to przenieść do mojej a szczególnie nie rozumiem

Skanuje kartę i mam serial numer, a gdy u mnie próbuje to zrobić to mam empty/null/null

---
feature_name: Web NFC
chrome_version: 89
feature_id: 6261030015467520
check_min_version: true
---

<h3>Background</h3>
<p>
Web NFC aims to provide sites the ability to read and write to NFC tags when
they are brought in close proximity to the user’s device (usually 5-10 cm, 2-4
inches). The current scope is limited to NDEF, a lightweight binary message
format. Low-level I/O operations (e.g. ISO-DEP, NFC-A/B, NFC-F) and Host-based
Card Emulation (HCE) are not supported within the current scope.
</p>

<button id="scanButton">Scan</button>
<button id="writeButton">Write</button>
<button id="makeReadOnlyButton">Make Read-Only</button>

{% include output_helper.html initial_output_content=initial_output_content %}

<script>
log = ChromeSamples.log;

if (!("NDEFReader" in window))
  ChromeSamples.setStatus("Web NFC is not available. Use Chrome on Android.");
</script>

{% include js_snippet.html filename='index.js' %}

scanButton.addEventListener("click", async () => {
  log("User clicked scan button");

  try {
    const ndef = new NDEFReader();
    await ndef.scan();
    log("> Scan started");

    ndef.addEventListener("readingerror", () => {
      log("Argh! Cannot read data from the NFC tag. Try another one?");
    });

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

writeButton.addEventListener("click", async () => {
  log("User clicked write button");

  try {
    const ndef = new NDEFReader();
    await ndef.write("Hello world!");
    log("> Message written");
  } catch (error) {
    log("Argh! " + error);
  }
});

makeReadOnlyButton.addEventListener("click", async () => {
  log("User clicked make read-only button");

  try {
    const ndef = new NDEFReader();
    await ndef.makeReadOnly();
    log("> NFC tag has been made permanently read-only");
  } catch (error) {
    log("Argh! " + error);
  }
});

log("> Scan started"); tego log co to jest ? czy to jakiś freamwork 

{% include js_snippet.html filename='index.js' %}

tego też nie rozumiem, ale w całości jak odpalam to na przeglądarce chrome na androidzie to działa i czyta numer seryjny karty prawidłowo. Może ktoś wie jak to zaimplementować w moim kodzie ? Będę bardzo wdzięczny

Chciałbym najpierw wyświetlić nr seryjny karty w div a później będę kombinował jak się zalogować

 

Answer 1

Ten kod HTML to w rzeczywistości format Markdown, a {% include wskazywałoby dodatkowo na wykorzystanie systemu szablonów Liquid – a więc prawdopodobnie jest to coś wyciągnięte z Jekylla.

log("> Scan started"); tego log co to jest ? czy to jakiś freamwork 

Tak, masz nawet w kodzie, skąd się to bierze:

log = ChromeSamples.log;

Ogólnie może łatwiej będzie Ci użyć przykładu z MDN: https://developer.mozilla.org/en-US/docs/Web/API/NDEFReader#handling_initial_reads_while_writing

Comments

Dziękuję za wytłumaczenie, bo nie wiedziałem o co z tym chodzi ani nie mogłem tego znaleźć ChromeSamples.log; 

Mimo tego się udało 

https://youtu.be/clF1a2UnmyE