个人中心
gpt4 book ai didi

flutter - 如何在 Flutter web 中使用 ReCaptcha

转载 作者：行者123 更新时间：2023-12-04 17:20:35 24 4
gpt4 key购买 nike

<分区>

我需要为我的 Flutter Web 应用程序设置验证码，但 Flutter 中目前存在的所有验证码包都不支持 Web。为了解决这个问题，我首先尝试使用 IFrameElement 和 HTMLElementView 在 dart 中呈现 ReCaptcha 框，但我遇到的问题是，当我将代码推送到我的域时，它说我为该站点提供了一个无效域键。

enter image description here

我不明白为什么站点 key 无效，我检查并仔细检查了站点 key 以确保它与我在 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 网页显示和界面填写验证码？如果通过这样的界面验证码还能工作吗？

预先感谢您的帮助。

24 4 0
文章推荐： Truffle 部署的资金不足(尽管使用了 Truffle 的总价格估算)
文章推荐： python - CRS 错误 : Invalid projection: epsg:4326: for geopandas
文章推荐： 指定夏令时的 REST API 标准/最佳实践
文章推荐： node.js - 解压大小如何影响 npm 包的最小大小？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com