HTML的Web NFC API：实现浏览器与近场通信标签的交互与数据读写

HTML的Web NFC API：实现浏览器与近场通信标签的交互与数据读写

大家好，今天我们来深入探讨一个非常有趣且实用的技术——HTML的Web NFC API。这个API允许我们在浏览器中直接与近场通信（Near Field Communication，NFC）标签进行交互，实现数据的读取和写入。这意味着我们可以利用智能手机或电脑的NFC功能，与各种NFC标签，如支付卡、门禁卡、电子票据等进行互动，从而拓展了Web应用的无限可能。

什么是NFC？

在深入Web NFC API之前，我们先简单了解一下NFC。NFC是一种短距离高频无线通信技术，允许电子设备之间进行非接触式点对点数据传输（在10厘米内）。它基于RFID（射频识别）技术发展而来，但与RFID相比，NFC具有更高的安全性、更快的连接速度以及双向通信能力。

NFC 的主要特点包括：

• 短距离通信: 通常在几厘米范围内工作。
• 非接触式: 无需物理接触即可进行数据传输。
• 双向通信: 设备可以同时读取和写入数据。
• 高安全性: 通过加密和认证机制保护数据安全。

NFC 常用于：

• 移动支付: 如 Apple Pay、Google Pay 等。
• 门禁控制: 无需钥匙即可进入建筑物。
• 数据交换: 快速分享照片、联系人等信息。
• 身份验证: 确认用户身份。
• 信息读取: 从 NFC 标签读取商品信息、位置信息等。

Web NFC API 的概述

Web NFC API 是一组 JavaScript API，允许 Web 应用程序与 NFC 设备进行通信。它提供了一种标准化的方式，使开发者能够在浏览器中构建 NFC 应用，而无需安装额外的插件或依赖项。

Web NFC API 的核心接口包括：

• NDEFReader: 用于读取 NFC 标签上的 NDEF（NFC Data Exchange Format）消息。
• NDEFWriter: 用于向 NFC 标签写入 NDEF 消息。

NDEF 是一种标准化的数据格式，用于在 NFC 设备之间交换数据。它由一个或多个 NDEF 记录组成，每个记录包含类型、标识符和有效负载。

NDEF 消息结构

NDEF 消息由一个或多个 NDEF 记录组成。每个 NDEF 记录包含以下字段：

字段	描述
TNF	Type Name Format (类型名称格式)，指示 type 字段的结构。
type	记录类型，用于标识记录包含的数据类型。例如，urn:nfc:wkt:U 表示 URI，urn:nfc:wkt:T 表示文本。
id	记录标识符，可选字段，用于唯一标识记录。
payload	记录有效负载，包含实际的数据。例如，对于 URI 记录，有效负载包含 URI 字符串；对于文本记录，有效负载包含文本字符串。

TNF 字段定义了 type 字段的结构和含义。常用的 TNF 值包括：

• 0x01 (Well Known): type 字段使用预定义的标准类型名称，例如 urn:nfc:wkt:U (URI) 或 urn:nfc:wkt:T (Text)。
• 0x02 (MIME Media): type 字段包含 MIME 类型，例如 text/plain 或 image/jpeg。
• 0x03 (Absolute URI): type 字段包含一个完整的 URI，用于标识记录类型。
• 0x04 (External Type): type 字段包含一个外部定义的类型名称，通常用于特定应用程序或厂商自定义的数据格式。

检测 NFC 支持

在使用 Web NFC API 之前，我们需要先检测浏览器是否支持该 API。可以使用以下代码进行检测：

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

读取 NFC 标签

接下来，我们来看如何使用 NDEFReader 接口读取 NFC 标签上的 NDEF 消息。

1. 创建 NDEFReader 实例

const ndef = new NDEFReader();

2. 监听扫描事件

ndef.scan().then(() => {
  console.log("Scanning for NFC tags...");

  ndef.addEventListener("reading", (event) => {
    const message = event.message;
    const record = message.records[0]; // Assuming only one record for simplicity

    console.log("NDEF message read.");
    console.log("Record type:  " + record.recordType);
    console.log("MIME type:    " + record.mediaType);
    console.log("ID:           " + record.id);
    console.log("Payload:      " + new TextDecoder().decode(record.data));
  });
}).catch(error => {
  console.log(`Error! Scan failed to start: ${error}.`);
});

这段代码首先调用 ndef.scan() 方法开始扫描 NFC 标签。scan() 方法返回一个 Promise，当扫描成功启动时，Promise 会 resolve。

然后，我们监听 reading 事件，该事件在成功读取到 NFC 标签上的 NDEF 消息时触发。event.message 包含读取到的 NDEF 消息，它是一个 NDEFMessage 对象，包含一个 records 数组，每个元素是一个 NDEFRecord 对象。

NDEFRecord 对象包含了 NDEF 记录的详细信息，例如记录类型 (recordType)、MIME 类型 (mediaType)、ID (id) 和有效负载 (data)。

由于 record.data 是一个 DataView 对象，我们需要使用 TextDecoder 将其解码为字符串，才能方便地显示。

3. 处理不同的记录类型

根据 record.recordType 的不同，我们可以采取不同的处理方式。例如，如果记录类型是 url，我们可以将其解析为 URL 并打开：

ndef.addEventListener("reading", (event) => {
  const message = event.message;
  const record = message.records[0];

  if (record.recordType === "url") {
    const url = new TextDecoder().decode(record.data);
    window.location.href = url;
  } else {
    console.log("Unknown record type: " + record.recordType);
  }
});

写入 NFC 标签

现在，我们来看如何使用 NDEFWriter 接口向 NFC 标签写入 NDEF 消息。

1. 创建 NDEFWriter 实例

const ndefWriter = new NDEFWriter();

2. 写入 NDEF 消息

ndefWriter.write({
  records: [{ recordType: "text", data: "Hello, NFC!" }]
}).then(() => {
  console.log("NDEF message written successfully.");
}).catch(error => {
  console.log(`Error! Write failed: ${error}.`);
});

这段代码首先创建一个 NDEFWriter 实例。然后，我们调用 ndefWriter.write() 方法，传入一个包含 NDEF 消息的对象。

write() 方法接受一个包含 records 数组的对象，每个元素是一个描述 NDEF 记录的对象。

在这个例子中，我们写入一个包含文本记录的 NDEF 消息。recordType 设置为 text，data 设置为要写入的文本内容。

write() 方法返回一个 Promise，当写入成功完成时，Promise 会 resolve。

3. 写入更复杂的 NDEF 消息

我们可以写入包含多个记录的 NDEF 消息，或者写入包含不同类型记录的 NDEF 消息。

例如，我们可以写入一个包含 URI 记录和文本记录的 NDEF 消息：

ndefWriter.write({
  records: [
    { recordType: "url", data: "https://example.com" },
    { recordType: "text", data: "Visit Example Website!" }
  ]
}).then(() => {
  console.log("NDEF message written successfully.");
}).catch(error => {
  console.log(`Error! Write failed: ${error}.`);
});

错误处理

在使用 Web NFC API 时，可能会遇到各种错误，例如 NFC 设备不可用、标签无法读取或写入等。因此，我们需要进行适当的错误处理。

以下是一些常见的错误处理方法：

• ndef.scan() 失败: 可能是因为 NFC 设备未启用，或者用户拒绝了 NFC 权限。
• ndefWriter.write() 失败: 可能是因为标签不支持写入，或者写入的数据超过了标签的容量。

可以使用 try...catch 语句来捕获这些错误，并向用户显示友好的错误消息。

try {
  await ndefWriter.write({
    records: [{ recordType: "text", data: "Hello, NFC!" }]
  });
  console.log("NDEF message written successfully.");
} catch (error) {
  console.log(`Error! Write failed: ${error}.`);
  // Display error message to the user
}

实际应用场景

Web NFC API 具有广泛的应用场景，以下是一些常见的例子：

• Web Payments: 用户可以使用 NFC 标签进行支付，无需输入信用卡信息。
• Access Control: 用户可以使用 NFC 标签作为门禁卡，无需携带实体卡。
• Inventory Management: 可以使用NFC标签追踪商品的位置和状态。
• Information Sharing: 用户可以使用 NFC 标签快速分享联系人信息、URL 或其他数据。
• Marketing Campaigns: 商家可以使用 NFC 标签向用户推送优惠券、活动信息等。

代码示例：简单的 URL 启动器

以下是一个完整的代码示例，演示如何使用 Web NFC API 读取 NFC 标签上的 URL 并启动它：

<!DOCTYPE html>
<html>
<head>
  <title>Web NFC URL Launcher</title>
</head>
<body>
  <h1>Web NFC URL Launcher</h1>
  <p>Place your NFC tag near the device.</p>

  <script>
    if ("NDEFReader" in window) {
      const ndef = new NDEFReader();

      ndef.scan().then(() => {
        console.log("Scanning for NFC tags...");

        ndef.addEventListener("reading", (event) => {
          const message = event.message;
          const record = message.records[0];

          if (record.recordType === "url") {
            const url = new TextDecoder().decode(record.data);
            console.log("Launching URL: " + url);
            window.location.href = url;
          } else {
            console.log("Unknown record type: " + record.recordType);
          }
        });
      }).catch(error => {
        console.log(`Error! Scan failed to start: ${error}.`);
      });
    } else {
      alert("Web NFC API is not supported in this browser.");
    }
  </script>
</body>
</html>

代码示例：文本写入器

以下是一个简单的代码示例，演示如何使用 Web NFC API 将文本写入到 NFC 标签：

<!DOCTYPE html>
<html>
<head>
  <title>Web NFC Text Writer</title>
</head>
<body>
  <h1>Web NFC Text Writer</h1>
  <label for="textInput">Enter text to write to NFC tag:</label>
  <input type="text" id="textInput" value="Hello, NFC!">
  <button id="writeButton">Write to NFC</button>

  <script>
    if ("NDEFWriter" in window) {
      const writeButton = document.getElementById("writeButton");
      const textInput = document.getElementById("textInput");

      writeButton.addEventListener("click", async () => {
        const text = textInput.value;
        const ndefWriter = new NDEFWriter();

        try {
          await ndefWriter.write({
            records: [{ recordType: "text", data: text }]
          });
          alert("Text written to NFC tag successfully!");
        } catch (error) {
          alert(`Error writing to NFC tag: ${error}`);
        }
      });
    } else {
      alert("Web NFC API is not supported in this browser.");
    }
  </script>
</body>
</html>

浏览器兼容性

Web NFC API 的浏览器兼容性目前还不够完善。 截至目前（2024年），Chrome 和 Android 版 Chrome 浏览器提供了对 Web NFC API 的支持。 其他浏览器（如 Firefox、Safari）的兼容性仍然有限，需要关注其官方发布的更新信息。

可以使用 https://caniuse.com/ 网站来查询 Web NFC API 的最新浏览器兼容性信息。

安全注意事项

在使用 Web NFC API 时，需要注意以下安全问题：

• 权限控制: 浏览器会提示用户授予 Web 应用程序 NFC 访问权限。开发者应该清晰地告知用户，为什么要访问 NFC，以及如何保护用户隐私。
• 数据验证: 在读取 NFC 标签上的数据时，应该对数据进行验证，防止恶意代码注入。
• 防止重放攻击: 对于敏感操作，例如支付，应该使用一次性令牌，防止重放攻击。

未来发展趋势

Web NFC API 仍然处于发展阶段，未来可能会出现更多的功能和改进，例如：

• 更丰富的 NDEF 记录类型支持: 支持更多的标准 NDEF 记录类型，例如智能海报、服务发现等。
• 更灵活的 NFC 设备控制: 允许 Web 应用程序控制 NFC 设备的电源、模式等。
• 更强大的安全机制: 提供更高级的安全机制，例如硬件安全模块 (HSM) 支持。

交互、安全与未来

HTML 的 Web NFC API 为浏览器与近场通信标签的交互开辟了新的可能性。理解 NDEF 消息结构、掌握 API 的使用方法，以及关注浏览器兼容性和安全注意事项，是开发成功的 Web NFC 应用的关键。 随着技术的不断发展，Web NFC API 将在更多领域得到应用，并带来更加便捷和安全的交互体验。