如何在 Flutter web 中使用 ReCaptcha [重复]答案

【问题标题】：How to use ReCaptcha in Flutter web [duplicate]如何在 Flutter web 中使用 ReCaptcha [重复]
【发布时间】：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?

标签： flutter recaptcha flutter-dependencies flutter-web flutter-packages

【解决方案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

【讨论】：