我如何使用 localhost 作为我的 recaptcha 域

Question

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

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 来实现此目的。我想这与 flutter 和 v2 reCaptcha 有关。

Answer 1

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

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

Answer 2

这是一个迟到的答案，但似乎与

localhost

不起作用。但是，如果您添加

127.0.0.1

，如果您更改此 IP 地址的 url 而不是“localhost”，它将起作用。

Answer 3

就我而言，将 html 代码放入文件后即可工作。然后更新

IFrameElement's src

。

iframeElement.src = '/assets/test_captcha.html';

我如何使用 localhost 作为我的 recaptcha 域

问题描述投票：0回答：3

3个回答

最新问题

我如何使用 localhost 作为我的 recaptcha 域

问题描述 投票：0回答：3

3个回答

最新问题

问题描述投票：0回答：3