GitLocker: The Coding Marketplace

Description:

g recaptcha v3

g_recaptcha_v3 #
Create Google reCAPTCHA v3 token for Flutter web. Google reCAPTCHA v3 plugin for Flutter. A Google reCAPTCHA is a free service that protects your website from spam and abuse.

Web Demo

Preparation #
Step 1

Create your keys 🗝
ReCaptcha Docs
For development, add localhost as domain in reCaptcha console

Step 2

Add the script inside web/index.html - <head> tag
Place it before the main.dart.js script (or) flutter.js script

<head>
.
.

<script src="https://www.google.com/recaptcha/api.js?render=<your Recaptcha v3 site key>"></script>

.
.
<script src="flutter.js" defer></script>
</head>
copied to clipboard
Step 3

Add g_recaptcha_v3 to pubspec.yaml

flutter pub add g_recaptcha_v3
copied to clipboard
Development #
1. GRecaptchaV3.ready() #
The ready() method should be called before execute()
import 'package:g_recaptcha_v3/g_recaptcha_v3.dart'; //--1

void main() async {
WidgetsFlutterBinding.ensureInitialized();
if(kIsWeb){
bool ready = await GRecaptchaV3.ready("<your Recaptcha site key>"); //--2
print("Is Recaptcha ready? $ready");
}
runApp(const MyApp());
}
copied to clipboard
2. GRecaptchaV3.execute() #
The ready() method should be called before execute()
import 'package:g_recaptcha_v3/g_recaptcha_v3.dart';

void generateToken() async {
String? token = await GRecaptchaV3.execute('<your_action>'); //--3
print(token);
// send token to server and verify
}
copied to clipboard

String action - used to verify the string in backend. ( action docs )
token will be null if the,

web setup has any errors.
method called from other than web platform.

3. Show / Hide reCaptcha badge #
change the reCaptcha badge visibility
GRecaptchaV3.showBadge();
GRecaptchaV3.hideBadge();
copied to clipboard
Warning!!! #
You are allowed to hide the badge as long as you include the reCAPTCHA branding visibly in the user flow.`
Sample Image

Read more about hiding in reCaptcha docs #
Web Port 80 setup #
(for localhost only)
If in case recaptcha script gives you error for port other than port :80, you can use the following code to setup the port.
flutter run -d chrome --web-port 80
copied to clipboard
FAQ #
Q: How to hide reCaptcha until / before Flutter render its UI?
A: https://github.com/bharathraj-e/g_recaptcha_v3/issues/3