flutter_web 如何实现 RECAPTCHA？答案

【问题标题】：flutter_web how to implement RECAPTCHA?flutter_web 如何实现 RECAPTCHA？
【发布时间】：2020-10-24 00:31:14
【问题描述】：

我完全不知道如何使用 flutter_web 实现 RECAPTCHA。

当前可用的插件（https://pub.dev/packages/recaptchav2_plugin 和 https://pub.dev/packages/flutter_recaptcha_v2）不支持 web。

【问题讨论】：

我希望这个链接会有所帮助：LINK
谢谢@hisam。因此，通过应用程序中的 Web 视图指向我们自己的域上托管的 RECAPTCHA。想知道是否有其他方法可以做到这一点。

标签： flutter recaptcha flutter-web

【解决方案1】：

下面是测试g_recaptcha_v3包的主要步骤，摘自文章implementation of Google reCAPTCHA v3 in Flutter Web。

通过Google reCAPTCHA Admin Console注册您的网站。

添加所需的pubspec 包。

  # A composable, Future-based library for making HTTP requests.
  http: ^0.13.4

  # A Google reCAPTCHA is a free service that protects your website from spam and abuse.
  g_recaptcha_v3: ^0.0.4

导航到web文件夹，打开index.html文件并将以下脚本粘贴到<body>标签内。

<script src="https://www.google.com/recaptcha/api.js?render=recaptcha-site-key"></script>

在main方法中添加GRecaptchaV3.ready并运行应用程序。

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await GRecaptchaV3.ready('recaptcha-site-key');
  runApp(const MyApp());
}

【讨论】：