Flutter Web端Facebook登录报错：FB.login() called before FB.init()

问题场景 #

尝试在Web端通过Facebook完成登录授权时，触发错误：FB.login() called before FB.init()

• 使用依赖包：flutter_facebook_auth: ^5.0.6
• Android、iOS端登录功能正常，仅Web端出现该报错
• 已在main.dart中提前做了初始化处理，代码如下：

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  if(kIsWeb){
    await FacebookAuth.i.webAndDesktopInitialize(
        appId: "provided in the real code",
        cookie: true,
        xfbml: true,
        version: "v14.0"
    );
  }
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(const ProviderScope(child: App()));
}

排查与解决方法 #

1. 确认Web端SDK脚本加载顺序 #

Web端需保证Facebook SDK脚本完全加载后，再执行Flutter的初始化逻辑。可以在项目的index.html中手动添加SDK脚本，放置在body标签底部：

<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>

注意：不要在index.html中自行调用FB.init，交由flutter_facebook_auth包处理即可。

2. 确保初始化完成后再触发登录 #

异步初始化可能存在延迟，导致登录操作先于初始化完成。可以在登录方法中添加延迟或状态检查：

Future<void> facebookLogin() async {
  if (kIsWeb) {
    // 短暂延迟确保初始化完成，可根据实际情况调整时长
    await Future.delayed(const Duration(milliseconds: 500));
  }
  final LoginResult result = await FacebookAuth.i.login();
  // 后续登录成功后的处理逻辑
}

3. 检查版本兼容性 #

flutter_facebook_auth: ^5.0.6对应Facebook SDK v14.0，版本过旧可能存在兼容性问题。建议升级包到最新稳定版，并同步更新初始化时的SDK版本号（例如改为v18.0）。

4. 验证Web端平台配置 #

• 登录Facebook开发者后台，确认Web应用的App ID与代码中一致，且已将当前网站域名添加到Valid OAuth Redirect URIs列表中
• 检查index.html中是否正确配置了og:app_id元标签：

<meta property="fb:app_id" content="你的App ID">

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