A software engineer with a passion to share what I learn

Recaptcha v3 in Flutter web app

How to implement Google recaptcha v3 in Flutter web app?

on

Google recaptcha v3 protects your app against bots. It ensures that all api calls made to the backend are by humans and cannot be categorised as suspicious calls. There are different implementations of Google recaptcha v3 for web and android / ios apps. This article is about how to implement Google recaptcha v3 in web projects. I’ll be posting a different article on how to implement it in android / ios apps.

Step 1 : Create a site key on google cloud console

Go to the google cloud console to create your recaptcha key : https://www.google.com/recaptcha/admin/create.
Come up with a descriptive name as the label. Enter the domains that you want to enable recaptcha for. If you are in development mode, do enter localhost as well. Select score based recaptcha verification. Link your Google Cloud Project to the recaptcha key. Copy and keep the site key and secret key safely.

Step 2 : Get the recaptcha token in your Flutter web app

Install the google recaptcha v3 package.

flutter pub add g_recaptcha_v3

Then, run

flutter pub get

Import the package in your main.dart file.

import 'package:g_recaptcha_v3/g_recaptcha_v3.dart'; 

// Initialise GRecaptchaV3 in the main() function
bool ready = await GRecaptchaV3.ready("YOUR_SITE_KEY_HERE");
print("Is Recaptcha ready? $ready");
GRecaptchaV3.hideBadge();

Get the token before the user signs in and verify it from the backend. 

String token = await GRecaptchaV3.execute('login');

final url = Uri.parse("https://your-backend/api/verifyRecaptchaToken");
  final response = await http.post(
    url,
    headers: {"Content-Type": "application/json"},
    body: jsonEncode({"recaptcha_token": token}),
  );

  if (response.statusCode == 200) {
    print("Verification successful: ${response.body}");
  } else {
    print("Verification failed: ${response.body}");
  }

Step 3 : Verify the recaptcha token in your backend

To verify the recaptcha token, we use the following logic : 


const secretKey = "YOUR_SECRET_KEY";
const response = await axios.post("https://www.google.com/recaptcha/api/siteverify", null, {
   params: {
     secret: secretKey,
     response: token,
   },
});

if (response.data.success && response.data.score > 0.5) {
 return res.json({ success: true, message: "Authentication passed" });
} else {
 return res.status(400).json({ success: false, message: "reCAPTCHA verification failed" });
}

That’s it! You should now be able to verify the recaptcha tokens using the above steps. This implementation helps the app to be protected against bots and suspicious cases.
You can adjust the score threshold. In the above code, the recaptcha verification score is by default set to 0.5. Any request with a score lesser than the threshold, would be considered to be suspicious. You can see more details about the request on the recaptcha admin console.

By following these steps, you can successfully integrate and verify Google reCAPTCHA v3 in your Flutter app, enhancing security while keeping the user experience seamless.

Written by Feya Shah

tech