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

Question

我正在使用OTP为使用react内置的PWA进行登录过程。我想自动填写我的OTP。我想知道是否有人知道一些可以引导我朝着正确方向前进的东西。

Answer 1

有一个Web OTP API的草案规范。

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

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

Answer 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链接，然后将以下短信发送到您的设备

Hi this is a login otp: 9299

@t0hj4.csb.app #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/