CODEWITHSUNDEEP
flutterrecaptchaflutter-web
James Hope
James Hope

Reputation: 43

flutter_web how to implement RECAPTCHA?

I am completely stuck on how to implement RECAPTCHA with flutter_web.

The current available plugins (https://pub.dev/packages/recaptchav2_plugin and https://pub.dev/packages/flutter_recaptcha_v2) do not support web.

Upvotes: 2

Views: 2485

Answers (1)

Zujaj Misbah Khan
Zujaj Misbah Khan

Reputation: 819

Below are the major steps to test the g_recaptcha_v3 package extracted from the article implementation of Google reCAPTCHA v3 in Flutter Web.

  1. Register your site via the Google reCAPTCHA Admin Console.

Google reCAPTCHA v3 Site Registration Form

  1. Add the required pubspec packages.
  # A composable, Future-based library for making HTTP requests.
  http: ^0.13.4

  # A Google reCAPTCHA is a free service that protects your website from spam and abuse.
  g_recaptcha_v3: ^0.0.4
  1. Navigate to the web folder, open the index.html file and paste the below script inside the <body> tag.
<script src="https://www.google.com/recaptcha/api.js?render=recaptcha-site-key"></script>
  1. Add the GRecaptchaV3.ready in the mainmethod and run the app.
void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await GRecaptchaV3.ready('recaptcha-site-key');
  runApp(const MyApp());
}

Counter App with Google reCAPTCHA protection

Upvotes: 1

Related Questions