Ionic 2读取短信OTP并自动登录仪表盘报错求助

你遇到的这个报错，核心原因是没有正确集成和使用Cordova SMS原生插件——Ionic本身不自带SMS功能，得依赖第三方插件，而且不能直接用全局的SMS对象，得通过Ionic Native的包装器来调用。下面一步步帮你解决：

第一步：安装并配置必要的插件 #

首先得装两个关键插件：

• Cordova SMS原生插件：

  cordova plugin add cordova-plugin-sms
  

• Ionic Native的SMS包装器（注意Ionic 2对应4.x版本，别装最新的）：

  npm install @ionic-native/sms@4
  

还要检查config.xml里的权限配置（你说已经申请了，但再确认下），Android平台需要加：

<uses-permission android:name="android.permission.RECEIVE_SMS" />
<uses-permission android:name="android.permission.READ_SMS" />

第二步：在项目中正确注入SMS服务 #

1. 打开app.module.ts，导入并把SMS添加到providers数组：

import { SMS } from '@ionic-native/sms';

@NgModule({
  declarations: [/* 你的组件 */],
  imports: [/* 你的模块 */],
  bootstrap: [IonicApp],
  entryComponents: [/* 你的页面 */],
  providers: [
    StatusBar,
    SplashScreen,
    SMS, // 把SMS加进来
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

2. 在你的目标组件中，注入SMS服务，替换原来直接调用SMS的逻辑：

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, AlertController, Platform, LoadingController, ToastController, ViewController } from 'ionic-angular';
import { SMS } from '@ionic-native/sms';
import { AndroidPermissions } from '@ionic-native/android-permissions';

@IonicPage()
@Component({
  selector: 'page-your-login',
  templateUrl: 'your-login.html',
})
export class YourLoginPage {

  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    private sms: SMS, // 这里注入SMS服务
    private androidPermissions: AndroidPermissions,
    public alertCtrl: AlertController,
    public platform: Platform,
    public loadingCtrl: LoadingController,
    public toastCtrl: ToastController,
    public viewCtrl: ViewController
  ) {}

  // 重写你的watchSMS方法
  watchSMS() {
    // 必须在真机环境下运行，模拟器没法调用原生插件
    if (!this.platform.is('cordova')) {
      this.toastCtrl.create({message: '请在真机上测试OTP功能', duration: 3000}).present();
      return;
    }

    this.sms.startWatch()
      .then(() => {
        // 监听短信到达事件
        document.addEventListener('onSMSArrive', (e: any) => {
          const incomingSMS = e.data;
          // 从短信内容里提取OTP（这里假设OTP是6位数字，你可以根据实际短信格式调整正则）
          const otpMatch = incomingSMS.body.match(/\d{6}/);
          if (otpMatch) {
            const otp = otpMatch[0];
            // 这里可以加OTP验证逻辑，验证通过后跳转仪表盘
            this.navCtrl.setRoot('DashboardPage');
          }
        });
      })
      .catch(err => {
        console.error('启动短信监听失败:', err);
        this.toastCtrl.create({message: '无法监听短信，请检查权限', duration: 3000}).present();
      });
  }

  // 获取设备手机号的逻辑（可选）
  checkDevicePhoneNumber() {
    // 如果要获取设备手机号，需要装cordova-plugin-sim插件
    // 安装命令：cordova plugin add cordova-plugin-sim
    // 然后导入@ionic-native/sim，注入后调用getSimInfo()
    // 示例：
    // this.sim.getSimInfo().then(info => {
    //   if (info.phoneNumber) {
    //     // 如果获取到手机号，直接跳转仪表盘
    //     this.navCtrl.setRoot('DashboardPage');
    //   }
    // }).catch(err => {
    //   console.error('获取手机号失败:', err);
    // });
  }

  ionViewDidLoad() {
    // 页面加载时先申请权限（Android 6+需要动态申请）
    this.requestSMSPermissions();
    // 同时检查设备手机号
    this.checkDevicePhoneNumber();
  }

  // 动态申请短信权限（Android 6+必备）
  requestSMSPermissions() {
    // 需要装cordova-plugin-android-permissions插件
    // 安装命令：cordova plugin add cordova-plugin-android-permissions
    this.androidPermissions.requestPermissions([
      this.androidPermissions.PERMISSION.READ_SMS,
      this.androidPermissions.PERMISSION.RECEIVE_SMS
    ]).then(result => {
      if (result.hasPermission) {
        // 权限通过，启动短信监听
        this.watchSMS();
      } else {
        this.alertCtrl.create({
          title: '权限不足',
          message: '需要短信权限才能自动验证OTP，请前往设置开启',
          buttons: ['确定']
        }).present();
      }
    }).catch(err => {
      console.error('权限申请失败:', err);
    });
  }
}

第三步：常见问题排查 #

• 必须在真机测试：模拟器无法调用原生SMS插件，也没法接收真实短信
• 版本兼容：Ionic 2只能用Ionic Native 4.x版本的插件，别装最新的5+版本，会不兼容
• 权限问题：Android 6及以上需要动态申请权限，不能只靠config.xml配置
• 避免全局调用：一定不要直接用SMS.watchSMS()这种方式，必须通过注入的sms实例调用

内容的提问来源于stack exchange，提问作者Sreyah BB