TA貢獻(xiàn)1900條經(jīng)驗(yàn) 獲得超5個(gè)贊
有一個(gè)Web OTP API的草案規(guī)范。
Web OTP API 允許應(yīng)用接收綁定到應(yīng)用源的特殊格式的消息。通過(guò)這種方式，您可以以編程方式從SMS消息中獲取OTP，并更輕松地驗(yàn)證用戶的電話號(hào)碼。
TA貢獻(xiàn)1829條經(jīng)驗(yàn) 獲得超9個(gè)贊
只是為了確保短信應(yīng)該采用正確的格式。以下是我放入的代碼，它的工作原理。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>
);
}
}
每當(dāng)收到短信時(shí)，它總是提示。
并將在屏幕上顯示otp。
在chrome移動(dòng)瀏覽器中打開(kāi)CodeSandbox鏈接，然后將以下短信發(fā)送到您的設(shè)備
Hi this is a login otp: 9299
@t0hj4.csb.app #9299
TA貢獻(xiàn)1111條經(jīng)驗(yàn) 獲得超0個(gè)贊
是的，現(xiàn)在這是可能的。Chrome 在版本 84 及更高版本中發(fā)布了此功能。在WEBOTP API的幫助下，我們可以在移動(dòng)設(shè)備的網(wǎng)絡(luò)上檢測(cè)OTP。
以下是Angular PWA的示例：這是一個(gè)帶有Angular PWA應(yīng)用程序的Web-OTP集成代碼：https://github.com/Rohit3230/webOtpAutoReadByAngular
為有角度的PWA應(yīng)用程序提供實(shí)時(shí)工作URL。https://rohit3230.github.io/webOtpAutoReadByAngular/
舉報(bào)