設置 App Check 時出現白屏 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 應用程序時，我的屏幕完全是白色的，我的應用程序沒有加載。

在 web 模擬器上，一切正常，我的應用程序正在正確加載。

難道我做錯了什么？

謝謝您的幫助

Answer 1

1. 你應該有一個 firebase_core 插件
2. 復制在firebase/project overview/project settings中找到的配置（CDN），然后將其作為腳本粘貼到yourproject/web/index.html中的 index.html 中

最后在 firebase init hosting 確保你把 build/web 作為你的文件不公開。