v 0.0.3 - stable

bharathraj-e · Nov 20, 2021 · 5f64a10 · 5f64a10
1 parent 87ce0ca
commit 5f64a10
Show file tree

Hide file tree

Showing 8 changed files with 124 additions and 55 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+## 0.0.3 - [2021-11-20]
+
+* Added Show/hide reCaptcha badge.
+
 ## 0.0.2-beta - [2021-11-17]
 
 * Recaptcha Typo fixes.

diff --git a/README.md b/README.md
@@ -3,12 +3,15 @@
 
 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.
 
-<br>
+[![Pub](https://img.shields.io/pub/v/g_recaptcha_v3.svg?style=flat-square)](https://pub.dartlang.org/packages/g_recaptcha_v3)
+[![MIT License](https://img.shields.io/apm/l/atomic-design-ui.svg?style=flat-square)](https://github.com/bharathraj-e/g_recaptcha_v3/blob/dev/LICENSE)
 
-[![Pub](https://img.shields.io/pub/v/g_recaptcha_v3.svg?style=flat-square)](https://pub.dartlang.org/packages/g_recaptcha_v3) 
+### [Web Demo - https://bharathraj-e.github.io/g_recaptcha_v3_example_build/](https://bharathraj-e.github.io/g_recaptcha_v3_example_build/)
 
-[![MIT License](https://img.shields.io/apm/l/atomic-design-ui.svg?style=flat-square)](https://github.com/bharathraj-e/g_recaptcha_v3/blob/dev/LICENSE)
 
+<img src='https://raw.githubusercontent.com/bharathraj-e/g_recaptcha_v3/dev/sample.gif' width='70%'>
+
+<hr>
 
 ## Preparation
 
@@ -20,10 +23,10 @@ Create Google reCAPTCHA v3 token for Flutter web.  Google reCAPTCHA v3 plugin fo
 
 #### Step 2
 
-- Add the script inside the `web/index.html` `<body>` tag
+- Add the script inside `web/index.html` - `<body>` tag
 
 ```html
-  <script src="https://www.google.com/recaptcha/api.js?render=<your Recaptcha site key>"></script>
+  <script src="https://www.google.com/recaptcha/api.js?render=<your Recaptcha v3 site key>"></script>
 ```
 #### Step 3
 
@@ -43,6 +46,7 @@ The `ready()` method should be called before `execute()`
 import 'package:g_recaptcha_v3/g_recaptcha_v3.dart'; //--1
 
 void main() async {
+  WidgetsFlutterBinding.ensureInitialized();
   await GRecaptchaV3.ready("<your Recaptcha site key>"); //--2
   runApp(const MyApp());
 }
@@ -58,24 +62,39 @@ 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
 }
 ````
 - `String action` - used to verify the string in backend. ( [action docs](https://developers.google.com/recaptcha/docs/v3#actions) )
 - `token` will be null if the,
   - web setup has any errors.
   - method called from other than web platform.
 
+### Show / Hide reCaptcha badge
+
+change the reCaptcha badge visibility
+
+````dart
+    GRecaptchaV3.showBadge();
+    GRecaptchaV3.hideBadge();
+````
+
+## Warning!!!
+
+You are allowed to hide the badge as long as you include the `reCAPTCHA branding visibly in the user flow.`
+
+Sample Image :
+
+![alternate way](https://developers.google.com/recaptcha/images/text_badge_example.png)
+
+### [Read more about hiding - reCaptcha docs](https://developers.google.com/recaptcha/docs/faq#id-like-to-hide-the-recaptcha-badge.-what-is-allowed)
+
+
 ### Web Port 80 setup 
 ##### (for localhost only)
 
 In case recaptcha script gives you error for port other than port :80, you can use the following code to setup the port.
 
 ```bash
   flutter run -d chrome --web-port 80
-```
-
-## Roadmap
-
-- Additional platform support
-
-- reCaptcha Badge setup 
+```
diff --git a/example/lib/main.dart b/example/lib/main.dart
@@ -4,7 +4,9 @@ import 'package:flutter/material.dart';
 import 'package:g_recaptcha_v3/g_recaptcha_v3.dart';
 
 void main() async {
-  await GRecaptchaV3.ready("6Lfl7coUAAAAAKUjryaKQDhrrklXE9yrvWNXqKTj");
+  WidgetsFlutterBinding.ensureInitialized();
+  await GRecaptchaV3.ready("6Lfl7coUAAAAAKUjryaKQDhrrklXE9yrvWNXqKTj",
+      showBadge: true);
   runApp(const MyApp());
 }
 
@@ -16,13 +18,11 @@ class MyApp extends StatefulWidget {
 }
 
 class _MyAppState extends State<MyApp> {
-  String _token = 'Click the refresh floating button to generate token';
-
+  String _token = 'Click the below button to generate token';
+  bool badgeVisible = true;
   // Platform messages are asynchronous, so we initialize in an async method.
   Future<void> getToken() async {
-    String token;
-
-    token = await GRecaptchaV3.execute('submit') ?? '';
+    String token = await GRecaptchaV3.execute('submit') ?? 'null returned';
     setState(() {
       _token = token;
     });
@@ -36,12 +36,30 @@ class _MyAppState extends State<MyApp> {
           title: const Text('Recaptcha V3 Web example app'),
         ),
         body: Center(
-          child: SelectableText('Token: $_token\n'),
-        ),
-        floatingActionButton: FloatingActionButton(
-          onPressed: getToken,
-          tooltip: 'Click to generate token',
-          child: const Icon(Icons.refresh),
+          child: Column(
+            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+            crossAxisAlignment: CrossAxisAlignment.center,
+            children: [
+              SelectableText('Token: $_token\n'),
+              ElevatedButton(
+                child: const Text('Get new token'),
+                onPressed: getToken,
+              ),
+              OutlinedButton.icon(
+                onPressed: () {
+                  if (badgeVisible) {
+                    GRecaptchaV3.hideBadge();
+                  } else {
+                    GRecaptchaV3.showBadge();
+                  }
+                  badgeVisible = !badgeVisible;
+                },
+                icon: const Icon(Icons.legend_toggle),
+                label: const Text("Toggle Badge Visibilty"),
+              ),
+              const SelectableText("https://pub.dev/packages/g_recaptcha_v3"),
+            ],
+          ),
         ),
       ),
     );

diff --git a/example/pubspec.lock b/example/pubspec.lock
@@ -85,7 +85,7 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "0.0.2-beta"
+    version: "0.0.3"
   js:
     dependency: transitive
     description:

diff --git a/lib/g_recaptcha_v3.dart b/lib/g_recaptcha_v3.dart
@@ -1,31 +1,31 @@
 import 'dart:async';
 
 import 'package:flutter/foundation.dart';
-// import 'package:flutter/services.dart';
-import 'package:g_recaptcha_v3/g_recaptcha_v3_web.dart';
+
+import 'g_recaptcha_v3_web.dart';
 
 /// This class is used to create a Google reCAPTCHA v3 token.
 ///
 /// `Supports only web.`
 class GRecaptchaV3 {
-  // static const MethodChannel _channel = MethodChannel('g_recaptcha_v3');
-
-  // static Future<String?> get platformVersion async {
-  //   final String? version = await _channel.invokeMethod('getPlatformVersion');
-  //   return version;
-  // }
-
   /// use in main()
   ///
   /// This method should be called before calling `execute()` method.
   ///
   /// [siteKey] - Your recaptcha v3 siteKey.
   ///
   /// `Supports only web.`
-  static Future<void> ready(String siteKey) async {
+  static Future<void> ready(String siteKey,
+
+      /// ## Warning:
+      ///
+      /// ### [From reCaptcha docs](https://developers.google.com/recaptcha/docs/faq#id-like-to-hide-the-recaptcha-badge.-what-is-allowed)
+      ///
+      /// You are allowed to hide the badge as long as you include the `reCAPTCHA branding visibly in the user flow.`
+      ///
+      {bool showBadge = true}) async {
     if (kIsWeb) {
-      // await _channel.invokeMethod('ready', key);
-      await GRecaptchaV3Web.ready(siteKey);
+      await GRecaptchaV3Web.ready(siteKey, showBadge);
     }
   }
 
@@ -40,9 +40,33 @@ class GRecaptchaV3 {
   /// `Supports only web.`
   static Future<String?> execute(String action) async {
     if (kIsWeb) {
-      // final String? token = await _channel.invokeMethod('execute', action);
       return await GRecaptchaV3Web.execute(action);
     }
     return null;
   }
+
+  /// change the reCaptcha badge visibility
+  ///
+  /// ## Warning:
+  ///
+  /// ### [From reCaptcha docs](https://developers.google.com/recaptcha/docs/faq#id-like-to-hide-the-recaptcha-badge.-what-is-allowed)
+  ///
+  /// You are allowed to hide the badge as long as you include the `reCAPTCHA branding visibly in the user flow.`
+  ///
+  ///![alternate way](https://developers.google.com/recaptcha/images/text_badge_example.png)
+  ///
+  static Future<void> hideBadge() async {
+    if (kIsWeb) {
+      await GRecaptchaV3Web.changeVisibility(false);
+    }
+  }
+
+  /// change the reCaptcha badge visibility
+  ///
+  /// sets z-index of recatpcha badge to `10` to be on top of flutter elements
+  static Future<void> showBadge() async {
+    if (kIsWeb) {
+      await GRecaptchaV3Web.changeVisibility(true);
+    }
+  }
 }
diff --git a/lib/g_recaptcha_v3_web.dart b/lib/g_recaptcha_v3_web.dart
@@ -2,6 +2,7 @@
 library g_recaptcha_v3_web;
 
 import 'dart:async';
+import 'dart:html' as html;
 
 import 'package:flutter/foundation.dart';
 import 'package:flutter/services.dart';
@@ -18,15 +19,13 @@ external String get _gRecaptchaV3Key;
 external Future _ready(void Function() f);
 
 @JS('execute')
-external Future<String> _execute(String action, Options options);
+external Future<String> _execute(String action, _Options options);
 
 @JS()
 @anonymous
-class Options {
+class _Options {
   external String get action;
-
-  // Must have an unnamed factory constructor with named arguments.
-  external factory Options({String action});
+  external factory _Options({String action});
 }
 
 /// A web implementation of the GRecaptchaV3 plugin.
@@ -44,15 +43,8 @@ class GRecaptchaV3Web {
     channel.setMethodCallHandler(pluginInstance.handleMethodCall);
   }
 
-  /// Handles method calls over the MethodChannel of this plugin.
-  /// Note: Check the "federated" architecture for a new way of doing this:
-  /// https://flutter.dev/go/federated-plugins
   Future<dynamic> handleMethodCall(MethodCall call) async {
     switch (call.method) {
-      // case 'ready':
-      //   return ready(call.arguments);
-      // case 'execute':
-      //   return execute(call.arguments);
       default:
         throw PlatformException(
           code: 'Unimplemented',
@@ -63,12 +55,14 @@ class GRecaptchaV3Web {
   }
 
   /// use `GRecaptchaV3` not ~GRecaptchaV3Web~
-  static Future<void> ready(String key) async {
+  static Future<void> ready(String key, bool showBadge) async {
     if (!kIsWeb) return;
     _gRecaptchaV3Key = key;
+
     try {
       await _ready(allowInterop(() {
         debugPrint('gRecaptcha V3 ready');
+        changeVisibility(showBadge);
       }));
     } catch (e) {
       debugPrint(e.toString());
@@ -83,12 +77,22 @@ class GRecaptchaV3Web {
       throw Exception('gRecaptcha V3 key not set');
     }
     try {
-      return await js_util.promiseToFuture(
-          await _execute(_gRecaptchaV3Key, Options(action: action)));
+      var result = await js_util.promiseToFuture(
+          await _execute(_gRecaptchaV3Key, _Options(action: action)));
+      return result;
     } catch (e) {
       debugPrint(e.toString());
-      // !Error: No reCAPTCHA clients exist.
+      // Error: No reCAPTCHA clients exist.
       return null;
     }
   }
+
+  /// change the reCaptcha badge visibility
+  static Future<void> changeVisibility(bool showBagde) async {
+    if (!kIsWeb) return;
+    var badge = html.document.querySelector(".grecaptcha-badge");
+    if (badge == null) return;
+    badge.style.zIndex = "10";
+    badge.style.visibility = showBagde ? "visible" : "hidden";
+  }
 }
diff --git a/pubspec.yaml b/pubspec.yaml
@@ -1,6 +1,6 @@
 name: g_recaptcha_v3
 description: Google reCAPTCHA v3 plugin for Flutter. A Google reCAPTCHA is a free service that protects your website from spam and abuse.
-version: 0.0.2-beta
+version: 0.0.3
 homepage: https://github.com/bharathraj-e/g_recaptcha_v3
 
 environment:

diff --git a/sample.gif b/sample.gif