UD5工具箱
Web OTP API
Web OTP API 是 W3C 制定的一套浏览器标准规范，允许网页应用通过 JavaScript 调用浏览器原生能力来自动读取和解析短信中的 OTP（一次性密码）验证码。该 API 的核心方法是 navigator.credentials.get()，通过传入 otp 参数来声明需要获取短信验证码。Web OTP API 的出现消除了用户手动输入验证码的需求，将传统的「查看短信-记忆验证码-手动输入」三步操作简化为「一键确认」，极大提升了用户验证流程的便捷性和安全性。
在本工具中，Web OTP API 是核心演示对象。工具通过模拟的方式展示了该 API 的调用流程、参数配置、返回值处理等全部细节，帮助开发者在无需搭建真实后端环境的情况下全面了解这一技术。
OTP（一次性密码）
OTP 全称为 One-Time Password，即一次性密码或动态验证码。它是一种只能使用一次的临时密码，通常由算法生成或由服务端随机产生，具有时效性和唯一性。在短信验证场景中，OTP 通常是一组 4 到 8 位的数字序列，通过短信发送到用户的手机上，用户需要在限定时间内将其输入到网页或应用中完成身份验证。
Web OTP API 的工作目标正是自动获取这个 OTP 值。在本工具的演示中，系统会自动生成一个 6 位数字的 OTP 验证码，并按照标准格式包装成 SMS 消息，供浏览器解析和自动填入。开发者通过本工具可以直观理解 OTP 在整个验证流程中的角色和传递机制。
SMS OTP 格式
SMS OTP 格式是 Web OTP API 规范中定义的短信消息格式标准。其核心模式为 @domain#code，其中 @ 符号后跟的是发送验证码的网站域名，# 符号后跟的是数字验证码。浏览器在收到短信后，会按照这一格式进行解析，提取出域名和验证码两个关键信息。域名用于验证短信来源的合法性，验证码则是最终需要填入的值。
在实际使用中，短信内容可以包含其他附加文字，例如「您的验证码是」等提示语，但 @domain#code 这一模式必须完整存在。本工具在演示中严格遵循这一格式规范，帮助开发者理解格式要求的同时避免在实际项目中因格式问题导致验证失败。
域名匹配（Origin Matching）
域名匹配是 Web OTP API 安全机制中的核心环节。当浏览器解析短信内容后，会提取 @ 后面的域名信息，并与当前网页的域名进行比对。只有两者匹配时，浏览器才会自动将验证码填入页面。这一机制确保了验证码只能在合法的网站上被自动读取，防止恶意网站通过 Web OTP API 窃取其他网站发送的验证码。
域名匹配遵循严格的规则：精确匹配（exact match），不支持通配符。例如，@example.com 只能匹配 example.com，不能匹配 sub.example.com。在本工具的演示中，系统会使用当前页面的域名生成模拟短信，确保域名匹配验证通过，帮助开发者理解这一安全机制的工作原理。
navigator.credentials
navigator.credentials 是 Web Credentials API 提供的浏览器接口对象，用于管理用户的凭证信息。Web OTP API 是 Credentials API 的一部分，通过该对象的 get() 方法来请求获取 OTP 验证码。该对象还支持其他类型的凭证管理，如 WebAuthn（Web 身份验证）和 Federated Identity（联合身份验证）等。
在本工具中，navigator.credentials.get({otp: {transport: ['sms']}}) 是最核心的 API 调用。其中 transport: ['sms'] 参数指定了 OTP 的传输通道为短信。工具会展示该调用的完整语法结构，并解释每个参数的含义和作用，帮助开发者准确掌握 API 的使用方法。
AbortController
AbortController 是 Web API 提供的用于中止异步操作的标准接口。在 Web OTP API 的使用中，它通常被用来设置请求超时时间。当用户在指定时间内未收到短信验证码时，通过调用 AbortController.abort() 方法可以取消正在进行的 navigator.credentials.get() 调用，避免界面一直停留在等待状态。
在本工具的超时处理演示中，系统会创建一个 AbortController 实例，将其 signal 属性传递给 credentials.get() 方法，然后通过 setTimeout 设置一个超时时间（例如 30 秒）。超时触发后，系统会捕获 AbortError 异常并显示友好的提示信息。这种模式是实际项目中处理 Web OTP API 超时的标准做法。
SMS Retriever API
SMS Retriever API 是 Android 平台提供的一套原生 API，用于让 Android 应用自动检索和读取特定格式的短信内容。它与 Web OTP API 的功能类似，但面向的是原生 Android 应用而非网页应用。SMS Retriever API 需要在 Android 应用中集成，并通过 App Signature 验证短信来源的安全性。
本工具在兼容性说明部分对比了 Web OTP API 和 SMS Retriever API 的区别：Web OTP API 是浏览器层面的标准，适用于网页应用，由浏览器厂商负责实现；而 SMS Retriever API 是 Android 平台的原生 API，需要在应用代码中调用。对于同时有 Web 和 Android 应用的项目，开发者可以根据平台特性选择合适的方案。
安全上下文（Secure Context）
安全上下文是 Web 平台的一个安全概念，指满足特定安全条件的执行环境。对于 Web OTP API 而言，安全上下文通常意味着页面必须通过 HTTPS 协议加载。浏览器会拒绝在非安全上下文（如 HTTP 页面）中调用 navigator.credentials.get()，以防止中间人攻击和数据泄露。
在实际开发中，除了 HTTPS 部署外，localhost 和 127.0.0.1 等本地地址也被浏览器视为安全上下文，方便开发者在本地环境进行测试。本工具在环境检测环节会自动验证当前页面是否处于安全上下文，并给出相应的提示，帮助开发者避免因安全上下文问题导致 API 调用失败。
PWA（渐进式 Web 应用）
PWA（Progressive Web App）是一种使用 Web 技术构建的应用形式，具有原生应用般的用户体验。PWA 应用可以通过 Service Worker 实现离线缓存、推送通知等功能，并且可以添加到用户的主屏幕上。Web OTP API 在 PWA 环境中同样可用，只要满足安全上下文（HTTPS）的要求。
本工具在 FAQ 部分专门解答了 Web OTP API 在 PWA 中的可用性问题。由于 PWA 运行在浏览器环境中，Web OTP API 的行为与普通网页完全一致。开发者在 PWA 项目中集成 Web OTP API 时，无需做额外的特殊处理，只需确保应用部署在 HTTPS 环境下即可。
OTPResponse 对象
OTPResponse 是 navigator.credentials.get() 在成功获取 OTP 后返回的对象类型。该对象包含一个 code 属性，其值为从短信中提取到的验证码字符串。此外，OTPResponse 还提供了 toJSON() 方法，可以将对象序列化为 JSON 格式，方便调试和日志记录。
在实际应用中，开发者通常需要从 OTPResponse 对象中取出 code 值，将其提交到服务端进行验证。本工具的代码展示区会清晰地展示 OTPResponse 对象的结构和使用方式，包括如何访问 code 属性以及 toJSON() 的输出格式，帮助开发者快速掌握返回值的处理方法。