flutter - 我如何使用 localhost 作为我的域进行 recaptcha

问题描述

我正在研究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有关。

标签： flutterrecaptchaflutter-web

flutter - 我如何使用 localhost 作为我的域进行 recaptcha

问题描述

解决方案

推荐阅读