Flutter短信验证码自动填充与同意插件otp_autofill_sms_consent的使用

Flutter短信验证码自动填充与同意插件otp_autofill_sms_consent的使用

描述

otp_autofill_sms_consent 是一个更新后的Flutter插件,用于从SMS中提取OTP(一次性密码)进行验证。该插件使用了Android的SMS User Consent API,并且针对Android 13及以上版本进行了修复。

使用条件

要触发SMS User Consent API,必须满足以下条件:

  • 消息包含4到10个字符的字母数字字符串,并且至少包含一个数字。
  • 消息是由不在用户联系人中的电话号码发送的。
  • 如果指定了发送者的电话号码,则消息必须由该号码发送。

使用方法

下面是一个完整的示例代码,展示了如何在Flutter应用中使用 otp_autofill_sms_consent 插件来实现短信验证码的自动填充与同意功能。

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

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

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  late final OtpAutofillSmsConsent _otpAutofillSmsConsent;
  ScaffoldMessengerState? _scaffoldMessenger;
  String? _responseText;

  String _sms = '';

  [@override](/user/override)
  void initState() {
    super.initState();
    // 初始化OtpAutofillSmsConsent实例
    _otpAutofillSmsConsent = OtpAutofillSmsConsent(
      pattern: r'\d{4,}', // 正则表达式,匹配4位及以上的数字
      onAllowed: (sms) {
        // 当用户同意并成功获取到OTP时调用
        _sms = sms;
        setState(() {});
      },
      onDenied: () {
        // 当用户拒绝时调用
        _responseText = '用户拒绝!';
      },
      onPatternUnmatched: () {
        // 当未找到符合正则表达式的OTP时调用
        _responseText = '未找到OTP!请尝试手动输入。';
      },
    )..start('otpSender'); // 启动监听,'otpSender'是发送者标识
  }

  [@override](/user/override)
  void dispose() {
    // 释放资源
    _otpAutofillSmsConsent.stop();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('OTP自动填充与同意'),
        ),
        body: Builder(
          builder: (context) {
            // 获取ScaffoldMessenger实例
            _scaffoldMessenger ??= ScaffoldMessenger.of(context);

            return Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    '短信内容: $_sms',
                    style: TextStyle(fontSize: 18),
                  ),
                  SizedBox(height: 12),
                  Text(
                    '响应: $_responseText',
                    style: TextStyle(fontSize: 16, color: Colors.red),
                  ),
                ],
              ),
            );
          },
        ),
      ),
    );
  }
}

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

1 回复

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


当然,下面是一个关于如何在Flutter项目中使用otp_autofill_sms_consent插件来实现短信验证码自动填充与同意功能的代码示例。这个插件允许用户同意自动填充短信验证码,并在接收到验证码时自动填充到相应的输入框中。

首先,确保你已经在pubspec.yaml文件中添加了otp_autofill_sms_consent依赖:

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

然后,运行flutter pub get来安装依赖。

接下来,在你的Flutter应用中,你可以按照以下步骤来实现短信验证码自动填充与同意功能:

  1. 导入依赖
import 'package:flutter/material.dart';
import 'package:otp_autofill_sms_consent/otp_autofill_sms_consent.dart';
  1. 创建一个StatefulWidget来处理逻辑
class OTPScreen extends StatefulWidget {
  @override
  _OTPScreenState createState() => _OTPScreenState();
}

class _OTPScreenState extends State<OTPScreen> {
  final TextEditingController _controller = TextEditingController();
  bool _isSmsConsentGranted = false;

  @override
  void initState() {
    super.initState();
    // 检查用户是否已经授予短信读取权限
    OtpAutofillSmsConsent.checkSmsRetrievalStatus().then((status) {
      setState(() {
        _isSmsConsentGranted = status == SmsRetrievalStatus.granted;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('OTP Verification'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text(
              'Enter OTP:',
              style: TextStyle(fontSize: 18),
            ),
            SizedBox(height: 8),
            TextField(
              controller: _controller,
              keyboardType: TextInputType.number,
              maxLength: 6,
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                labelText: 'OTP',
              ),
            ),
            SizedBox(height: 24),
            if (!_isSmsConsentGranted)
              ElevatedButton(
                onPressed: () async {
                  try {
                    // 请求用户授予短信读取权限
                    await OtpAutofillSmsConsent.requestSmsRetrievalPermission();
                    // 重新检查权限状态
                    OtpAutofillSmsConsent.checkSmsRetrievalStatus().then((status) {
                      setState(() {
                        _isSmsConsentGranted = status == SmsRetrievalStatus.granted;
                      });
                    });
                  } catch (e) {
                    // 处理错误
                    print('Error requesting SMS retrieval permission: $e');
                  }
                },
                child: Text('Request OTP Permission'),
              ),
            SizedBox(height: 16),
            ElevatedButton(
              onPressed: () {
                // 在这里处理OTP验证逻辑
                print('OTP entered: ${_controller.text}');
              },
              child: Text('Verify OTP'),
            ),
          ],
        ),
      ),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}
  1. 监听短信接收事件

在你的应用中,你可能还需要监听短信接收事件并在接收到验证码时自动填充到输入框中。这可以通过OtpAutofillSmsListener来实现。不过需要注意的是,由于隐私和安全原因,监听短信通常需要在设备的系统设置中授予特殊权限,这在Flutter中可能受到平台限制。

通常,插件会处理大部分底层细节,但在实际应用中,你可能需要根据平台(Android/iOS)的不同来处理特定的权限请求和监听逻辑。otp_autofill_sms_consent插件主要处理用户同意部分,而短信监听和自动填充通常依赖于操作系统的原生支持。

由于直接监听短信内容在Flutter中可能受到严格限制,这里不给出具体的监听代码。在实际应用中,你可能需要结合原生代码(如Kotlin/Swift)来实现完整的短信监听和自动填充功能。

希望这个示例能帮助你理解如何在Flutter项目中使用otp_autofill_sms_consent插件来处理短信验证码自动填充与同意功能。如果有进一步的问题或需要更详细的实现,请随时提问。

回到顶部