在 IRIS 数据集上使用 HuggingFace API 进行高效机器学习实践

在现代应用中，我们经常会遇到用户在登录或执行敏感操作时需要通过一次性密码（OTP）进行验证的场景。传统方式需要用户手动输入短信中的验证码，这不仅繁琐，还容易出错。虽然 Android 和 iOS 的原生应用可以自动识别短信内容，但网页应用用户却无法享受这一便利。幸运的是，借助 WebOTP API，网页应用也可以通过编程方式从短信中提取 OTP，用户只需轻点一下即可完成表单填写，无需切换应用，大大提升了用户体验。

WebOTP API 的实现原理

WebOTP API 的使用主要包括以下三个关键部分：

正确标注的 <input> 标签
JavaScript 代码实现
符合规范的短信格式

接下来，我们将逐一详细介绍。

正确标注的输入标签

在 OTP 输入框的 <input> 标签中，需要添加 autocomplete="one-time-code" 属性。这样可以让浏览器识别该输入框为 OTP 输入框。

通过这种方式，浏览器可以自动关联短信中的 OTP 内容到该输入框中。

JavaScript 代码实现

在实现 WebOTP API 时，需要通过 JavaScript 代码进行逻辑控制。以下是一些关键点：

特性检测

在使用 WebOTP API 之前，建议通过以下代码检测浏览器是否支持该特性：
```
if ('OTPCredential' in window) {
   // WebOTP API 支持的代码逻辑
}
```
调用 ac.abort()

在登录流程结束或 OTP 输入超时后，记得调用 ac.abort() 方法以终止 WebOTP API 的操作。

以下是一个示例代码的截图：
JavaScript代码示例

短信格式规范

为了确保 WebOTP API 能够正确提取短信中的 OTP，短信内容需要遵循以下格式规范：

短信内容结构

短信的开头可以包含人类可读的文本（可选），其中应包含 4-10 位的字母数字组合作为 OTP。短信的最后一行需要包含 URL 和 OTP。
示例短信格式

以下是一个符合规范的短信示例：
```
您的验证码是：123456。

@www.yourdomain.com #123456
```
测试方法

在完成代码编写后，可以通过另一部手机向测试设备发送符合规范的短信来验证功能。

注意事项

在使用 WebOTP API 时，请注意以下几点：

关闭 RCS 功能

确保短信服务未启用 RCS（富通信服务）功能，因为 RCS 可能会干扰 WebOTP API 的正常工作。
授权请求

当设备收到符合规范的短信时，系统会弹出授权请求。用户同意后，业务逻辑即可按预期执行。

总结

WebOTP API 为网页应用带来了与原生应用类似的便捷体验，用户无需手动输入 OTP 即可完成验证。这不仅提升了用户体验，还减少了因手动输入错误导致的失败率。在实际开发中，确保短信格式符合规范，并正确实现 API 的逻辑，是成功应用 WebOTP API 的关键。

如果您在实现过程中遇到任何问题，欢迎留言讨论。

原文链接: https://www.tothenew.com/blog/using-webotp-api-in-nextjs-react/