Web OTP API 验证演示 - 短信动态码自动填入

本工具的核心功能是完整模拟 Web OTP API 的短信自动填入流程。系统会自动生成符合标准格式的模拟短信内容，包括 @domain#code 格式的 OTP 消息。当用户触发验证码接收流程时，工具会通过 navigator.credentials.get() 方法调用浏览器的 OTP 处理能力，演示浏览器如何从短信中提取验证码并自动填入输入框。整个过程直观展示了从短信接收到验证码填入的完整链路，帮助开发者理解 Web OTP API 的工作机制。

在模拟过程中，工具会展示浏览器内部的处理逻辑，包括如何解析短信中的域名信息、如何提取数字验证码、以及如何将提取的结果回调给网页应用。这种可视化的演示方式远比单纯阅读文档更加高效，能够让开发者在短时间内建立起对 Web OTP API 工作原理的全面认知。

工具详细演示了 navigator.credentials.get({otp: {transport: ['sms']}}) 这一核心 API 调用的完整过程。用户可以看到请求的发起、浏览器的响应、以及回调结果的解析。代码展示区域会实时高亮显示当前正在执行的代码行，帮助开发者理解每一行代码的作用和执行时机。

同时，工具还展示了如何通过 Promise 和 async/await 两种方式处理 Web OTP API 的异步调用，让开发者了解不同编程范式下的最佳实践。对于回调函数中收到的 OTPResponse 对象，工具会展示其包含的 code 属性以及 toJSON() 方法的使用方式。

工具提供了完整的手机号输入界面，支持用户输入手机号码并触发验证码发送流程。在演示模式下，工具会模拟服务端生成验证码并以标准的 SMS 格式返回。用户可以看到从输入手机号到收到模拟验证码的整个交互过程，这有助于理解实际项目中前后端协作的流程。

验证码发送模块还包含了倒计时机制、重复发送限制等实际项目中常见的功能细节，让演示更加贴近真实场景。开发者可以观察到按钮状态的变化、倒计时的显示、以及错误处理等用户界面交互细节，这些都是实际开发中需要关注的方面。

Web OTP API 要求短信消息遵循特定的格式规范。工具会清晰地展示标准的 OTP 短信格式：@domain#code，其中 @ 后跟的域名必须与当前网页的域名匹配，# 后跟的是数字验证码。工具通过可视化的方式展示这一格式的各个组成部分，并解释每部分的作用。

除了标准格式，工具还会介绍一些变体格式和注意事项。例如，短信中可以包含其他文字内容，但 @domain#code 这一核心模式必须存在。工具会演示不同格式的短信消息，帮助开发者理解浏览器解析器的行为和容错能力，避免在实际项目中因格式不规范而导致 OTP 自动填入失败。

并非所有浏览器都支持 Web OTP API。工具内置了浏览器兼容性检测功能，会在页面加载时自动检查当前浏览器是否支持 navigator.credentials 以及 OTP 相关的 API。检测结果会以醒目的方式展示，包括当前浏览器名称、版本号、以及是否支持 Web OTP API。

对于不支持 Web OTP API 的浏览器，工具会给出详细的升级建议和替代方案说明。例如，在 iOS 平台上可以使用 SMS Retriever API 或手动输入验证码作为替代方案。工具还会展示一个兼容性对照表，列出主流浏览器（Chrome、Safari、Firefox、Edge）对 Web OTP API 的支持情况，帮助开发者在项目规划阶段做出合理的技术选型。

工具的右侧区域会实时展示与当前操作对应的 JavaScript 代码片段。当用户执行某个操作时，对应的代码会被高亮显示，并附带详细的注释说明。这些代码片段可以直接复制到实际项目中使用，大大降低了开发者的学习成本和上手时间。

代码展示区覆盖了 Web OTP API 使用的所有关键代码，包括 API 调用、Promise 处理、错误捕获、AbortController 超时控制等。每段代码都是经过测试验证的可运行片段，开发者可以根据自己的项目需求进行适当修改后直接应用。