Flutter中如何自动读取Firebase发送的短信OTP并完成自动校验

核心原理 #

Firebase Auth的verifyPhoneNumber方法自带系统级验证码识别能力，你当前代码中verificationCompleted回调为空，没有使用该能力，补全回调即可实现自动填充+校验功能。 #

代码修改步骤 #

1. 给验证码输入框添加控制器 #

首先声明输入框控制器，用于后续自动填充验证码内容：

class _OtpScreenState extends State<OtpScreen> {
  String phoneNo;
  String smsOTP;
  String verificationId;
  String errorMessage = '';
  final FirebaseAuth _auth = FirebaseAuth.instance;
  bool showLoading = false;
  // 新增：验证码输入框控制器，根据你使用的PinEntryTextField包可调整
  final TextEditingController pinController = TextEditingController();
  // 原有其他代码保持不变...
}

绑定控制器到输入组件，同时添加iOS自动填充适配配置：

PinEntryTextField(
  controller: pinController, // 绑定控制器
  fields: 6,
  keyboardType: TextInputType.number,
  textContentType: TextContentType.oneTimeCode, // iOS系统自动识别验证码适配
  onSubmit: (text) {
    smsOTP = text as String;
  },
),

2. 补全verificationCompleted回调逻辑 #

修改generateOtp方法中的空回调，收到系统识别到的验证码后自动填充并触发校验：

await _auth.verifyPhoneNumber(
  phoneNumber: contact,
  codeAutoRetrievalTimeout: (String verId) {
    verificationId = verId;
  },
  codeSent: smsOTPSent,
  timeout: const Duration(seconds: 60),
  // 修改这部分回调逻辑
  verificationCompleted: (AuthCredential credential) async {
    if (credential is PhoneAuthCredential && credential.smsCode != null) {
      // 自动填充验证码到输入框
      setState(() {
        smsOTP = credential.smsCode!;
        pinController.text = smsOTP;
      });
    }
    // 直接触发校验逻辑，无需用户手动点击按钮
    signInWithPhoneAuthCredential(credential as PhoneAuthCredential);
  },
  verificationFailed: (exception) {
    print(exception);
  }
);

平台配置要求 #

安卓端 #

• 确保Firebase控制台填写的应用签名SHA1、SHA256和实际打包签名一致
• 带有Google Play服务的设备可直接触发自动校验，无需申请短信读取权限
• 无Google Play服务的国内设备，可额外引入sms_otp_auto_verify等第三方包主动监听短信内容提取验证码

iOS端 #

• 在Xcode中开启项目Capability的Remote Notifications权限
• Info.plist中添加推送相关权限描述，即可触发系统级验证码识别

内容的提问来源于stack exchange，提问作者M Al