我如何使用 localhost 作为我的域进行 recaptcha答案

【问题标题】：How do i use localhost as my domain for recaptcha我如何使用 localhost 作为我的域进行 recaptcha
【发布时间】：2025-12-02 00:40:01
【问题描述】：

我正在研究flutter web，我想为我的基本表单集成recaptcha。我已经在谷歌控制台上配置了 recaptcha。但是，出于我的开发目的，当我将它与 localhost 域一起使用时，我总是会收到此错误

import 'package:flutter/material.dart';
import 'dart:ui' as ui;
import 'dart:html' as html;


class platformViewRegistry {
static registerViewFactory(String viewId, dynamic cb) {
// ignore:undefined_prefixed_name
ui.platformViewRegistry.registerViewFactory(viewId, cb);
}
}

class TestPlugin extends StatefulWidget {
TestPlugin();

_TestPluginState createState() => _TestPluginState();
}

class _TestPluginState extends State<TestPlugin> {
String createdViewId = 'map_element';
final _formKey = GlobalKey<FormState>();
@override
void initState() {
// ignore: undefined_prefixed_name
ui.platformViewRegistry.registerViewFactory(
    createdViewId,
    (int viewId) => html.IFrameElement()
      ..width = MediaQuery.of(context).size.width.toString()
      ..height = MediaQuery.of(context).size.height.toString()
      ..srcdoc = """<!DOCTYPE html><html>
<head>
<title>reCAPTCHA</title>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
<div style='height: 50px;width: 100px;'></div>
<form action="?" method="POST">
  <div class="g-recaptcha" 
    data-sitekey="my_key"
    data-callback="captchaCallback"></div>

</form>
<script>
  function captchaCallback(response){
    //console.log('the response is: '+response);
    alert(response);
    if(typeof Captcha!=="undefined"){
      Captcha.postMessage(response);
    }
  }
</script>
</body>
</html>"""
      ..style.border = 'none');

super.initState();
}

@override
Widget build(BuildContext context) {
return Padding(
  padding: const EdgeInsets.all(20.0),
  child: Form(
    key: _formKey,
    child: Column(children: [
      TextFormField(),
      SizedBox(height: 10),
      Container(
        height: 140,
        width: double.infinity,
        child: HtmlElementView(
          viewType: createdViewId,
        ),
      ),
      ElevatedButton(onPressed: () {}, child: Text('Submit'))
    ]),
  ),
);
}
}

我输入了正确的数据站点密钥，我在上面的代码中没有提到。我还在控制台上禁用了验证 reCaptcha 解决方案的来源。我还将 localhost 添加到我的域列表中。任何帮助将不胜感激。

编辑：这可能对站点和密钥没有任何问题，因为我能够使用具有相同密钥集的 NodeJS 来实现这一点。我想这与颤振和 v2 reCaptcha 有关。

【问题讨论】：

标签： flutter recaptcha flutter-web

【解决方案1】：

Google 曾经拥有用于测试 localhost 的密钥，但现在看来您只需将 localhost 添加为域即可。

查看谷歌文档： https://developers.google.com/recaptcha/docs/faq#localhost_support

【讨论】：

我刚刚编辑了我的问题。我已经将 localhost 添加到我的域列表中，仍然没有运气！
只是想知道控制台日志中是否有任何错误？问题很可能与 google recapcha 无关。
我的浏览器控制台和 vscode 调试控制台都没有错误。
我想知道颤振是否会导致问题迫使它使用 v2 而不是 v3。试试这里的 v2 测试密钥：developers.google.com/recaptcha/docs/faq
尝试了一切，但没有任何效果不知道为什么..尝试使用测试密钥，尝试使用 127.0.0.1 而不是 localhost，我实际上想使用 reCAPTCHA 复选框，它是 v2。没有找到任何支持网络平台的插件。