为 Flutter Web 设置应用程序检查时出现白屏

Question

为了保护我的网站，我尝试将我的 Web Flutter 应用程序和 Firebase 后端链接到 App Check。

我创建了一个 reCAPTCHA v3，它为我提供了两个密钥：

• 网站密钥（公开）
• 秘钥

为了将其链接到我的项目，我使用以下代码：

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.web,
  );
  await FirebaseAppCheck.instance.activate(
    webRecaptchaSiteKey: 'website key (public)',  
  );

  runApp(MultiProvider(
    providers: [
      ChangeNotifierProvider(create: (context) => ContentView()),
      ChangeNotifierProvider(create: (context) => AuthBase()),
      ChangeNotifierProvider(create: (context) => TopCollaboratorsProvider()),
    ],
        child: const MyApp(),
      ));
    }

然后在 Firebase 控制台上，我输入了密钥。

但是，当我尝试在 Firebase 托管或其他托管解决方案上在线构建我的 Web 应用程序时，我的屏幕完全是白色的，并且我的应用程序未加载。

在网络模拟器上，一切正常，我的应用程序加载正确。

我做错了什么吗？

谢谢您的帮助

Answer 1

1. 你应该有一个 firebase_core 插件
2. 复制在firebase/项目概述/项目设置中找到的配置（CDN） 然后将其作为脚本粘贴到 yourproject/web/index.html
中的 index.html 中

最后在 firebase init 托管中，确保将 build/web 作为文件不公开。

Answer 2

我也面临着同样的问题，

1. 在此处注册以获取站点和密钥https://www.google.com/recaptcha/admin/create

2. 在firebase中，转到应用程序检查，点击注册，在此处输入密钥

3. 在您的项目中添加此包 - firebase_app_check

4. 在 firebase 选项下方和运行应用程序之前将其添加到主函数中

   等待 FirebaseAppCheck.instance.activate( webRecaptchaSiteKey: '// 这里是您的 reCAPTCHA 站点密钥');

然后构建并部署，如果您看到白色的空白屏幕，那么只需 flutter clean，然后重建您的项目