reCAPTCHA Google en aplicación Flutter

¿Estas buscando una forma de añadir la verificación de reCaptcha de Google en un formulario en una aplicación/web hecha con flutter? Aunque puede ser poco común este requerimiento, te explico brevemente como hacerlo (Puedes ver un proyecto de ejemplo, link al final).

1. Usar la dependencia webview_flutter_plus,

Ir al archivo pubspec.yaml, y establecer la dependencia en la sección correspondiente.

webview_flutter_plus: 0.3.0+2

2. Crear una entrada en la seccion flutter/assets > assets/webpages/

3. Ahora creamos ese directorio assets/webpages/, dentro creamos un archivo index.html, escribimos el código de nuestro recaptcha de Google:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>reCAPTCHA</title>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
    <div id="recaptcha" class="g-recaptcha" data-sitekey="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"></div>
</body>
</html>

4. En nuestro pagina/widget, importar dependencia:

import ‘package:webview_flutter_plus/webview_flutter_plus.dart’;

5. Luego usar WebViewPlus dentro del build:

Container(
  height: 100.0,
  child: WebViewPlus(
    javascriptMode: JavascriptMode.unrestricted,
    onWebViewCreated: (controller) {
      controller
          .loadUrl("assets/webpages/index.html");
    },
  ),
),

6. Ahora unos permisos que debemos habilitar en el archivo AndroidManifest.xml (android/app/src/main/)

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.WAKE_LOCK" />

<application android:usesCleartextTraffic="true">...</aplication>

7. Corre la aplicación flutter run, y podemos ver lo siguiente:

Obviamente tendras que dar permisos al reCAPTCHA para pruebas en localhost.

Para obtener información del estado del captcha te dejo este video.

Puedes descargar este ejemplo de nuestro repositorio.

0 thoughts on “reCAPTCHA Google en aplicación Flutter

  1. ¡Hola! Si estás buscando agregar la verificación de reCaptcha de Google en un formulario Flutter, aquí tienes una breve guía:

    Utiliza la dependencia webview_flutter_plus. Asegúrate de agregarla en el archivo pubspec.yaml:
    yaml
    Copy code
    dependencies:
    webview_flutter_plus: 0.3.0+2
    Crea una entrada en la sección flutter/assets > assets/webpages/.

    Ahora, crea el directorio assets/webpages/ y dentro de él, crea un archivo index.html. Aquí es donde colocarás el código para tu reCaptcha de Google.

    Para un ejemplo práctico, puedes consultar el proyecto de muestra aquí.

Leave a Reply

Your email address will not be published. Required fields are marked *