自动读取反应 PWA 中的短信/一次性密码

Question

我正在使用OTP为使用react内置的PWA进行登录过程。

我想自动填写我的OTP。我想知道是否有人知道一些可以引导我朝着正确方向前进的东西。

Answer 1

有一个Web OTP API的草案规范。Web OTP API 允许应用接收绑定到应用源的特殊格式的消息。通过这种方式，您可以以编程方式从SMS消息中获取OTP，并更轻松地验证用户的电话号码。https://web.dev/web-otp/

Answer 2

只是为了确保短信应该采用正确的格式。以下是我放入的代码，它的工作原理。componentDidMountimport "./styles.css";import React from "react";export default class App extends React.Component {&nbsp; state = {&nbsp; &nbsp; otp: ""&nbsp; };componentDidMount() {if ("OTPCredential" in window) {&nbsp; const ac = new AbortController();&nbsp; navigator.credentials&nbsp; &nbsp; .get({&nbsp; &nbsp; &nbsp; otp: { transport: ["sms"] },&nbsp; &nbsp; &nbsp; signal: ac.signal&nbsp; &nbsp; })&nbsp; &nbsp; .then((otp) => {&nbsp; &nbsp; &nbsp; this.setState({ otp: otp.code });&nbsp; &nbsp; &nbsp; ac.abort();&nbsp; &nbsp; })&nbsp; &nbsp; .catch((err) => {&nbsp; &nbsp; &nbsp; ac.abort();&nbsp; &nbsp; &nbsp; console.log(err);&nbsp; &nbsp; });}}&nbsp; render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <div className="App">&nbsp; &nbsp; &nbsp; &nbsp; <h1>Hello CodeSandbox</h1>&nbsp; &nbsp; &nbsp; &nbsp; <h2>Your OTP is: {this.state.otp}</h2>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; );&nbsp; }}每当收到短信时，它总是提示。并将在屏幕上显示otp。在chrome移动浏览器中打开CodeSandbox链接，然后将以下短信发送到您的设备Hi this is a login otp: [e-mail] #9299

Answer 3

是的，现在这是可能的。Chrome 在版本 84 及更高版本中发布了此功能。在WEBOTP API的帮助下，我们可以在移动设备的网络上检测OTP。以下是Angular PWA的示例：这是一个带有Angular PWA应用程序的Web-OTP集成代码：https://github.com/Rohit3230/webOtpAutoReadByAngular为有角度的PWA应用程序提供实时工作URL。https://rohit3230.github.io/webOtpAutoReadByAngular/