recaptcha v2 for flutter web - 成功后导航到其他屏幕答案

【问题标题】：recaptcha v2 for flutter web - navigate to other screen after successrecaptcha v2 for flutter web - 成功后导航到其他屏幕
【发布时间】：2022-12-30 20:46:23
【问题描述】：

我目前想在我的 flutter web 项目中实现 recaptcha v2，这就是我的进度

recaptcha.html

<html>
 <head>
  <title>reCAPTCHA</title>
  <script src="https://www.google.com/recaptcha/api.js" async defer> 
  </script>
</head>
<body style='background-color: rgb(255, 191, 0);'>
  <div style='height: 30px;'></div>
  <form action="?" method="POST">
    <div class="g-recaptcha" 
      data-sitekey="MY_SITEKEY"
      data-callback="captchaCallback"></div>
  </form>
  <script>
    function captchaCallback(response){
      //console.log(response);
      alert(response);
      if(typeof Captcha!=="undefined"){
        Captcha.postMessage(response);
      }
    }
  </script>
</body>

在我的飞镖代码中

@override
void initState() {
  PlatformViewRegistry.registerViewFactory(
  createdViewId,
  (int viewId) => html.IFrameElement()
    ..style.height = '100%'
    ..style.width = '100%'
    ..src = 'assets/html/recaptcha.html'
    ..style.border = 'none',
);}

然后我调用验证码本身

Container(
        decoration: BoxDecoration(
            color: Colors.white,
            border: Border.all(color: Colors.black, width: 1),
            borderRadius: BorderRadius.all(Radius.circular(5))),
        width: 200,
        height: 150,
        child: Directionality(
          textDirection: TextDirection.ltr,
          child: HtmlElementView(
            viewType: createdViewId,
          ),
        ),
      ),

一切看起来都很好，但我的问题是回调在 recaptcha.html 中，所以我如何才能做到一旦验证成功，我的系统将导航到下一页？

Ps - 不要对使用https://pub.dev/packages/g_recaptcha_v3 或任何其他 recaptcha 版本提出任何建议，因为我的计划是仅使用 V2 和 Flutter Web

【问题讨论】：

标签： html flutter dart recaptcha flutter-web

【解决方案1】：

您可以在initState 上的registerViewFactory 之后添加此行：

html.window.onMessage.listen((msg) {
  print(msg.data);
});

msg.data 是您的验证码标记。你可以在这个监听器中做任何你想做的事情，比如导航到下一页或启用提交表单按钮。

【讨论】：