用于 OTP 验证的 Ionic 3 读取 SMS 插件

Posted 2023-04-19

【中文标题】用于 OTP 验证的 Ionic 3 读取 SMS 插件

【英文标题】：Ionic 3 read SMS plugin for OTP Verification

【发布时间】：2018-03-14 14:19:56

【问题描述】：

我用过下面的插件 科尔多瓦插件短信

方法：-

watchSMS()    
  if(window.SMS) window.SMS.startWatch(function()  
    console.log('Succeed to start watching SMS');   
    document.addEventListener('onSMSArrive', this.smsArived);
  , function()   
    console.log('failed to start watching SMS');  
  );  


stopWatchSMS()    
  if(window.SMS) window.SMS.stopWatch(function() 
     console.log('Succeed to stop watching SMS'); 
  , function()  
     console.log('failed to stop watching SMS');    
  ); 


smsArived = (result: any) =>  
    console.log("SMS DATA 2" + smsData);
    this.stopWatchSMS();   

使用上面的代码从 SMS 中读取 otp 以获取低于错误的 ionic 3 任何人都可以提供帮助

file:///android_asset/www/cordova.js：第 312 行：成功错误 callbackId：SMS329868448：TypeError：无法读取属性“smsArived” 空 I/chromium：[INFO:CONSOLE(312)]“成功 callbackId 错误： SMS329868448 : TypeError: 无法读取属性 'smsArived' of null",, 来源：file:///android_asset/www/cordova.js

【参考方案1】：

您正在尝试使用纯 javascript 来实现这一点，这在使用 Ionic/Angular/Typescript 时会导致不需要的效果。 startWatch 的成功回调函数中的 this 没有引用类范围，因此找不到 smsArived 方法。

那么如何以 Angular/Ionic 的方式做到这一点？

首先不要直接访问全局对象（window、document），这对性能和可维护性不利。 要使用 ionic-natvie 中未包含的 cordova 插件，您必须告诉 typescript 插件句柄 (SMS) 存在：

declare var SMS; // put this at the same level as your imports

然后你必须修改你的watchSMS函数如下：

watchSMS()    
  SMS.startWatch(
    success => 

    ,
    error => 

    
  );

通过使用arrow functions 进行回调this 具有正确的范围。所以现在我们需要解决您对document.addEventListener 的直接调用：在Angular4 中，这是通过注入Renderer2 类来完成的：

import  Renderer2  from '@angular/core'; // the import
constructor(private renderer: Renderer2)  // inject it in your constructor

现在您可以在成功回调中添加事件侦听器，并在捕获事件时使用事件数据调用您的 smsArived 方法：

let removeSmsListener = this.renderer.listen('document', 'onSMSArrive', (event) => 
   this.smsArived(event);
);

请注意，您必须再次使用箭头函数来保留this 的上下文。要清理你的身后，你可以调用removeSmsListener()，因为渲染器的listen方法返回一个函数。

现在应该很容易将这些更改应用到其他函数。

【讨论】：

我正在为我的应用程序使用 Ionic 3+ 和 Angular 4+，但在 SMS 到达时没有触发“onSMSARrive”事件。