如何在 Flutter web 中使用 ReCaptcha [重复]
Posted
技术标签:
【中文标题】如何在 Flutter web 中使用 ReCaptcha [重复]【英文标题】：How to use ReCaptcha in Flutter web [duplicate] 【发布时间】：2021-05-31 15:41:26 【问题描述】：我需要为我的 Flutter web 应用程序设置验证码，但 Flutter 中当前存在的所有验证码包都不支持 web.xml 。为了解决这个问题，我首先尝试使用 IFrameElement 和 htmlElementView 在 dart 中渲染 ReCaptcha 框，但我遇到的问题是，当我将代码推送到我的域时，它说我为该站点提供了一个无效域键。
我不明白为什么站点密钥会无效，我已经检查并仔细检查了站点密钥以确保它与我在 ReCaptcha 控制台中输入的域匹配。 IFrame 是否可能不允许与 ReCaptcha API 通信？这是它的代码。
import 'package:flutter/material.dart';
import 'dart:ui' as ui;
import 'dart:html' as html;
import 'dart:js' as js;
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';
@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 style='background-color: aqua;'>
<div style='height: 60px;'></div>
<form action="?" method="POST">
<div class="g-recaptcha"
data-sitekey="mySitekey"
data-callback="captchaCallback"></div>
</form>
<script>
function captchaCallback(response)
//console.log(response);
alert(response);
if(typeof Captcha!=="undefined")
Captcha.postMessage(response);
</script>
</body>
</html>"""
..style.border = 'none');
super.initState();
@override
Widget build(BuildContext context)
return Container(
padding: EdgeInsets.symmetric(horizontal: 10),
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(color: Colors.grey[300], width: 1),
borderRadius: BorderRadius.all(Radius.circular(5))),
width: 200,
height: 200,
child: Directionality(
textDirection: TextDirection.ltr,
child: HtmlElementView(
viewType: createdViewId,
),
),
);
是否可以在不同的域上建立一个单独的 HTML 站点，并通过该站点让 Flutter Web 显示和界面来填写验证码？如果通过这样的界面，验证码还能工作吗？
提前感谢您的帮助。
【问题讨论】：
pub.dev/packages/flutter_recaptcha_v2检查这个包 你是在 localhost 上运行的吗？ 我在 localhost 和我的实际域上都试过了 这能回答你的问题吗？ flutter_web how to implement RECAPTCHA? 【参考方案1】：我为 reCaptcha v2 找到了这个解决方案：
在项目的根文件夹中创建一个名为 html 的文件夹，并在该文件夹中创建文件 recaptcha.html。
<html>
<head>
<title>reCAPTCHA</title>
<script src="https://www.google.com/recaptcha/api.js" async defer>
</script>
</head>
<body style='background-color: aqua;'>
<div style='height: 60px;'></div>
<form action="?" method="POST">
<div class="g-recaptcha"
data-sitekey="xxxxxxxxxxxxxxxxxxxxxxx"
data-callback="captchaCallback"></div>
</form>
<script>
function captchaCallback(response)
//console.log(response);
alert(response);
if(typeof Captcha!=="undefined")
Captcha.postMessage(response);
</script>
</body>
</html>
然后在你的 pubspec.yaml 文件的 assets 下添加新文件夹 html
assets:
- fonts/
- html/
最后，将 _TestPluginState 的 initState() 更改为：
ui.platformViewRegistry.registerViewFactory(
createdViewId,
(int viewId) => html.IFrameElement()
..style.height = '100%'
..style.width = '100%'
..src = '/assets/html/recaptcha.html'
..style.border = 'none',
);
重要提示：不要忘记将 ..srcdoc 更改为 ..src
【讨论】：
【参考方案2】：你可以试试g_recaptcha_v3包
注意：
仅支持 reCAPTCHA V3，不支持 V2 它仅适用于 Flutter Web【讨论】：
以上是关于如何在 Flutter web 中使用 ReCaptcha [重复]的主要内容，如果未能解决你的问题，请参考以下文章
Flutter Web： 如何在页面中使用web原生组件及交互
Flutter Web： 如何在页面中使用web原生组件及交互
如何在 Flutter Web 中使用谷歌地图库？ [关闭]
如何在 Flutter Web 中使用 Skia/CanvasKit？