如何使用Ionic框架添加自动OTP验证功能？

Question

我制作了一个 Ionic Cordova 应用程序并想添加自动 OTP 验证功能，自动从消息收件箱中检索 OTP 并将数字放入 OTP 的输入框中。

这里 OTP 从 API 发送到手机。

先决条件：- 安装短信检索器插件： 1>ionic cordova 插件 add cordova-plugin-sms-retriever-manager 2>npm install @ionic-native/sms-retriever

您能否建议我一些关于如何在项目中实现此功能的技术

Answer 1

是的，这是可以实现的。为了实现这一目标，您应该遵循以下步骤：

1 — 使用虚拟注册流程创建示例 Ionic 4 应用程序

2 — 实现Cordova插件读取短信（cordova-plugin-sms-receive）

3 — 在 Android 或 iOS 设备上构建应用程序

4 — 测试自动短信读取以批准样本注册

declare var SMSReceive: any; // from Cordova-plugin

然后，您应该将这些事件添加到您的组件中：

1. SMSReceive.startWatch()
2. SMSReceive.stopWatch()
3. 短信到达

start() {
    SMSReceive.startWatch(
      () => {
        console.log('watch started');
        document.addEventListener('onSMSArrive', (e: any) => {
          var IncomingSMS = e.data;
          console.log(JSON.stringify(IncomingSMS));
        });
      },
      () => { console.log('watch start failed') }
    )
  }

并且，登录后：

SMSReceive.stopWatch(
() => { console.log('watch stopped') },
() => { console.log('watch stop failed') }
)

您可以按照参考文献中的所有步骤进行操作，我已附在这个答案中。

SO 不是代码编写，但是，我可以帮助您从 here 提供参考，这是我最近在我们的应用程序中使用的。

Answer 2

SmsReceiver 未定义 在 LoginPage.startSMSReception (login.page.ts:131:5) 在 LoginPage.next (login.page.ts:113:13) 在 LoginPage_ion_button_19_Template_ion_button_click_0_listener (login.page.html:79:71) 在executeListenerWithErrorHandling（core.mjs：25607：16） 在wrapListenerIn_markDirtyAndPreventDefault（core.mjs：25641：22） 在 HostElement 处。 （平台浏览器.mjs：679：17） 在 _ZoneDelegate.invokeTask (zone.js:403:31) 我面临这种类型的错误，你能帮助我吗？