NFC_WebReader

一個基於 Web NFC API 的 NFC 標籤讀取器，可在支援的行動裝置瀏覽器上使用。

專案簡介

這是一個簡單的 NFC 標籤讀取器網頁應用程式，利用瀏覽器原生的 Web NFC API 來讀取 NFC 標籤，並將讀取到的標籤 ID 發送至後端伺服器記錄。

主要功能

• 🔍 使用 Web NFC API 掃描 NFC 標籤
• 📱 顯示即時掃描狀態
• 📝 記錄掃描日誌（時間戳記 + 訊息）
• 🌐 將掃描結果發送至後端 API
• 🆔 包含固定的感應器 ID（PHONE_DEMO_001）

系統需求

瀏覽器支援

• Android 裝置上的 Chrome 89+ 或 Edge 89+
• 需要 HTTPS 連線（本地開發可使用 localhost）
• ⚠️ iOS 目前不支援 Web NFC API

權限

• 需要授予瀏覽器 NFC 存取權限

使用方式

1. 開啟網頁

直接用支援的瀏覽器開啟 index.html

2. 啟動掃描

點擊「啟動感應掃描」按鈕

3. 靠近 NFC 標籤

將手機背面靠近 NFC 標籤，即可讀取

4. 查看結果

• 掃描成功後會在日誌區域顯示標籤 ID
• 自動發送至後端 API（如已配置）

後端 API 配置

在 index.html 中修改以下參數：

const SENSOR_ID = "PHONE_DEMO_001"; // 修改為您的感應器 ID
const apiEndpoint = "https://your-api-endpoint.com/log"; // 修改為您的後端 API 網址

API 請求格式

GET https://your-api-endpoint.com/log?tag_id={tagId}&sensor_id={sensorId}

參數說明

• tag_id: NFC 標籤的序列號
• sensor_id: 感應器設備編號

注意事項

1. ⚠️ 必須使用 HTTPS 連線（或 localhost）
2. ⚠️ 僅支援 Android 裝置的 Chrome/Edge 瀏覽器
3. ⚠️ 需要在瀏覽器中授予 NFC 權限
4. 首次使用需要用戶手勢（點擊按鈕）才能啟動 NFC 掃描
5. 確保 NFC 功能已在手機設定中開啟

部署建議

• 使用 GitHub Pages、Netlify、Vercel 等平台（自動提供 HTTPS）
• 或自行配置 SSL 憑證

技術架構

• 前端: 原生 HTML/CSS/JavaScript
• API: Web NFC API (NDEFReader)
• 後端: 任意支援 HTTP GET 請求的伺服器

授權

MIT License

相關資源

• Web NFC API 文檔
• Can I use - Web NFC