استفاده از NFC Reader در صفحه وب(Chrome Android)

تو این پست قصد داریم نحوه استفاده از NFC Reader در نسخه اندروید مرورگر کروم با استفاده از Javascript رو شرح بدیم.

ابتدا یک صفحه وب ساده رو بستر nginx ارائه میدیم و با استفاده از مرورگر گوگل کروم در اندروید اطلاعات یک تگ nfc رو میخونیم.

نسخه اندروید گوگل کروم از ورژن 89 به بعد در صورتی که صفحه وب رو بستر https ارائه بشه امکان استفاده از ابجکت NDEFReader برای کار با NFC رو به ما میده.

پس ابتدا باید یک SSL/TLS Certificate برای استفاده در nginx بسازیم. با استفاده از openssl و دستور زیر یک Public Key و Private Key میسازیم

openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout domain.key -out domain.crt

یک سری پارامتر ورودی میخواد که جهت تست میتونیم از همون مقادیر پیش فرض استفاده کنیم. بعد از ساخت Certificate ها باید کانفیگ مربوط به nginx که شامل دو پارامتر ssl_certificate و ssl_certificate_key میشن رو ست کنیم. برای اینکار فایل nginx.conf رو باز میکینم و کانفیگ زیر رو اضافه میکنیم:

# HTTPS server    
    server {
       listen       443 ssl;
       server_name  localhost;
       ssl_certificate      localhost.crt;
       ssl_certificate_key  localhost.key;
       location / {
           root   html;
           index  index.html index.htm;
       }
    }

بعد از اون میریم سراغ ایجاد یک فایل html ساده که اطلاعات یک NFC Tag رو بخونیم و نمایش بدیم. تو html صرفا دو بخش برای وارد کردن متن ایجاد میکنیم و با استفاده از id بهشون مقدار بدیم.

برای اینکار از ابجکت NDEFReader استفاده میکنیم. اول چک میکنیم که امکان استفاده از NDEFReader فعال باشه یعنی بستر HTTPS فراهم باشه و رو مرورگر کروم ورژن 89+ اجرا بشه. با استفاده از کد زیر و چک کردن NDEFReader اینکار انجام میشه:

if (!("NDEFReader" in window)) {
     document.getElementById('content1').innerHTML='can not access to nfc!' + '\n';
} else {
     document.getElementById('content1').innerHTML='nfc is ok!' + '\n';
}

برای شروع خواندن NFC از یک دکمه با id=scanBt در صفحه استفاده میکنیم و بعد کلیک روی این دکمه یک EventListener به ابجکت NDEFReader اضافه میکنیم که در صورت خوندن شدن NFC توسط گوشی یا گجت مربوطه این اطلاعات رو دریافت کنه و تو صفحه نمایش بده. کد به صورت زیر میشه:

scanBt.addEventListener("click", async () => {
     document.querySelector('#contentOut').textContent += "scan button clicked, start scan.." + '\n';
     try {
          const ndef = new NDEFReader();
          await ndef.scan();
          document.querySelector('#contentOut').textContent += "Scan started" + '\n';
          ndef.addEventListener("readingerror", () => {
               document.querySelector('#contentOut').textContent += "can not read data" + '\n';
          });
          ndef.addEventListener("reading", ({ message, serialNumber }) => {
                 document.querySelector('#contentOut').textContent += `> Serial Number: ${serialNumber}` + '\n';
                 document.querySelector('#contentOut').textContent += `> Records: (${message.records.length})` + '\n';
                 for(const record of message.records) {
                        switch(record.recordType) {
                                 case 'text':
                                           const textDecoder = new TextDecoder(record.encoding)
                                           document.querySelector('#contentOut').textContent += `> content: ${textDecoder.decode(record.data)}` + '\n';
                                              break;
                          }
                }
       });
       } catch (error) {
                document.querySelector('#contentOut').textContent += "error: " + error + '\n';
       }
});

کد کامل رو تو این لینک میتونید ببینید.