Web NFC API支持浏览器与NFC标签交互，需先检测NDEFReader兼容性，创建NDEFReader对象并请求用户授权扫描，通过onreading监听读取数据，调用write方法写入信息；目前仅Chrome for Android等部分浏览器支持，须在HTTPS环境下运行，注意数据验证与防重放攻击；应用场景包括零售、支付、物流、身份验证及智能家居等。
Web NFC API允许网页直接与附近的NFC（近场通信）标签或卡片进行读写操作，从而实现
浏览器
与物理世界的交互。它为网页应用打开了一扇通往线下世界的窗户，让我们可以用手机轻轻一碰，就能完成支付、获取信息、甚至控制设备。
解决方案：
检查NFC支持:
首先，需要确认用户的浏览器和设备是否支持Web NFC API。你可以使用
对象来检测。
创建NDEFReader对象:
是Web NFC API的核心，它允许你发起NFC读写操作。
请求访问NFC设备:
在进行任何NFC操作之前，你需要请求用户授权访问他们的NFC设备。这通常通过
方法完成。这个方法会弹出一个权限请求框，用户必须允许才能继续。
监听NFC标签读取事件:
一旦成功启动扫描，
事件就会在检测到NFC标签时触发。事件对象包含标签中的NDEF消息，你可以解析这些消息来获取数据。
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
写入NFC标签:
你也可以使用Web NFC API将数据写入NFC标签。这需要创建一个
对象，其中包含要写入的NDEF记录。
Web NFC API的兼容性如何？哪些浏览器和设备支持？
Web NFC API的支持情况仍然有限。目前，Chrome浏览器（Android版本）和一些基于Chromium的浏览器（例如Edge）提供了支持。iOS设备上的Safari浏览器尚未原生支持Web NFC API。因此，在使用Web NFC API时，务必进行兼容性检查，并为不支持的浏览器提供备选方案。 可以考虑使用渐进增强的方式，在支持的浏览器上启用NFC功能，而在不支持的浏览器上提供其他交互方式。
使用Web NFC API有哪些常见的安全问题？如何避免？
安全问题是使用Web NFC API时需要特别关注的。由于NFC标签可以被恶意篡改或替换，因此需要采取一些安全措施来保护用户数据和应用安全。
数据验证：
务必对从NFC标签读取的数据进行验证，确保数据的完整性和真实性。避免直接使用未经验证的数据执行敏感操作。
HTTPS：
只能在HTTPS安全上下文中使用Web NFC API。这可以防止中间人攻击，确保数据传输的安全性。
用户授权：
始终需要用户明确授权才能访问NFC设备。不要在未经用户同意的情况下启动NFC扫描。
防止重放攻击：
对于需要进行身份验证或支付等敏感操作的场景，需要采取措施防止重放攻击。例如，可以使用一次性令牌或时间戳来验证请求的有效性。
Web NFC API在实际应用中有哪些创新案例？
Web NFC API的应用场景非常广泛，可以应用于零售、物流、支付、身份验证等多个领域。
零售：
顾客可以使用手机扫描商品上的NFC标签，快速获取商品信息、促销活动或直接完成购买。
物流：
可以使用NFC标签跟踪包裹的运输状态，提高物流效率和透明度。
支付：
用户可以使用手机通过NFC完成非接触式支付，简化支付流程。
身份验证：
可以使用NFC标签进行身份验证，例如门禁系统、员工考勤等。
智能家居：
用户可以使用手机通过NFC控制智能家居设备，例如开关灯、调节温度等。
一个比较有趣的应用案例是，将NFC标签嵌入到海报或宣传册中，用户只需用手机轻轻一碰，就可以直接跳转到相关的网页或视频，实现线上线下的无缝连接。
NDEFReaderif ("NDEFReader" in window) {
console.log("Web NFC is supported!");
} else {
console.log("Web NFC is not supported.");
}NDEFReaderconst ndef = new NDEFReader();ndef.scan()try {
await ndef.scan();
console.log("Scan started successfully.");
ndef.onreadingerror = () => {
console.log("Argh! Cannot read data from the NFC tag. Try another one?");
};
ndef.onreading = event => {
const message = event.message;
for (const record of message.records) {
console.log("Record type: " + record.recordType);
console.log("MIME type: " + record.mediaType);
console.log("Record id: " + record.id);
console.log("Record data: " + new TextDecoder().decode(record.data));
}
};
} catch (error) {
console.log(`Error! Scan failed to start: ${error}.`);
}ndef.onreadingndef.onreading = event => {
const message = event.message;
// 处理 message 中的数据
for (const record of message.records) {
// record.recordType, record.mediaType, record.data 包含标签数据
console.log("Record type: " + record.recordType);
console.log("MIME type: " + record.mediaType);
console.log("Record id: " + record.id);
console.log("Record data: " + new TextDecoder().decode(record.data));
}
};NDEFMessageasync function writeNFC(text) {
try {
await ndef.write({
records: [{ recordType: "text", data: text }],
});
console.log("NDEF message written successfully.");
} catch (error) {
console.log(`Error! Write failed: ${error}.`);
}
}
// 调用 writeNFC 函数写入数据
writeNFC("Hello, NFC World!");