Flutter应用集成Azure AD B2C手机号认证遇问题求助

核心问题排查与修复 #

1. URI格式错误导致的认证失败 #

你遇到的Invalid argument(s): No host specified in URI错误，完全是因为构造的认证URI存在格式问题：

• 缺少协议头https://，URI必须以http/https开头才能被正常解析
• 路径中重复出现了<tenant_name>，正确的Azure AD B2C授权端点格式应为：

  https://<tenant-name>.onmicrosoft.com/B2C_1_signupandsignin/oauth2/v2.0/authorize
  

• 原URI中存在不必要的空格（B2C_1 signupandsignin里的空格），正确的用户流名称是B2C_1_signupandsignin（下划线代替空格）

2. Azure AD B2C相关包构建异常 #

这类问题大多源于依赖版本不兼容或平台配置缺失：

• 检查pubspec.yaml中依赖包版本与当前Flutter SDK版本是否匹配，优先使用各包的最新稳定版
• Android端：确保AndroidManifest.xml中添加了网络权限，以及Azure AD B2C所需的重定向Activity配置
• iOS端：在Info.plist中配置LSApplicationQueriesSchemes、重定向URL的白名单，根据需求开启ATS

自定义UI适配方案（规避WebView） #

既然你已经有自定义的login_screen.dart和otp_screen.dart，并且搭建了Node.js+Express认证API，完全不需要依赖那些自带WebView的Flutter B2C包，推荐以下对接流程：

1. 登录流程对接

   • 在自定义手机号登录页，用户输入手机号后，调用你的Node.js API，由后端发起Azure AD B2C的手机号OTP发送请求
   • 用Flutter的http/dio库发送请求，示例代码：

     final response = await http.post(
       Uri.parse('https://your-node-api-domain.com/send-otp'),
       body: {'phoneNumber': userInputPhone},
     );
     if (response.statusCode == 200) {
       // 跳转到OTP验证页
       Navigator.push(context, MaterialPageRoute(builder: (_) => OtpScreen()));
     }
     

2. OTP验证流程对接

   • 在OTP页，用户输入验证码后，调用你的Node.js API，后端携带OTP和手机号调用Azure AD B2C的验证接口，获取ID Token/Access Token
   • 验证通过后，将Token存储到Flutter本地（比如shared_preferences），用于后续接口鉴权：

     final response = await http.post(
       Uri.parse('https://your-node-api-domain.com/verify-otp'),
       body: {
         'phoneNumber': userPhone,
         'otpCode': userInputOtp,
       },
     );
     if (response.statusCode == 200) {
       final tokenData = jsonDecode(response.body);
       // 存储Token
       await SharedPreferences.getInstance().then((prefs) {
         prefs.setString('id_token', tokenData['id_token']);
       });
       // 跳转到主页
       Navigator.pushReplacement(context, MaterialPageRoute(builder: (_) => HomeScreen()));
     }
     

3. 后端API注意事项

   • 确保Node.js API正确对接Azure AD B2C的用户流，使用Azure AD B2C的管理API或授权端点处理手机号验证和Token发放
   • 后端需妥善处理Azure AD B2C的响应错误，将友好的错误信息返回给Flutter端

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