如何用Web NFC API实现浏览器与物理世界的交互？

Web NFC API支持浏览器与NFC标签交互，需先检测NDEFReader兼容性，创建NDEFReader对象并请求用户授权扫描，通过onreading监听读取数据，调用write方法写入信息；目前仅Chrome for Android等部分浏览器支持，须在HTTPS环境下运行，注意数据验证与防重放攻击；应用场景包括零售、支付、物流、身份验证及智能家居等。

Web NFC API允许网页直接与附近的NFC（近场通信）标签或卡片进行读写操作，从而实现浏览器与物理世界的交互。它为网页应用打开了一扇通往线下世界的窗户，让我们可以用手机轻轻一碰，就能完成支付、获取信息、甚至控制设备。

解决方案：

1. 检查NFC支持: 首先，需要确认用户的浏览器和设备是否支持Web NFC API。你可以使用NDEFReader对象来检测。

   if ("NDEFReader" in window) {
     console.log("Web NFC is supported!");
   } else {
     console.log("Web NFC is not supported.");
   }

2. 创建NDEFReader对象: NDEFReader是Web NFC API的核心，它允许你发起NFC读写操作。

   const ndef = new NDEFReader();

3. 请求访问NFC设备: 在进行任何NFC操作之前，你需要请求用户授权访问他们的NFC设备。这通常通过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}.`);
   }

4. 监听NFC标签读取事件: 一旦成功启动扫描，ndef.onreading事件就会在检测到NFC标签时触发。事件对象包含标签中的NDEF消息，你可以解析这些消息来获取数据。

   

   Remove.bg

   AI在线抠图软件，图片去除背景

   下载

   ndef.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));
     }
   };

5. 写入NFC标签: 你也可以使用Web NFC API将数据写入NFC标签。这需要创建一个NDEFMessage对象，其中包含要写入的NDEF记录。

   async 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!");

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标签嵌入到海报或宣传册中，用户只需用手机轻轻一碰，就可以直接跳转到相关的网页或视频，实现线上线下的无缝连接。