You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

Flutter中Firebase邮箱密码注册+手机验证码验证功能故障排查

修复Flutter邮箱注册+手机号验证码验证流程问题

我看了你的代码,现在的问题核心是注册成功后没完成手机号验证就直接允许进入首页,还有几处代码逻辑错误导致流程不符合预期。下面一步步帮你修正:

先梳理核心问题点

  • setState的回调不能是异步函数,你写的setState(() async { ... })是错误写法
  • 验证码按钮逻辑错误:直接判断currentUser不为空就跳首页,跳过了手机号关联验证的核心步骤
  • _testSignlink里的user变量未初始化,直接调用linkWithCredential会触发空指针异常
  • 手机号是硬编码的,没有让用户输入实际的手机号
  • 缺少验证码输入的合法性校验
  • 注册成功后用户已创建,但未验证手机号的情况下没有限制访问首页

修复后的完整代码方案

1. 修正注册按钮的点击逻辑

首先去掉setState里的async,因为setState的回调不支持异步,直接在注册成功后调用验证码流程:

// 注册按钮的点击事件处理
onPressed: () async {
  setState(() {
    loading = true;
  });
  dynamic ruselt = await _auth.regsiterwithemail(_emailcontroller.text, _passwordcontroller.text);
  
  if (ruselt != null) {
    setState(() {
      loading = false;
    });
    // 启动手机号验证流程
    await VerfityCode().verifyPhone(context);
  } else {
    setState(() {
      loading = false;
    });
    SweetAlert.show(
      context, 
      title: "注册失败", 
      style: SweetAlertStyle.error, 
      subtitle: "请检查邮箱格式或密码强度"
    );
  }
},

2. 优化基础注册函数(可选添加邮箱验证)

这个函数本身逻辑没问题,可额外添加发送邮箱验证邮件的逻辑(提升账号安全性):

Future<FirebaseUser?> regsiterwithemail(String email, String password) async {
  try {
    AuthResult result = await _auth.createUserWithEmailAndPassword(
      email: email, 
      password: password
    );
    FirebaseUser user = result.user;
    // 可选:发送邮箱验证邮件
    await user.sendEmailVerification();
    print('用户邮箱注册成功');
    return user;
  } catch (e) {
    print('注册失败:${e.toString()}');
    return null;
  }
}

3. 重写验证码验证类,修复核心逻辑

主要修改点:支持用户输入手机号、修复空指针问题、只有验证成功才跳首页、添加输入校验、完善错误提示:

// 类名首字母大写,符合Dart规范
class VerfityCode {
  String? phoneNumber; // 适配Dart空安全的可空类型
  String? smsCode;
  String? verificationId;
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>(); // 初始化表单key

  Future<void> verifyPhone(BuildContext context) async {
    // 先弹出手机号输入对话框,替换硬编码的手机号
    await showDialog(
      context: context,
      builder: (ctx) => AlertDialog(
        title: const Text("输入手机号"),
        content: TextField(
          keyboardType: TextInputType.phone,
          onChanged: (val) {
            phoneNumber = val;
          },
          decoration: const InputDecoration(
            labelText: "请输入带区号的手机号(如+967xxxxxx)",
          ),
        ),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(ctx),
            child: const Text("取消"),
          ),
          TextButton(
            onPressed: () {
              if (phoneNumber?.trim().isNotEmpty == true) {
                Navigator.pop(ctx);
                _startPhoneVerification(context);
              } else {
                ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(content: Text("请输入有效的手机号")),
                );
              }
            },
            child: const Text("确认"),
          ),
        ],
      ),
    );
  }

  // 启动手机号验证码发送流程
  void _startPhoneVerification(BuildContext context) {
    final PhoneCodeAutoRetrievalTimeout autoRetrieve = (String verId) {
      verificationId = verId;
    };

    final PhoneCodeSent smsCodeSent = (String verId, [int? forceResendingToken]) {
      verificationId = verId;
      _showSmsCodeDialog(context);
    };

    final PhoneVerificationCompleted verifiedCompleted = (AuthCredential credential) async {
      // 自动验证成功,直接关联手机号
      await _linkPhoneCredential(context, credential);
    };

    final PhoneVerificationFailed verifyError = (AuthException exception) {
      print('手机号验证失败:${exception.message}');
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text("验证失败:${exception.message}")),
      );
    };

    FirebaseAuth.instance.verifyPhoneNumber(
      phoneNumber: phoneNumber!,
      timeout: const Duration(seconds: 60),
      verificationCompleted: verifiedCompleted,
      verificationFailed: verifyError,
      codeSent: smsCodeSent,
      codeAutoRetrievalTimeout: autoRetrieve,
    );
  }

  // 显示验证码输入对话框
  void _showSmsCodeDialog(BuildContext context) {
    Alert(
      context: context,
      title: "رمز التحقق",
      content: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Form(
            key: _formKey,
            child: Directionality(
              textDirection: TextDirection.rtl,
              child: TextFormField(
                keyboardType: TextInputType.number,
                onChanged: (val) {
                  smsCode = val;
                },
                // 添加验证码输入校验
                validator: (val) {
                  if (val?.trim().isEmpty == true) {
                    return "请输入验证码";
                  }
                  return null;
                },
                decoration: const InputDecoration(
                  icon: Icon(Icons.supervisor_account),
                  labelText: 'ادخل رمز التحقق',
                ),
              ),
            ),
          )
        ],
      ),
      buttons: [
        DialogButton(
          child: const Text('خروج', style: TextStyle(color: Colors.white, fontSize: 18)),
          onPressed: () => Navigator.pop(context),
        ),
        DialogButton(
          onPressed: () async {
            // 先校验验证码输入是否合法
            if (_formKey.currentState?.validate() == true) {
              final AuthCredential credential = PhoneAuthProvider.getCredential(
                verificationId: verificationId!,
                smsCode: smsCode!,
              );
              await _linkPhoneCredential(context, credential);
            }
          },
          child: const Text(
            "ادخل الرمز",
            style: TextStyle(color: Colors.white, fontSize: 18),
          ),
        ),
      ],
    ).show();
  }

  // 核心:将手机号凭证关联到当前用户,验证成功才跳首页
  Future<void> _linkPhoneCredential(BuildContext context, AuthCredential credential) async {
    try {
      FirebaseUser? user = await FirebaseAuth.instance.currentUser();
      if (user != null) {
        AuthResult result = await user.linkWithCredential(credential);
        // 关联成功,跳转到首页并移除之前的注册页面
        Navigator.pushAndRemoveUntil(
          context,
          MaterialPageRoute(builder: (context) => const Home()),
          (route) => false,
        );
        ScaffoldMessenger.of(context).showSnackBar(
          const SnackBar(content: Text("注册验证成功!")),
        );
      } else {
        ScaffoldMessenger.of(context).showSnackBar(
          const SnackBar(content: Text("用户不存在,请重新注册")),
        );
        Navigator.pushReplacement(context, MaterialPageRoute(builder: (context) => const RegisterPage()));
      }
    } catch (e) {
      print('验证码关联失败:${e.toString()}');
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text("验证码错误或验证超时:${e.toString()}")),
      );
    }
  }
}

关键逻辑说明

  1. 完整流程:邮箱密码注册→输入手机号→发送验证码→验证验证码→关联手机号→跳转到首页
  2. 权限控制:未完成手机号验证的用户,即使邮箱注册成功,也无法进入首页
  3. 错误处理:添加了手机号、验证码的输入校验,以及各种场景下的错误提示
  4. 体验优化:自动验证成功时直接完成关联,无需手动输入验证码;跳转首页时移除历史页面,避免用户返回注册页

内容的提问来源于stack exchange,提问作者Alipop

火山引擎 最新活动