我使用的是Ionic React应用程序,对构建Ionic Reaction应用程序来说是全新的.
目前,我正在try 自动填充动态口令(一次性密码),通过在用户登录/注册期间获取OTP
通过消息android/iOS的.
目前,动态口令在每次新注册/登录时都会通过Twilio's
默认短信服务发送给用户.因此,当动态口令到达用户手中时,用户可以手动键入动态口令,也可以复制消息中的动态口令并将其粘贴到Web应用程序中.
因此,目前用户可以从消息中复制动态口令并粘贴(将触发handlePaste个功能),但
Issue what I'm facing个
- 当OTP到来时,手机键盘上的OTP建议不会在Android中显示,但在iOS中可以使用.
- 当用户复制消息中的动态口令并返回到应用程序并单击输入字段时,网络键盘会显示复制的动态口令键盘.现在,如果用户点击该动态口令,则only the 1st field of the input field gets populated and the other fields are left blank (using 4 separate input fields)和handlePaste功能不会被触发.
- 我try 在粘贴功能中添加控制台/alert ,但没有记录任何内容.
SMS FORMAT个
Your OTP is: 123456.
@domain.com #123456
Approaches tried so far :个
-
Added the HTML attributes
autocomplete='one-time-code'
以从消息中获取OTP. 参考链接: https://developer.apple.com/documentation/security/password_autofill/enabling_password_autofill_on_an_html_input_element?language=objc个 -
用
clipboardData.getData
来达到同样的效果. -
Domain bound the codes,并添加文件Apple-app-Site-Association文件, 参考链接: https://developer.apple.com/documentation/xcode/supporting-associated-domains个
-
将webOTP API集成到APP中. 参考链接,集成相同. https://developer.mozilla.org/en-US/docs/Web/API/WebOTP_API和Chrome文档 https://developer.chrome.com/blog/cross-device-webotp/
-
使用
navigator.getCredentials
获取动态口令-不起作用.
handlePaste功能代码:
const length = 6;
const [activeInput, setActiveInput] = useState(0)
const [otpValues, setOTPValues] = useState(Array<string>(length).fill(''))
const handleOnPaste =
(e: React.ClipboardEvent<HTMLInputElement>) => {
e.preventDefault()
const pastedData = e.clipboardData
.getData('text/plain')
.trim()
.slice(0, length - activeInput)
.split('')
if (pastedData) {
let nextFocusIndex = 0
const updatedOTPValues = [...otpValues]
updatedOTPValues.forEach((val, index) => {
console.log(pastedData)
nextFocusIndex = index
})
setActiveInput(Math.min(nextFocusIndex + 1, length - 1))
}
}
在函数内部使用但不起作用的Navigator credentials个代码:
navigator.credentials.get({
otp: { transport:['sms'] },
signal: ac.signal
}).then((otp) => {
console.log(otp)
}).catch((err) => {
console.error(err);
});
如果有人能帮我一把,我将不胜感激:)