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

简介

sms_consent_for_otp_autofill 是一个用于自动填充OTP（一次性密码）的Flutter插件。它利用Android的SMS用户同意API来检索单条短信中的OTP，前提是用户授予了权限。该插件不需要在manifest中声明任何权限，并且仅适用于Android设备。iOS设备可以使用其他方式实现类似功能。

截图

使用步骤

1. 创建实例

你可以选择性地提供电话号码监听器和短信监听器：

import 'package:sms_consent_for_otp_autofill/sms_consent_for_otp_autofill.dart';

SmsConsentForOtpAutofill smsConsentForOtpAutoFill = SmsConsentForOtpAutofill(
    phoneNumberListener: (number) {
      // 当用户选择一个电话号码时执行的操作
    },
    smsListener: (otpcode) {
      // 当用户接收到短信时执行的操作
    }
);

2a. 请求用户的电话号码（可选）

smsConsentForOtpAutoFill.requestPhoneNumber();

获取到的电话号码可以通过以下方式访问：

String? selectedNumber = smsConsentForOtpAutoFill.selectedPhoneNumber;

2b. 请求接收短信（可选）

smsConsentForOtpAutoFill.requestSms(); 
// 或者指定发送方的电话号码
smsConsentForOtpAutoFill.requestSms(senderPhoneNumber: sender_number);

当用户点击“允许”并接收到短信后，可以通过以下方式访问：

String? receivedSms = smsConsentForOtpAutoFill.receivedSms;

3. 最后，销毁实例

smsConsentForOtpAutoFill.dispose();

注意事项

根据SMS用户同意API的要求，只有满足以下条件的短信才能被插件接收：

• 短信包含6到10位数字。
• 短信由不在用户联系人列表中的电话号码发送。
• 如果指定了发送方的电话号码，则短信必须由该号码发送。

示例代码

下面是一个完整的示例demo，展示了如何使用sms_consent_for_otp_autofill插件来自动填充OTP：

import 'package:flutter/material.dart';
import 'package:otp_text_field/otp_field.dart';
import 'package:otp_text_field/style.dart';
import 'package:sms_consent_for_otp_autofill/sms_consent_for_otp_autofill.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  late SmsConsentForOtpAutofill smsConsentForOtpAutoFill;
  OtpFieldController otpbox = OtpFieldController();
  String? phoneNumber;
  bool startListen = false;

  @override
  void initState() {
    super.initState();
    smsConsentForOtpAutoFill = SmsConsentForOtpAutofill(
      phoneNumberListener: (number) {
        phoneNumber = number;
        print("Selected phone number: $number");
      },
      smsListener: (otpcode) {
        print("Received OTP code: $otpcode");
        setState(() {
          startListen = false;
        });
        otpbox.set(otpcode.split(""));
      },
    );
  }

  @override
  void dispose() {
    smsConsentForOtpAutoFill.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('SMS Consent for OTP AutoFill'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              const Text(
                "Enter OTP Code",
                style: TextStyle(fontSize: 20),
              ),
              const SizedBox(height: 20),
              OTPTextField(
                controller: otpbox,
                length: 6,
                width: double.infinity,
                fieldWidth: 50,
                style: const TextStyle(fontSize: 17),
                textFieldAlignment: MainAxisAlignment.spaceAround,
                fieldStyle: FieldStyle.box,
                onCompleted: (pin) {
                  print("Entered OTP Code: $pin");
                },
              ),
              const SizedBox(height: 30),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  MaterialButton(
                    color: Colors.red,
                    textColor: Colors.white,
                    child: Text(startListen ? 'Stop Listening' : 'Stopped'),
                    onPressed: () async {
                      smsConsentForOtpAutoFill.dispose();
                      setState(() {
                        startListen = false;
                      });
                      print("Stop Listening.........");
                    },
                  ),
                  const SizedBox(width: 20),
                  MaterialButton(
                    color: Colors.green,
                    textColor: Colors.white,
                    child: Text(!startListen ? 'Start Listening' : 'Started'),
                    onPressed: () async {
                      smsConsentForOtpAutoFill.requestSms();
                      setState(() {
                        startListen = true;
                      });
                      print("Start Listening.........");
                    },
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

以上代码展示了一个简单的界面，用户可以选择开始或停止监听短信，并在接收到OTP后自动填充到输入框中。