在 React PWA 中自动读取 SMS/OTP答案

【问题标题】：auto read SMS/OTP in react PWA在 React PWA 中自动读取 SMS/OTP
【发布时间】：2020-05-26 20:12:55
【问题描述】：

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

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

【问题讨论】：

你在使用 React Native 吗？
不，我正在使用 react js 创建 PWA。

标签： javascript reactjs progressive-web-apps

【解决方案1】：

有一个 Web OTP API 规范草案。

Web OTP API 可让您的应用接收绑定到应用源的特殊格式的消息。由此，您可以通过编程方式从 SMS 消息中获取 OTP，并更轻松地为用户验证电话号码。

https://web.dev/web-otp/

【讨论】：

【解决方案2】：

只是为了确保短信格式正确。下面是我放入componentDidMount 的代码，它可以工作。

import "./styles.css";

import React from "react";

export default class App extends React.Component {
  state = {
    otp: ""
  };

componentDidMount() {

if ("OTPCredential" in window) {
  const ac = new AbortController();

  navigator.credentials
    .get({
      otp: { transport: ["sms"] },
      signal: ac.signal
    })
    .then((otp) => {
      this.setState({ otp: otp.code });
      ac.abort();
    })
    .catch((err) => {
      ac.abort();
      console.log(err);
    });
}


}

  render() {
    return (
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <h2>Your OTP is: {this.state.otp}</h2>
      </div>
    );
  }
}

收到短信时总是提示。

并且会在屏幕上显示 otp。

在 chrome 移动浏览器中打开 CodeSandbox link 并将以下短信发送到您的设备

Hi this is a login otp: 9299
@t0hj4.csb.app #9299

【讨论】：

【解决方案3】：

是的，这现在是可能的。 Chrome 在 84 及更高版本中发布此功能。借助 WEBOTP API，我们可以在移动设备上检测网络上的 OTP。

以下是 Angular PWA 的示例：这是一个带有 Angular PWA 应用程序的 Web-OTP 集成代码：https://github.com/Rohit3230/webOtpAutoReadByAngular

获取 Angular PWA 应用的实时工作 URL。 https://rohit3230.github.io/webOtpAutoReadByAngular/

【讨论】：