Ionic 3 + TypeScript OTP自动验证实现示例技术求助

Hey there! I totally get how frustrating it is to hunt for up-to-date examples when working with newer Ionic versions. Let’s walk through a complete, working implementation of auto OTP verification using Ionic 3 + TypeScript—this should cover exactly what you need.

Step 1: Install Required Plugins #

First, we’ll use the SMS Retriever Manager plugin (for Android, the most common use case for auto-OTP). It’s secure because it doesn’t require full SMS permissions—just access to retrieve specific OTP messages.

Run these commands in your project root:

ionic cordova plugin add cordova-plugin-sms-retriever-manager
npm install --save @ionic-native/sms-retriever-manager@4

(Note: Ionic 3 pairs with @ionic-native v4.x, so we specify that version to avoid compatibility issues.)

Step 2: Generate the OTP Verification Page #

Create a dedicated page for OTP handling:

ionic generate page otp-verification

Step 3: Implement the TypeScript Logic #

Open src/pages/otp-verification/otp-verification.ts and replace the content with this:

import { Component } from '@angular/core';
import { NavParams, ToastController } from 'ionic-angular';
import { SMSRetrieverManager } from '@ionic-native/sms-retriever-manager';

@Component({
  selector: 'page-otp-verification',
  templateUrl: 'otp-verification.html',
})
export class OtpVerificationPage {
  phoneNumber: string;
  otpCode: string = '';
  isListening: boolean = false;

  constructor(
    private navParams: NavParams,
    private toastCtrl: ToastController,
    private smsRetriever: SMSRetrieverManager
  ) {
    // Grab the phone number passed from your previous page (e.g., login/signup)
    this.phoneNumber = this.navParams.get('phoneNumber');
  }

  ionViewDidLoad() {
    // Start listening for OTP as soon as the page loads (if we have the phone number)
    if (this.phoneNumber) {
      this.startSMSListening();
    }
  }

  // Start watching for incoming OTP SMS
  startSMSListening() {
    this.isListening = true;
    this.smsRetriever.startWatching()
      .then(() => {
        this.showToast('We’re listening for your OTP SMS now!');
        // Subscribe to the SMS received event
        this.smsRetriever.onSMSReceived().subscribe((smsData) => {
          this.isListening = false;
          // Extract the OTP from the SMS body
          const extractedOTP = this.extractOTPFromSMS(smsData.body);
          if (extractedOTP) {
            this.otpCode = extractedOTP;
            this.showToast(`OTP auto-filled: ${extractedOTP}`);
            // Trigger verification with the auto-filled OTP
            this.verifyOTP(extractedOTP);
          } else {
            this.showToast('Hmm, couldn’t find the OTP in the SMS. Try entering it manually.');
          }
        });
      })
      .catch((error) => {
        this.isListening = false;
        this.showToast(`Oops, failed to start listening: ${error.message}`);
      });
  }

  // Helper function to pull the OTP from SMS (adjust regex to match your SMS format)
  extractOTPFromSMS(smsBody: string): string | null {
    // This regex matches a 6-digit number (common OTP length—tweak if your OTP is shorter/longer)
    const otpPattern = /\b\d{6}\b/;
    const match = smsBody.match(otpPattern);
    return match ? match[0] : null;
  }

  // Manual submit for when auto-retrieval doesn’t work
  submitManualOTP() {
    if (!this.otpCode.trim()) {
      this.showToast('Please enter your OTP first!');
      return;
    }
    this.verifyOTP(this.otpCode);
  }

  // Call your backend API to verify the OTP (replace with your actual endpoint)
  verifyOTP(otp: string) {
    console.log(`Verifying OTP ${otp} for phone number: ${this.phoneNumber}`);
    // Example API call (uncomment and adjust to your backend):
    // this.http.post('https://your-api-url.com/verify-otp', {
    //   phone: this.phoneNumber,
    //   otp: otp
    // }).subscribe(
    //   (response) => {
    //     this.showToast('OTP verified successfully! 🎉');
    //     // Navigate to your app’s main screen here
    //   },
    //   (error) => {
    //     this.showToast('OTP verification failed. Please try again.');
    //   }
    // );
  }

  // Helper to show quick toast messages
  private showToast(message: string) {
    const toast = this.toastCtrl.create({
      message,
      duration: 3000,
      position: 'bottom'
    });
    toast.present();
  }
}

Step 4: Build the Page Template #

Update src/pages/otp-verification/otp-verification.html with this user-friendly UI:

<ion-header>
  <ion-navbar>
    <ion-title>Verify Your Phone</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-item>
    <ion-label fixed>Phone Number</ion-label>
    <ion-input type="tel" [(ngModel)]="phoneNumber" readonly></ion-input>
  </ion-item>

  <ion-item>
    <ion-label fixed>Enter OTP</ion-label>
    <ion-input type="text" [(ngModel)]="otpCode" maxlength="6" placeholder="XXXXXX"></ion-input>
  </ion-item>

  <!-- Show loading state while listening for SMS -->
  <div *ngIf="isListening" class="listening-container">
    <ion-spinner name="crescent"></ion-spinner>
    <p class="listening-text">Waiting for your OTP SMS...</p>
  </div>

  <button 
    ion-button 
    full 
    (click)="submitManualOTP()" 
    [disabled]="isListening"
    class="verify-btn"
  >
    {{ isListening ? 'Waiting for OTP...' : 'Verify OTP' }}
  </button>
</ion-content>

Step 5: Update App Module #

Don’t forget to add the SMS plugin to your src/app/app.module.ts so it’s available across the app:

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';

// Import the OTP page
import { OtpVerificationPage } from '../pages/otp-verification/otp-verification';
// Import the SMS plugin
import { SMSRetrieverManager } from '@ionic-native/sms-retriever-manager';

@NgModule({
  declarations: [
    MyApp,
    OtpVerificationPage
    // ... other pages
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    OtpVerificationPage
    // ... other pages
  ],
  providers: [
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    SMSRetrieverManager // Add the plugin here
  ]
})
export class AppModule {}

Critical Notes to Make This Work #

1. SMS Format Requirement (Android):
   The SMS Retriever API only detects messages that include your app’s unique hash. To get this hash, add this code somewhere (like in your app’s home page) and log it:

   this.smsRetriever.getAppHash().then(hash => console.log('Your App Hash:', hash));
   

   Then include this hash in your OTP SMS (usually at the end), like:

   Your OTP for MyApp is 123456.

   #ABC123XYZ789

2. iOS Fallback:
   iOS doesn’t support the SMS Retriever API. For iOS users, the manual OTP entry will work, or you can use the cordova-plugin-sms (which requires SMS permissions) to read messages—just adjust the code to handle that case.

3. Security First:
   Always verify the OTP on your backend server, never just on the client. The client-side code is only for convenience—your backend should validate that the OTP matches what was sent to the user’s phone.

内容的提问来源于stack exchange，提问作者sachin.g