UD5工具箱
教程概述
本教程将引导你从零开始学习 Web OTP API 的使用方法。整个流程分为以下步骤，建议按照顺序逐步操作，以获得最佳的学习效果。在开始之前，请确保你使用的是支持 Web OTP API 的浏览器（推荐 Chrome 84 及以上版本），并且当前页面通过 HTTPS 协议访问。
步骤 1环境检测与准备
打开本工具页面后，系统会自动执行浏览器兼容性检测。在页面顶部的检测状态区域，你可以看到当前浏览器对 Web OTP API 的支持情况。如果浏览器支持该 API，会显示绿色的「已支持」标识；如果不支持，则会显示橙色的「未支持」标识，并给出升级建议。
请确认检测结果显示浏览器支持 Web OTP API。如果当前浏览器不支持，建议切换到 Chrome 浏览器并确保版本在 84 以上。同时请检查浏览器地址栏是否显示安全锁图标，确认当前页面通过 HTTPS 协议访问。Web OTP API 是一项安全敏感的功能，浏览器要求必须在安全上下文（HTTPS）中才能使用。
步骤 2输入手机号并触发验证码
在工具的输入区域，找到手机号输入框。输入一个有效的手机号码（格式如：13800138000），然后点击「发送验证码」按钮。工具会模拟服务端生成一个 6 位数字验证码，并以标准的 SMS 格式存储在模拟的短信通道中。
发送成功后，按钮会变为倒计时状态，显示距离下次可重新发送的剩余时间。在这个过程中，观察页面右侧代码展示区的变化，可以看到模拟发送验证码的代码逻辑。这一步骤模拟了实际项目中用户注册或登录时触发验证码发送的场景。
步骤 3触发 Web OTP API 调用
点击「获取 OTP 验证码」按钮，工具将调用 navigator.credentials.get() 方法。此时浏览器会弹出一个权限提示（如果之前未授权过），询问是否允许网站读取短信验证码。点击「允许」后，浏览器开始监听即将到来的 OTP 消息。
在等待过程中，页面会显示「正在等待短信验证码...」的加载状态。右侧代码区会高亮显示对应的 API 调用代码，包括 otp: {transport: ['sms']} 参数配置。这个参数告诉浏览器我们期望通过短信通道获取 OTP 验证码。开发者可以观察到 API 调用的完整语法结构和参数含义。
步骤 4查看验证码自动填入结果
当工具模拟短信到达后，浏览器会自动解析短信内容，提取其中的域名和验证码。如果短信中的域名与当前页面域名匹配，浏览器会将提取到的验证码自动填入页面的验证码输入框中。你可以在输入框中看到验证码已经自动出现，无需手动输入。
在自动填入完成后，页面会显示验证成功的提示信息。同时，右侧代码区会展示回调函数中收到的 OTPResponse 对象的内容，包括 code 属性（即提取到的验证码）和 toJSON() 方法的输出。这一步骤直观展示了 Web OTP API 的最终效果——用户无需手动输入验证码，极大提升了用户体验。
步骤 5学习超时处理机制
点击「测试超时处理」按钮，工具将演示使用 AbortController 设置请求超时的场景。该功能模拟了当用户在指定时间内未收到验证码时，自动取消 API 调用的处理逻辑。代码展示区会高亮显示 AbortController 的创建、signal 的传递、以及 setTimeout 的设置代码。
当超时触发后，工具会捕获 AbortError 异常，并在页面上显示友好的超时提示信息。这段演示对于实际项目开发非常重要，因为在真实的网络环境中，短信可能延迟到达或丢失，合理的超时处理机制可以避免用户界面长时间处于加载状态，提升应用的健壮性。
步骤 6了解浏览器兼容性差异
点击「查看兼容性对照表」按钮，工具会展示不同浏览器平台对 Web OTP API 的支持情况。目前 Web OTP API 主要在 Android Chrome 84 及以上版本中得到完整支持。iOS 平台的 Safari 尚未支持该 API，需要使用 SMS Retriever API 或其他替代方案。
对照表中还包含了各浏览器版本的支持起始版本号、已知限制、以及推荐的兼容性处理策略。对于需要支持多平台的项目，开发者可以参考此表制定合理的降级方案，确保在不支持 Web OTP API 的浏览器中也能提供良好的用户体验。例如，可以在不支持的浏览器中回退到传统的手动输入验证码方式。
步骤 7复制代码到实际项目
在完成所有演示步骤的学习后，你可以进入工具的「代码导出」区域。这里提供了经过整理和注释的完整代码片段，涵盖 Web OTP API 调用、错误处理、超时控制等各个方面。每段代码都附有使用说明和注意事项，可以直接复制到你的项目代码中。
建议在实际项目中使用时，根据业务需求对代码进行适当调整。例如，根据项目的技术栈选择使用 Promise 或 async/await 语法，根据安全要求调整 AbortController 的超时时间，以及根据产品设计添加相应的 UI 反馈。工具中提供的代码已经过充分测试，可以作为可靠的起点进行二次开发。