Flutter短信验证码自动填充插件sms_otp_autofill的使用

Flutter短信验证码自动填充插件sms_otp_autofill的使用

简介

sms_otp_autofill 是一个Flutter插件，用于在Android设备上提供SMS OTP（一次性密码）自动填充功能。该插件支持Android 10到14版本。对于iOS，系统默认提供了SMS自动填充功能，因此不需要此插件。

使用方法

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 sms_otp_autofill 依赖：

dependencies:
  sms_otp_autofill: ^latest_version

2. 配置Android项目

2.1 修改 AndroidManifest.xml

在 android/app/src/main/AndroidManifest.xml 文件中添加以下权限和广播接收器配置：

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

<application>
    <receiver android:name="com.shounakmulay.telephony.sms.IncomingSmsReceiver"
              android:permission="android.permission.BROADCAST_SMS" android:exported="true">
        <intent-filter>
            <action android:name="android.provider.Telephony.SMS_RECEIVED"/>
        </intent-filter>
    </receiver>
</application>

2.2 修改 build.gradle

在 android/app/build.gradle 文件中设置 minSdkVersion 为23或更高：

defaultConfig {
    minSdkVersion 23
}

3. 实现短信监听

在发送手机号码给后端之前，需要告诉插件开始监听带有OTP的短信。可以通过调用 telephony.listenIncomingSms 方法来实现：

import 'package:sms_otp_autofill/sms_otp_autofill.dart';

class OtpReceiverView extends StatefulWidget {
  const OtpReceiverView({super.key});

  [@override](/user/override)
  State<OtpReceiverView> createState() => _OtpReceiverViewState();
}

class _OtpReceiverViewState extends State<OtpReceiverView> {
  String? otpcode;

  [@override](/user/override)
  void initState() {
    super.initState();
    // 开始监听短信
    telephony.listenIncomingSms(
      onNewMessage: (SmsMessage message) {
        print('Sender: ${message.address}');
        print('Message: ${message.body}');

        String sms = message.body.toString();
        String appName = "SMS_Autofill"; // 替换为你的应用名称

        if (message.body!.contains(appName)) {
          // 提取OTP代码
          otpcode = sms.replaceAll(RegExp(r'[^0-9]'), '');
          setState(() {});
        } else {
          print("Error: SMS does not contain the expected app name");
        }
      },
      listenInBackground: false,
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('SMS OTP Auto Fill Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text('Received OTP:'),
            Text(
              otpcode ?? 'Waiting for OTP...',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
    );
  }
}

4. Android短信格式约束

为了确保短信能够被正确接收并解析，短信内容需要遵循以下规则：

• 短信长度不能超过140字节。
• 短信中必须包含一个一次性代码，该代码将由客户端发送回服务器以完成验证流程。

例如，一条符合要求的短信可以是：

AppName: Your code is 123456

完整示例Demo

以下是一个完整的示例项目，展示了如何使用 sms_otp_autofill 插件来实现短信验证码自动填充功能。

import 'package:flutter/material.dart';
import 'package:sms_otp_autofill/sms_otp_autofill.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'SMS OTP Auto Fill Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const OtpReceiverView(),
    );
  }
}

class OtpReceiverView extends StatefulWidget {
  const OtpReceiverView({super.key});

  [@override](/user/override)
  State<OtpReceiverView> createState() => _OtpReceiverViewState();
}

class _OtpReceiverViewState extends State<OtpReceiverView> {
  String? otpcode;

  [@override](/user/override)
  void initState() {
    super.initState();
    // 开始监听短信
    telephony.listenIncomingSms(
      onNewMessage: (SmsMessage message) {
        print('Sender: ${message.address}');
        print('Message: ${message.body}');

        String sms = message.body.toString();
        String appName = "SMS_Autofill"; // 替换为你的应用名称

        if (message.body!.contains(appName)) {
          // 提取OTP代码
          otpcode = sms.replaceAll(RegExp(r'[^0-9]'), '');
          setState(() {});
        } else {
          print("Error: SMS does not contain the expected app name");
        }
      },
      listenInBackground: false,
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('SMS OTP Auto Fill Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text('Received OTP:'),
            Text(
              otpcode ?? 'Waiting for OTP...',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
    );
  }
}