使用FlutterLogin时如何通过自定义API实现OTP发送与校验

自定义OTP发送、校验流程实现 #

flutter_login 组件本身已经预留了OTP流程的回调钩子，不需要修改组件源码，按以下步骤对接自定义API即可：

• 回调规则说明：所有和认证相关的回调统一遵循：操作成功返回null，操作失败直接返回要展示给用户的错误提示字符串，组件会自动处理页面跳转、错误提示的展示。
• 第一步：对接OTP发送接口
  把OTP发送逻辑绑定到onSignup回调：用户填完所有注册信息点击提交时，先从表单参数里提取邮箱/手机号，调用自有后端的发送OTP接口。接口调用成功返回null，组件会自动跳转到验证码输入页；接口调用失败直接返回错误提示，组件会停留在注册页展示错误。
  参考实现：

  Future<String?> _handleSignup(SignupData data) async {
    final userEmail = data.additionalSignupData?['Email'];
    final userPhone = data.name;
    try {
      // 替换为你自有后端的发送OTP接口调用
      await ProfileManager().sendVerifyCode(
        target: userEmail, // 手机验证码就传userPhone
        bizType: 'register'
      );
      return null;
    } catch (_) {
      return '验证码发送失败，请检查网络后重试';
    }
  }
  

• 第二步：对接OTP校验+正式注册接口
  把OTP校验逻辑绑定到onConfirmSignup回调：用户输入验证码点击提交时，回调参数会携带用户输入的验证码，先调用自有后端的OTP校验接口，校验通过后再提交用户注册信息，完成整个注册流程。
  参考实现：

  Future<String?> _handleConfirmSignup(String inputCode, LoginData baseData) async {
    try {
      // 先校验验证码
      final codeValid = await ProfileManager().checkVerifyCode(
        target: baseData.name,
        code: inputCode
      );
      if (!codeValid) {
        return '验证码错误，请重新输入';
      }
      // 验证码校验通过后，再提交注册信息
      // 这里放你之前组装userData、调用registerUser接口的逻辑
      await ProfileManager().registerUser(/* 你的注册参数 */);
      return null;
    } catch (_) {
      return '注册失败，请稍后重试';
    }
  }
  

• 第三步：调整组件配置
  将FlutterLogin组件的onSignup、onConfirmSignup分别绑定上面两个处理方法，同时修改messages里的confirmationCodeHint文案，和你发送验证码的渠道（邮箱/手机）匹配即可。你当前配置的userType: LoginUserType.phone默认主输入框是手机号，如果要以邮箱作为主账号，可以把userType改成LoginUserType.email。

不依赖Firebase的Google登录实现 #

你当前的Google登录逻辑只完成了客户端授权，没有做服务端校验，存在安全风险，不需要接入Firebase，按以下流程实现即可：

• 1. 集成官方google_sign_in插件，完成安卓、iOS平台的OAuth配置（安卓配置Web端Client ID，iOS配置对应URL Scheme）
• 2. 用户点击Google登录按钮后，客户端拉起Google授权页，授权成功后从返回的账号信息中获取idToken
• 3. 将idToken传给自有后端，后端拉取Google公钥校验token合法性，解析出用户的唯一ID、邮箱、头像等信息
• 4. 后端自动完成账号注册/登录逻辑，返回自有业务体系的登录态给客户端
• 5. 客户端拿到自有登录态后，更新本地存储和全局登录状态即可
     修正后的登录回调参考：

  LoginProvider(
    icon: FontAwesomeIcons.google,
    label: 'Google登录',
    callback: () async {
      try {
        final googleSignIn = GoogleSignIn(scopes: ['email', 'profile']);
        final googleAccount = await googleSignIn.signIn();
        if (googleAccount == null) {
          return '已取消登录';
        }
        final authData = await googleAccount.authentication;
        // 传idToken给自有后端换登录态
        final loginRes = await ProfileManager().loginByGoogle(
          idToken: authData.idToken ?? ''
        );
        if (loginRes) {
          if (!context.mounted) return null;
          Provider.of<AppStateManager>(context, listen: false).login();
          Provider.of<ProfileManager>(context, listen: false)
              .loadUserProfile(googleAccount);
          return null;
        }
        return '登录失败，请稍后重试';
      } catch (_) {
        return 'Google登录异常，请检查网络';
      }
    },
  )
  

现有代码问题修正 #

• 你当前在onSignup回调里直接调用了registerUser注册接口，会导致用户还没输入验证码就提交注册，需要把这段逻辑移到OTP校验通过后再执行
• _recoverPassword方法当前没有匹配Future<String?>的返回类型，会导致密码找回功能报错，找回密码的验证码流程和注册OTP流程一致，按相同逻辑对接即可
• 出生日期字段的fieldValidator目前是空实现，需要补上日期格式校验，避免非法内容提交

内容的提问来源于stack exchange，提问作者Daniel Maina