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

发布于 1周前 作者 yuanlaile 来自 Flutter

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

otp_autofill_sms 是一个专为Android应用设计的Flutter插件，用于简化一次性密码（OTP）的自动填充。

此插件仅适用于Android平台，因为iOS设备可以原生处理OTP自动填充。对于iOS用户，系统内置了OTP自动填充功能。而对于Android用户，该插件通过管理OTP自动填充，无需请求SMS读取权限，从而提高了用户体验。

特性

  • 自动OTP检测：自动捕获并填充通过短信发送的一次性密码，增强用户体验。
  • 无需SMS权限：利用Google的SMS用户同意API，在不需要显式SMS读取权限的情况下运行。
  • 简单集成：在Flutter项目中轻松设置和集成。

截图

默认界面 OTP自动填充

工作原理

该插件利用Google的SMS Retriever API自动检测OTP。为了确保正确检测，短信必须遵循特定的格式规则：

短信格式指南

  • 长度：短信应不超过140字节。
  • 内容：消息必须包含一个一次性验证码。
  • 结束字符串：消息应以11个字符的哈希字符串结尾，用于标识您的应用。

示例短信格式

你的ExampleApp验证码是：915456 FA+9qCVSz

务必为应用的发布版和调试版生成签名代码，并将其附加到您的消息中。

安装

要将otp_autofill_sms添加到您的Flutter项目，请按以下步骤操作：

  1. 添加依赖：在pubspec.yaml文件中添加插件：

    dependencies:
  otp_autofill_sms: ^1.0.0

  2. 安装包：运行flutter pub get以获取包。

  3. Android配置：请按照以下设置说明配置您的Android项目。

设置说明

  1. Flutter集成：在Dart代码中导入并初始化插件：

    import 'package:otp_autofill_sms/otp_autofill_sms.dart';

  2. 基本使用：

    // 获取应用签名代码。
Future<void> _getSignatureCode() async {
  String? signature = await OtpAutofillSms.getAppSignature();
  
  print("签名: $signature");
}

// 开始监听短信
void _startListeningSms() {
  OtpAutofillSms.startListeningSms().then((message) {
    setState(() {
      print("收到的消息: $message");
    });
  });
}

贡献

欢迎贡献！如果您发现任何问题或有改进建议，请提交拉取请求或在otp_autofill_sms仓库上创建一个issue。

完整示例代码

以下是一个完整的示例代码，展示了如何在Flutter项目中使用otp_autofill_sms插件。

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  [@override](/user/override)
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  String? _signature;
  String? _receivedMessage;

  [@override](/user/override)
  void initState() {
    super.initState();
    _getSignatureCode();
    _startListeningSms();
  }

  // 获取应用签名代码
  Future<void> _getSignatureCode() async {
    String? signature = await OtpAutofillSms.getAppSignature();
    
    setState(() {
      _signature = signature;
    });

    print("签名: $_signature");
  }

  // 开始监听短信
  void _startListeningSms() {
    OtpAutofillSms.startListeningSms().then((message) {
      setState(() {
        _receivedMessage = message;
        print("收到的消息: $_receivedMessage");
      });
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('OTP自动填充示例'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('签名代码: $_signature'),
            SizedBox(height: 20),
            Text('收到的消息: $_receivedMessage'),
          ],
        ),
      ),
    );
  }
}

更多关于Flutter短信验证码自动填充插件otp_autofill_sms的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter短信验证码自动填充插件otp_autofill_sms的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何在Flutter项目中使用otp_autofill_sms插件来实现短信验证码自动填充的示例代码。这个插件允许你自动从接收到的短信中提取一次性密码（OTP）并填充到指定的文本框中。

1. 添加依赖

首先，在你的pubspec.yaml文件中添加otp_autofill_sms依赖：

dependencies:
  flutter:
    sdk: flutter
  otp_autofill_sms: ^x.y.z  # 请将x.y.z替换为最新版本号

2. 导入插件

在你的Dart文件中（通常是main.dart或你的主页面文件），导入otp_autofill_sms插件：

import 'package:otp_autofill_sms/otp_autofill_sms.dart';

3. 配置TextFormField

使用TextFormField来接收OTP，并设置textInputAction和keyboardType为适当的值。同时，使用otpController来监听OTP的变化。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('OTP Autofill SMS Example'),
        ),
        body: OTPExample(),
      ),
    );
  }
}

class OTPExample extends StatefulWidget {
  @override
  _OTPExampleState createState() => _OTPExampleState();
}

class _OTPExampleState extends State<OTPExample> {
  final TextEditingController _controller = TextEditingController();
  String? otp;

  @override
  void initState() {
    super.initState();
    // 初始化OTP监听器
    OtpAutofillSms.addListener(onOtpReceived: (String receivedOtp) {
      setState(() {
        otp = receivedOtp;
        _controller.value = TextEditingValue(
          text: receivedOtp,
          selection: TextSelection.fromPosition(
            TextPosition(offset: receivedOtp.length),
          ),
        );
      });
    });
  }

  @override
  void dispose() {
    // 移除OTP监听器
    OtpAutofillSms.removeListener();
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Text('Enter OTP:', style: TextStyle(fontSize: 18)),
          SizedBox(height: 8),
          TextFormField(
            controller: _controller,
            maxLength: 6, // 假设OTP长度为6
            keyboardType: TextInputType.number,
            textInputAction: TextInputAction.done,
            decoration: InputDecoration(
              border: OutlineInputBorder(),
              hintText: 'OTP',
            ),
          ),
          SizedBox(height: 16),
          otp != null
              ? Text('OTP Automatically Filled: $otp', style: TextStyle(color: Colors.green))
              : Text(''),
        ],
      ),
    );
  }
}

4. 权限配置

确保在AndroidManifest.xml中添加接收短信的权限（如果尚未添加）：

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

5. 运行应用

完成上述步骤后，你可以运行你的Flutter应用。当接收到包含OTP的短信时，插件将自动提取OTP并填充到指定的TextFormField中。

这个示例代码展示了如何使用otp_autofill_sms插件来自动填充短信验证码。根据项目的具体需求，你可能需要进行一些调整，比如处理不同的OTP长度或添加更多的UI元素。

回到顶部