如何创建带验证码的Firebase动态链接实现Flutter应用内密码重置

你当前自定义随机验证码的方案属于过度设计，Firebase本身已经提供了安全的用户识别机制，无需额外自行生成校验码。Firebase在发送密码重置邮件时会自动生成和用户重置请求唯一绑定的oobCode（操作授权码），自带过期、防篡改校验逻辑，你只需要通过actionCodeSettings配置跳转逻辑即可，具体实现步骤如下：

1. 配置密码重置邮件的跳转参数 #

你确实需要使用actionCodeSettings参数，该参数用于告知Firebase生成可跳转回应用的动态链接，无需提前自行调用动态链接生成方法，Firebase会自动完成动态链接拼接和参数追加。
修改你的_handleLookupRequest方法如下：

void _handleLookupRequest() async {
  // 输入校验逻辑保持不变
  LoadingIndicatorDialog dialog = LoadingIndicatorDialog();
  dialog.setContext(context);
  dialog.show(context);

  // 新增跳转配置
  ActionCodeSettings actionCodeSettings = ActionCodeSettings(
    // 填写你动态链接对应的重置密码路径，Firebase会自动追加oobCode、邮箱等参数
    url: "https://myapp.page.link/reset-password",
    handleCodeInApp: true,
    // 安卓配置和你之前动态链接的参数保持一致
    androidPackageName: "com.myapp.client.my_app_frontend",
    androidMinimumVersion: "1",
    // 如果有iOS端，补充对应的iOS包配置即可
    // iOSBundleId: "com.myapp.client.myAppFrontend",
  );

  final FirebaseAuth auth = FirebaseAuth.instance;
  await auth.sendPasswordResetEmail(
      email: email,
      actionCodeSettings: actionCodeSettings
  ).then((user) {
    dialog.dismiss();
    Navigator.of(context).pop();
  }).catchError((error) {
    dialog.dismiss();
    String errorType = Errorparser().parseFirebaseAuthErrorType(error);
    NotificationDialog().show(
        context,
        errorType,
        Errorparser().parseFirebaseAuthErrorMessage(error)
    );
  });
}

2. 配置Firebase控制台授权域名 #

登录Firebase控制台，进入Authentication > 设置 > 授权域名，将你的动态链接域名myapp.page.link添加到授权列表中，否则Firebase会拒绝生成对应的重置链接。

3. 应用内监听动态链接跳转 #

在应用的入口页面（比如主页、登录页）添加动态链接监听逻辑，收到密码重置链接后跳转至你的自定义密码重置页面：

@override
void initState() {
  super.initState();
  // 监听应用在前台时的动态链接跳转
  FirebaseDynamicLinks.instance.onLink.listen((dynamicLinkData) {
    final Uri deepLink = dynamicLinkData.link;
    // 判断是否为密码重置链接
    if (deepLink.path == '/reset-password') {
      // 取出Firebase自动追加的授权码
      final String? oobCode = deepLink.queryParameters['oobCode'];
      if (oobCode != null) {
        // 跳转至自定义重置页面，将oobCode作为参数传递
        Navigator.push(context, MaterialPageRoute(
          builder: (context) => CustomResetPasswordPage(oobCode: oobCode)
        ));
      }
    }
  }).onError((error) {
    // 自定义动态链接解析错误处理逻辑
  });

  // 监听应用在后台时被动态链接唤起的场景
  FirebaseDynamicLinks.instance.getInitialLink().then((dynamicLinkData) {
    if (dynamicLinkData != null) {
      final Uri deepLink = dynamicLinkData.link;
      if (deepLink.path == '/reset-password') {
        final String? oobCode = deepLink.queryParameters['oobCode'];
        if (oobCode != null) {
          Navigator.push(context, MaterialPageRoute(
            builder: (context) => CustomResetPasswordPage(oobCode: oobCode)
          ));
        }
      }
    }
  });
}

4. 自定义重置页面实现密码更新 #

在你的自定义密码重置页面，用户输入新密码后调用Firebase的密码重置接口完成操作：

void _submitNewPassword(String oobCode, String newPassword) async {
  try {
    final auth = FirebaseAuth.instance;
    // 先校验oobCode是否合法、未过期
    await auth.verifyPasswordResetCode(oobCode);
    // 校验通过后提交新密码完成重置
    await auth.confirmPasswordReset(
      code: oobCode,
      newPassword: newPassword
    );
    // 重置成功后跳转至登录页即可
    Navigator.pushReplacementNamed(context, '/login');
  } catch (e) {
    // 处理错误，比如oobCode过期、无效，新密码不符合强度要求等
    String errorMsg = Errorparser().parseFirebaseAuthErrorMessage(e);
    NotificationDialog().show(context, '重置失败', errorMsg);
  }
}

补充说明 #

如果你需要自定义密码重置邮件的内容，可以在Firebase控制台Authentication > 模板中修改密码重置邮件的模板，支持使用系统占位符替换链接、用户名等信息。

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