• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Implementacja RFID w Web/PWA Jak to zrobić ?

VPS Starter Arubacloud
+1 głos
142 wizyt
pytanie zadane 25 września 2022 w JavaScript przez neo1020 Dyskutant (8,430 p.)

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ć

 

1 odpowiedź

+1 głos
odpowiedź 25 września 2022 przez Comandeer Guru (599,730 p.)

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

komentarz 25 września 2022 przez neo1020 Dyskutant (8,430 p.)

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 smiley

https://youtu.be/clF1a2UnmyE

Podobne pytania

0 głosów
1 odpowiedź 425 wizyt
pytanie zadane 8 sierpnia 2022 w Offtop przez neo1020 Dyskutant (8,430 p.)
+1 głos
1 odpowiedź 381 wizyt
pytanie zadane 17 stycznia 2022 w JavaScript przez Hardwell Dyskutant (8,960 p.)
+1 głos
1 odpowiedź 617 wizyt
pytanie zadane 17 grudnia 2021 w PHP przez Hardwell Dyskutant (8,960 p.)

92,451 zapytań

141,261 odpowiedzi

319,073 komentarzy

61,853 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...