Implementar Google reCAPTCHA v3 en Flutter para móvil puede parecer complicado pero en realidad la solución es sencilla si se siguen unos pasos claros. Aquí tienes una guía práctica traducida y adaptada para integrar reCAPTCHA v3 en una app Flutter.
Prerequisitos: disponer de una site key proporcionada por tu backend o generada en la consola de reCAPTCHA. Confirma con el equipo backend si estáis usando Enterprise o Standard v2/v3, ya que el paquete a usar depende de ello.
Elección del paquete: si usas Enterprise emplea recaptcha_enterprise_flutter. Para reCAPTCHA Standard v2 o v3 utiliza flutter_gcaptcha_v3. Este artículo se centra en Standard v3.
Por qué necesitas un HTML alojado: a diferencia de un navegador web tradicional, una app Flutter no tiene un dominio propio. Si intentas ejecutar reCAPTCHA directamente dentro de un WebView el dominio se convierte en about:blank y Google no lo acepta. La solución es alojar un HTML simple que cargue reCAPTCHA, genere el token y lo devuelva a la app cuando sea solicitado.
Recomendaciones sobre el HTML alojado: puedes autoalojarlo en tu dominio o usar demos temporales, pero lo más fiable es autoalojar para no depender de terceros. No olvides añadir tu dominio alojado en la lista blanca de la consola de reCAPTCHA para que los tokens sean válidos.
Paso 1 Inicializar la site key: coloca esto en la inicialización de la app por ejemplo en main.dart para que el handler conozca la clave site
RecaptchaHandler.instance.setupSiteKey(dataSiteKey: AppConstants.dataSiteKey);
Paso 2 Añadir el WebView oculto: en el árbol de widgets incluye un ReCaptchaWebView pequeño y prácticamente invisible que cargue tu HTML alojado. Ejemplo de widget compacto
SizedBox(width: 1, height: 1, child: Opacity(opacity: 0.01, child: IgnorePointer(ignoring: true, child: ReCaptchaWebView(width: 1, height: 1, url: https://tu-dominio.com/recaptcha.html, onTokenReceived: _onTokenReceived))))
Ejemplo de handler para el token
void _onTokenReceived(String token) { // enviar token al backend o usar según necesidad print(Got reCAPTCHA token: token); }
Paso 3 Ejecutar reCAPTCHA cuando necesites un token fresco: por ejemplo al registrar un usuario o validar un OTP llama
RecaptchaHandler.executeV3(action: register);
Esto desencadena grecaptcha.execute en tu HTML alojado y el token vuelve a Flutter mediante el WebView y el callback onTokenReceived.
Puntos clave y buenas prácticas: asegurarse de si se usa Enterprise o Standard, añadir la URL del HTML alojado en la consola de Google reCAPTCHA, preferir el autoalojamiento por fiabilidad y mandar siempre el token al backend para su verificación server side.
En Q2BSTUDIO como empresa especializada en desarrollo de software a medida y aplicaciones móviles ofrecemos soporte completo para integrar soluciones de seguridad como reCAPTCHA v3 dentro de proyectos personalizados. Si necesitas una solución a medida para tu producto podemos ayudarte con la arquitectura, la integración y la verificación server side en entornos cloud como AWS y Azure. Consulta nuestros servicios de desarrollo de aplicaciones a medida y también nuestras opciones en servicios de ciberseguridad para asegurar tus integraciones.
Nuestros servicios incluyen además inteligencia artificial aplicada para empresas, agentes IA, soluciones de inteligencia de negocio y Power BI, automatización de procesos y despliegues en servicios cloud AWS y Azure. Palabras clave importantes que trabajamos habitualmente: aplicaciones a medida, software a medida, inteligencia artificial, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio, ia para empresas, agentes IA y power bi.
Si prefieres que nos encarguemos de la integración completa de reCAPTCHA v3 en tu app Flutter y de la validación segura en backend, contacta con Q2BSTUDIO para una propuesta personalizada y escalable.
