一次性密码TOTP生成器 - 兼容Google验证器
输入Base32密钥手动生成6位动态验证码,兼容Google Authenticator,前端算法实现不联网。
UD5工具箱
体验短信动态码自动填入 · 无需手动复制粘贴
步骤 1:输入手机号并发送验证码
// 1. 检测浏览器是否支持 Web OTP API
if ('OTPCredential' in window) {
// 2. 创建 AbortController(建议60秒超时)
const ac = new AbortController();
const timeoutId = setTimeout(() => ac.abort(), 60000);
// 3. 调用 API 监听短信
navigator.credentials.get({
otp: { transport: ['sms'] },
signal: ac.signal
}).then(otp => {
clearTimeout(timeoutId);
// 4. 自动填入验证码
document.querySelector('#otp-input').value = otp.code;
}).catch(err => {
console.log('OTP 获取失败或已取消', err);
});
}
短信末尾必须包含 @域名 #验证码 格式,浏览器才能自动识别。域名需与网站域名匹配。
上方第二行(@域名 #验证码)是浏览器识别的关键,通常对用户不可见,由短信网关自动附加。
Web OTP API 是 Credential Management API 的一部分,允许浏览器在用户收到 SMS 短信时自动读取其中的一次性验证码(OTP),并自动填入网页中的输入框,无需用户手动切换应用、复制粘贴。这大大提升了移动端的登录和验证体验。
短信末尾必须包含 @your-domain.com #验证码 的格式。例如:您的验证码是123456。@example.com #123456。其中 @ 后面是您的网站域名,# 后面是验证码。浏览器通过解析这一行来提取 OTP,并验证域名是否匹配。
目前主要支持 Android 版 Chrome(84+)、Android 版 Edge、以及部分基于 Chromium 的移动浏览器。桌面端浏览器通常不支持 SMS transport。iOS Safari 有类似的 autocomplete="one-time-code" 机制,但实现方式不同。
是的,Web OTP API 必须在 HTTPS 环境下使用(localhost 除外)。这是因为该 API 涉及敏感的用户凭证信息,浏览器强制要求安全上下文。在生产环境中部署时,请确保您的网站已配置有效的 SSL 证书。
使用 AbortController 是推荐的做法。在调用 API 时传入 signal,并设置一个定时器(通常 60 秒)来自动取消监听。这样可以避免无限等待,同时释放资源。如果用户未收到短信,API 会在超时后优雅地失败。
SMS Retriever API 是 Android 原生 API,需要在客户端集成 Google Play Services,且需要申请权限。Web OTP API 是浏览器层面的实现,无需额外权限,无需安装任何 SDK,纯 JavaScript 即可调用,更简单、更安全、跨平台兼容性更好。
SMS 中 @ 后面的域名需要与调用 API 的网页来源(origin)匹配。浏览器会验证这一对应关系,防止恶意网站读取其他网站发送的验证码。域名比较通常忽略 www 前缀,但子域名需要精确匹配。
可以!Web OTP API 在 PWA(渐进式 Web 应用)中同样可用,并且体验更佳。许多现代 Web 应用结合 PWA + Web OTP API,为用户提供接近原生应用的验证码自动填入体验,无需离开应用即可完成验证。
输入Base32密钥手动生成6位动态验证码,兼容Google Authenticator,前端算法实现不联网。
分解查询参数,高亮可能存在的SQL注入或XSS模式,辅助安全审查。
输入字符串并使用 URL.canParse() 判断是否为有效 URL,不抛出异常。
输入长链接,生成一个伴随随机短码的完整离线URL(可自定义域名前缀)。
调用设备联系人选择界面,获取用户选中的联系人信息(需支持环境)。
输入用户名和密码,生成用于基本认证的.htpasswd加密条目。
从内置库随机选取主流浏览器的User-Agent字符串,一键复制用于请求头。
利用浏览器Crypto API生成密码学安全的随机字节序列及对应的整数和十六进制。
定义脱敏规则(如手机号中间4位星号,邮箱部分隐藏),对 JSON 或 CSV 数据执行批量掩码。
对JavaScript代码进行变量重命名、字符串加密等混淆处理,增加阅读难度,保护客户端逻辑。
请求Idle Detection权限,监测用户是否离开或处于空闲状态,实时更新状态。
将文本中的手机号、身份证、邮箱等敏感信息中间部分替换为星号,适应演示或日志。
为输入框生成常见格式掩码(如电话、日期、信用卡),输出JS实现代码,规范用户输入。
浏览器端实现DES对称加密算法,支持ECB/CBC模式及自定义密钥,安全处理敏感数据,无需上传服务器。
图文演示N95/KN95口罩正确佩戴与正压-负压密合测试步骤。
在线Unix时间戳与标准日期时间互转,支持秒/毫秒级时间戳,显示GMT和本地时间。
输入正则表达式,检测潜在的指数级回溯陷阱,避免服务器性能被恶意输入拖垮。
逐步演示OAuth2授权码、隐式及密码模式交互流程,帮助理解重定向、Token交换与刷新机制。
团队成员在会前用温度计匿名标情绪,汇总显示利于主持人引导。
以节点图展示链表的插入、删除、反转等操作,直观理解指针变化。
模板化记录团队成员昨日完成、今日计划与阻塞项,支持导出Markdown便于分享。
输入包含隐私信息的文本,一键将手机号、身份证等部分遮盖。
根据IBAN规则验证国际银行账号的格式正确性和校验码,支持60+国家,纯前端校验安全。
输入WiFi的SSID、密码和加密方式,生成客人一扫即可联网的二维码。
快速生成PWA所需的manifest.json文件,填写应用名、图标、主题色、启动网址等字段。
生成符合BIP39标准的12或24个英文助记词,前端安全随机,仅供学习。
粘贴Shadow DOM代码,直观预览封装组件内部的CSS作用域及其对外界的影响。
输入IPv4地址,自动告知属于哪一类(A,B,C),是否私有,以及网络和主机部分。
填写关键医疗与联络信息,生成钱包可存放的打印卡片。
设定储蓄目标金额,每次记录存入金额,环形图显示完成百分比,激励达成财务目标。