Hello guys, I want to ask you if there's any solution to use reCAPTCHA on Android and IOS

simplenotezy commented 1 year ago

@hermach did you figure out anything?

hermach commented 1 year ago

@simplenotezy i didn't find any direct solution, for me, i create an api to do reCAPTCHA on backend to return to me the token

bharathraj-e commented 1 year ago

We can use a WebView to implement reCAPTCHA in your Flutter application for both Android and iOS platforms. Essentially, what we would do is create a static HTML file that includes the necessary reCAPTCHA script. Once the user completes the reCAPTCHA challenge in the WebView, we can obtain the token through JavaScript channels and then use it in our application as needed.

Here is a basic outline of how you can approach this:

Create a static HTML file with the reCAPTCHA site key integrated. The HTML file should contain the necessary scripts to load and execute reCAPTCHA. (try to host it on a free hosting like firebase,etc..)
Load this static url in a WebView in your Flutter application.
Set up a JavaScript channel to facilitate communication between our Flutter application and the WebView.
Once the user completes the reCAPTCHA challenge in the WebView, we'll receive a token that we can send from the WebView to our Flutter application through the established JavaScript channel.
Use this token in your Flutter application to verify the reCAPTCHA response with the Google server from your backend.

Here is a very simplified example demonstrating this:

Note: the webview_fluter code used here is older version

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _controller = WebViewController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('reCAPTCHA in Flutter'),
      ),
      body: WebView(
        initialUrl: 'url/to/file.html',
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (WebViewController webViewController) {
          _controller = webViewController;
        },
        javascriptChannels: <JavascriptChannel>[
          JavascriptChannel(
              name: 'recaptchaV3',
              onMessageReceived: (JavascriptMessage message) {
                // Here we receive the token from the WebView
                print('reCAPTCHA token: ${message.message}');
              }),
        ].toSet(),
      ),
    );
  }
}

In our static HTML file, we would then have a script to send the token to our Flutter application through the JavaScript channel once the reCAPTCHA is completed. Here is an example:

<html>
<head>
    <!-- include reCAPTCHA library -->
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
    <!-- reCAPTCHA widget -->
    <div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY_HERE" data-callback="onReCAPTCHACompleted"></div>

    <script>
        function onReCAPTCHACompleted(token) {
            // send the token to the Flutter application
            recaptchaV3.postMessage(token);
        }
    </script>
</body>
</html>

Remember to replace "YOUR_SITE_KEY_HERE" with the actual reCAPTCHA site key.

This should set up a basic flow where the reCAPTCHA token is obtained in a WebView and then sent to our Flutter application.

Please test and modify this example according to your needs. Let me know if you encounter any issues or have further questions!

bharathraj-e / g_recaptcha_v3

Hello guys, I want to ask you if there's any solution to use reCAPTCHA on Android and IOS #9