JS `Web NFC API` (浏览器)：近场通信技术与手机支付

呦，各位好！欢迎来到今天的“NFC近距离恋爱…啊不，是近场通信技术与手机支付”讲座现场！今天咱们不谈恋爱，只谈“钱”景，聊聊如何用JS的Web NFC API，让浏览器也玩转近场支付，搞事情！

第一部分：NFC是什么？好吃吗？

玩笑归玩笑，咱先得明白NFC是啥。NFC，全称Near Field Communication，翻译过来就是“近场通信”。顾名思义，它是一种短距离的高频无线通信技术，允许电子设备之间进行非接触式点对点数据传输。

可以把它想象成两个好朋友，必须脸贴脸才能嘀咕小秘密。距离一旦拉远，就啥也听不见了。

NFC的特点：

近距离： 通常几厘米内有效，安全性较高。
快速： 数据传输速度相对较快，适合小量数据交换。
非接触： 无需物理接触，方便快捷。
双向通信： 既可以读取信息，也可以写入信息。

应用场景：

移动支付： 支付宝、微信支付的“碰一碰”支付。
门禁系统： 刷卡进门。
公交卡： 刷卡乘车。
数据交换： 手机之间快速分享图片、联系方式等。
身份验证： 身份识别、电子票务。
智能海报：碰触海报直接跳转链接。

第二部分：Web NFC API：浏览器也想“碰一碰”

以往NFC技术主要在移动App中应用，但现在，Web NFC API让浏览器也能参与进来！这意味着，我们可以在网页上实现NFC的读写操作，让网页也能“碰一碰”！

Web NFC API的核心：

NDEFReader 接口： 用于读取NFC标签（Tag）中的NDEF（NFC Data Exchange Format）消息。
NDEFWriter 接口： 用于向NFC标签写入NDEF消息。
NDEFMessage 接口： 表示一个NDEF消息，包含一个或多个NDEF记录（Record）。
NDEFRecord 接口： 表示NDEF消息中的一条记录，包含类型、ID和数据。

简单来说，NDEFReader 是“读卡器”， NDEFWriter 是“写卡器”， NDEFMessage 是“卡片内容”， NDEFRecord 是“卡片内容”里的每一条信息。

浏览器兼容性：

浏览器	支持情况
Chrome	支持
Edge	支持
Firefox	不支持
Safari	不支持
移动端Chrome	支持

第三部分：代码实战：用JS“碰”一下

理论知识讲完了，现在咱们撸起袖子，用代码说话！

3.1 读取NFC标签数据

async function readNFC() {
  try {
    const reader = new NDEFReader();
    await reader.scan(); // 启动扫描

    reader.addEventListener("reading", event => {
      const message = event.message;
      console.log("NFC标签数据：");
      for (const record of message.records) {
        console.log("  记录类型:", record.recordType);
        console.log("  媒体类型:", record.mediaType);
        console.log("  记录ID:", record.id);
        console.log("  数据:", new TextDecoder().decode(record.data)); // 解码数据
      }
    });

    reader.addEventListener("readingerror", error => {
      console.error("读取NFC标签出错：", error);
    });
  } catch (error) {
    console.error("NFC读取初始化失败：", error);
  }
}

// 调用函数
readNFC();

代码解释：

new NDEFReader(): 创建一个 NDEFReader 对象，用于读取NFC标签。
await reader.scan(): 启动NFC扫描。 await关键字表示这是一个异步操作，需要等待扫描完成才能继续执行。
reader.addEventListener("reading", ...): 监听 reading 事件，当读取到NFC标签时触发。
event.message: 包含NFC标签中的NDEF消息。
message.records: 包含NDEF消息中的所有记录。
record.recordType, record.mediaType, record.id, record.data: 分别表示记录的类型、媒体类型、ID和数据。
new TextDecoder().decode(record.data): 将二进制数据解码为文本字符串。
reader.addEventListener("readingerror", ...): 监听 readingerror 事件，当读取NFC标签出错时触发。
try...catch: 用于捕获可能发生的异常，例如NFC功能未启用、权限被拒绝等。

3.2 写入NFC标签数据

async function writeNFC(text) {
  try {
    const writer = new NDEFWriter();
    await writer.write({
      records: [{ recordType: "text", data: text }],
    });
    console.log("NFC标签写入成功！");
  } catch (error) {
    console.error("NFC标签写入失败：", error);
  }
}

// 调用函数
writeNFC("Hello, NFC!");

代码解释：

new NDEFWriter(): 创建一个 NDEFWriter 对象，用于写入NFC标签。
await writer.write(...): 向NFC标签写入NDEF消息。 await 关键字表示这是一个异步操作，需要等待写入完成才能继续执行。
records: 一个数组，包含要写入的NDEF记录。
{ recordType: "text", data: text }: 创建一个文本类型的NDEF记录，并将 text 作为数据写入。
try...catch: 用于捕获可能发生的异常，例如NFC功能未启用、权限被拒绝、写入失败等。

3.3 NDEF消息的构建

更复杂的场景下，一个NFC标签可能需要存储多个信息，这时候我们就需要构建更复杂的NDEF消息。

function createNDEFMessage(records) {
  return {
    records: records,
  };
}

function createTextRecord(text, languageCode = "en") {
  return {
    recordType: "text",
    mediaType: "text/plain",
    lang: languageCode, // 语言代码
    data: text,
  };
}

function createURIRecord(uri) {
  return {
    recordType: "uri",
    data: uri,
  };
}

// 示例：创建一个包含文本和URI的NDEF消息
const textRecord = createTextRecord("Hello, Web NFC!");
const uriRecord = createURIRecord("https://example.com");
const message = createNDEFMessage([textRecord, uriRecord]);

async function writeComplexNFC(message) {
  try {
    const writer = new NDEFWriter();
    await writer.write(message);
    console.log("复杂NFC标签写入成功！");
  } catch (error) {
    console.error("复杂NFC标签写入失败：", error);
  }
}

// 调用函数
writeComplexNFC(message);

代码解释：

createNDEFMessage(records): 创建一个 NDEF 消息对象，接受一个包含 NDEF 记录的数组。
createTextRecord(text, languageCode): 创建一个文本类型的 NDEF 记录。可以指定语言代码。
createURIRecord(uri): 创建一个 URI 类型的 NDEF 记录。
writeComplexNFC(message): 将构建好的 NDEF 消息写入 NFC 标签。

第四部分：Web NFC与手机支付：想象力有多大，舞台就有多大

现在，我们已经掌握了Web NFC API的基本用法。那么，它在手机支付领域有哪些潜在的应用呢？

4.1 Web支付新入口

场景： 商家在店门口放置一个NFC标签，顾客只需用手机“碰一碰”，即可跳转到商家的在线支付页面，完成支付。
优势： 简化支付流程，无需打开App、扫描二维码等操作，更加便捷。

4.2 会员身份识别

场景： 商家在会员卡上集成NFC芯片，顾客“碰一碰”，即可自动识别会员身份，享受会员折扣。
优势： 无需携带实体会员卡，方便管理，提升用户体验。

4.3 线下活动签到

场景： 活动组织者在签到台放置NFC标签，参与者“碰一碰”，即可完成签到。
优势： 提高签到效率，减少排队时间，方便数据统计。

4.4 商品溯源与支付

场景： 商品包装上集成NFC芯片，顾客“碰一碰”，即可查看商品信息、溯源信息，并直接完成支付。
优势： 增强商品透明度，提高消费者信任度，简化购买流程。

4.5 基于Web的支付网关

场景： 构建一个基于Web的支付网关，商户可以将自己的支付链接或者支付信息写入NFC标签，用户通过NFC读取后直接跳转到支付页面完成支付。
优势： 降低商户接入成本，简化支付流程，方便用户。

代码示例（Web支付新入口）：

<!DOCTYPE html>
<html>
<head>
  <title>Web NFC支付</title>
</head>
<body>
  <h1>碰一碰，立即支付！</h1>
  <button id="readNFCButton">读取NFC标签</button>
  <script>
    async function readNFC() {
      try {
        const reader = new NDEFReader();
        await reader.scan();

        reader.addEventListener("reading", event => {
          const message = event.message;
          for (const record of message.records) {
            if (record.recordType === "uri") {
              const paymentUrl = new TextDecoder().decode(record.data);
              window.location.href = paymentUrl; // 跳转到支付页面
              return;
            }
          }
          alert("未找到有效的支付链接！");
        });

        reader.addEventListener("readingerror", error => {
          console.error("读取NFC标签出错：", error);
          alert("读取NFC标签出错！");
        });
      } catch (error) {
        console.error("NFC读取初始化失败：", error);
        alert("NFC读取初始化失败，请确认设备支持NFC！");
      }
    }

    document.getElementById("readNFCButton").addEventListener("click", readNFC);
  </script>
</body>
</html>

使用方法：

将上述代码保存为HTML文件。
将一个包含支付链接的URI类型的NDEF记录写入NFC标签。
用支持Web NFC的手机浏览器打开该HTML文件。
点击页面上的“读取NFC标签”按钮。
将手机靠近NFC标签。
浏览器将自动跳转到支付页面。

第五部分：安全问题：谨慎驶得万年船

Web NFC技术虽然前景广阔，但也存在一些安全风险，需要我们高度重视。

数据篡改： NFC标签中的数据可能被篡改，导致用户跳转到恶意网站或支付到错误的账户。
中间人攻击： 攻击者可能截获NFC通信数据，窃取用户敏感信息。
拒绝服务攻击： 攻击者可能通过大量NFC请求，导致系统瘫痪。

安全建议：

数据加密： 对NFC标签中的敏感数据进行加密，防止被窃取或篡改。
身份验证： 对NFC标签的来源进行验证，防止用户被欺骗。
权限控制： 限制Web NFC API的访问权限，防止恶意网站滥用。
用户教育： 提高用户安全意识，提醒用户注意NFC支付风险。
使用HTTPS： 确保Web应用使用HTTPS协议，防止数据在传输过程中被窃取。
定期更新： 及时更新浏览器和操作系统，修复安全漏洞。
NFC标签保护： 使用物理保护措施，防止NFC标签被恶意篡改或替换。

第六部分：总结与展望：未来已来

Web NFC API为Web应用带来了全新的交互方式，让浏览器也能参与到线下场景中，尤其是在手机支付领域，有着巨大的潜力。虽然目前Web NFC API的兼容性还不够完善，安全风险也需要重视，但随着技术的不断发展，相信Web NFC将会越来越普及，为我们的生活带来更多便利。

未来，Web NFC可能会与更多的技术融合，例如：

区块链： 用于NFC支付的身份验证和交易记录。
人工智能： 用于NFC支付的安全风控和个性化推荐。
物联网： 用于NFC设备的远程控制和数据管理。

总之，Web NFC的未来充满想象，让我们一起期待它的发展吧！

今天的讲座就到这里，感谢各位的参与！希望大家能从今天的讲座中有所收获，一起探索Web NFC的更多可能性！散会，大家可以去“碰一碰”了！

发表回复 取消回复

发表回复取消回复