一個基於 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 存取權限

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

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

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

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

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

const SENSOR_ID = "PHONE_DEMO_001"; // 修改為您的感應器 ID
const apiEndpoint = "https://your-api-endpoint.com/log"; // 修改為您的後端 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