CAPTCHA authentication is a form of security mechanism that is used to tell computers and humans apart. CAPTCHA is a completely automated public Turing test. By requiring you to successfully complete a short test that verifies you are a human and not a computer trying to access a password-protected account, CAPTCHA helps protect you from spam and password decryption.
Two straightforward components make up a CAPTCHA test: a text box and a random sequence of letters and/or numbers that appear as a warped image. Simply enter the characters you see in the image into the text box to pass the test and demonstrate your human identity.
In this, we will see how a developer can use reCATCHA in a shopping application built using Flutter technology. You can also use 2Captcha, one of the leading captcha solving software in the world, which is helpful for Flutter developers to make their signup or signing process smooth.
Google uses CAPTCHA, but why?
Google is committed to protecting the security of your information. By ensuring that only a person with the correct password may access your account, CAPTCHA protects you from remote digital entry. Computers are able to generate distorted images and process user input, but they are unable to understand or solve problems in the same way as a human would in order to pass the test.
Google is one of the many web services that use CAPTCHA to assist block illegal account entry. Other websites that provide access to private data, such as bank or credit card accounts, might also use CAPTCHA.
How to implement recaptcha in flutter?
As a developer, you must always be on the lookout for spam data anytime you construct forms to collect information from users online. Hackers can insert automated bots into the form to fill it with harmful code activity and gain access to the backend of your website.
Flutter_recaptcha_v2
This plugin is used for google Recaptcha v2.you have to get a reference. If you are looking for a captcha solver plugin, you can also use the 2Captcha captcha solver chrome plugin to solve the captcha from your Chrome browser quickly.
Add it in your pubspec.ymal file run below command.
flutter pub add flutter_recaptcha_v2
Google ReCaptcha must be used in Webview for this plugin to work. It only works with Google ReCAPTCHA V2 with this plugin.in flutter sdk 2.5.0
Put the RecaptchaV2 widget into your widget tree , make sure it is at the top of the tree, and block all of the interactions from behind. You can modify the RecaptchaV2's plugin url for the captcha domain or leave it as is by omitting the line that reads.
pluginURL =
"https://recaptcha-flutter-plugin.firebaseapp.com/";
Add this rcaptcha code in your app.
RecaptchaV2Controller recaptchaV2Controller = RecaptchaV2Controller();
...
RecaptchaV2(
apiKey: "YOUR_API_KEY", // for enabling the reCaptcha
apiSecret: "YOUR_API_SECRET", // for verifying the responded token
pluginURL: "https://mypersonalurl.com",
visibleCancelBottom: true,
textCancelButtom: "CUSTOM CANCEL CAPTCHA BUTTOM TEXT",
controller: recaptchaV2Controller,
onVerifiedError: (err){
print(err);
},
onVerifiedSuccessfully: (success) {
setState(() {
if (success) {
// You've been verified successfully.
} else {
// "Failed to verify.
}
});
},
),
Here we will learn how to build a SignIn screen in shopping app with captcha verification. In this we have take id and password from user and varifing captcha if id password is correct and user verify captcha successfully then he/she will go to shopping app and see the products.
Let’s see full source code:
main.dart file
import 'package:captcha_code/shopping_page.dart';
import 'package:flutter/material.dart';
import 'package:flutter_recaptcha_v2/flutter_recaptcha_v2.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({
Key key,
}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
String verifyResult = "";
TextEditingController nameController = TextEditingController();
TextEditingController passwordController = TextEditingController();
RecaptchaV2Controller recaptchaV2Controller = RecaptchaV2Controller();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Sign Up Screen"),
),
body: Stack(
children: <Widget>[
Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(10),
child: Column(
children: <Widget>[
Container(
alignment: Alignment.center,
padding: const EdgeInsets.all(10),
child: const Text(
'Sign In',
style: TextStyle(
color: Colors.blue,
fontWeight: FontWeight.w500,
fontSize: 30),
)),
Container(
padding: const EdgeInsets.all(10),
child: TextField(
controller: nameController,
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: 'User Name',
),
),
),
Container(
padding: const EdgeInsets.all(10),
child: TextField(
obscureText: true,
controller: passwordController,
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: 'Password',
),
),
),
TextButton(
onPressed: () {
//forgot password screen
},
child: const Text(
'Forgot Password',
),
),
Container(
height: 50,
padding: const EdgeInsets.fromLTRB(10, 0, 10, 0),
child: ElevatedButton(
child: const Text('Login'),
onPressed: () {
if (nameController.text == "Jhon1999@gmail.com" &&
passwordController.text == "Jhon@123") {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
const HitsListView()),
);
} else {
const SnackBar(content: Text("Login failed"));
}
},
),
),
Row(
children: <Widget>[
const Text('Already have account?'),
TextButton(
child: const Text(
'Sign in',
style: TextStyle(fontSize: 20),
),
onPressed: () {
//signup screen
},
)
],
mainAxisAlignment: MainAxisAlignment.center,
),
],
)),
],
),
),
RecaptchaV2(
apiKey: "6LeCwZYUAAAAAJo8IVvGX9dH65Rw89vxaxErCeou",
apiSecret: "6LeCwZYUAAAAAKGahIjwfOARevvRETgvwhPMKCs_",
controller: recaptchaV2Controller,
onVerifiedError: (err) {
print(err);
},
onVerifiedSuccessfully: (success) {
setState(() {
if (success) {
verifyResult = "You've been verified successfully.";
} else {
verifyResult = "Failed to verify.";
}
});
},
),
],
),
);
}
}
home_page.dart
import 'package:flutter/material.dart';
class HitsListView extends StatelessWidget {
const HitsListView({
Key key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
List<Product> items = [
Product(name: "Shirt", image: "assets/images/shirt.jpg"),
Product(name: "Tshirts", image: "assets/images/tshirt.jpg"),
Product(name: "Kurties", image: "assets/images/kurti.jpg"),
Product(name: "Cap", image: "assets/images/cap.jpg")
];
return Scaffold(
appBar: AppBar(
title: const Text("Your Items"),
),
body: ListView.separated(
padding: const EdgeInsets.all(8),
itemCount: items.length,
itemBuilder: (BuildContext context, int index) {
return Card(
clipBehavior: Clip.antiAlias,
child: Column(
children: [
ListTile(
leading: const Icon(Icons.app_registration),
title: Text(items[index].name),
subtitle: Text(
'Secondary Text',
style: TextStyle(color: Colors.black.withOpacity(0.6)),
),
),
Padding(
padding: const EdgeInsets.all(16.0),
child: Text(
'Greyhound divisively hello coldly wonderfully marginally far upon excluding.',
style: TextStyle(color: Colors.black.withOpacity(0.6)),
),
),
Image.asset(items[index].image),
ButtonBar(
alignment: MainAxisAlignment.start,
children: [
ElevatedButton(
onPressed: () {
// Perform some action
},
child: const Text('Add to cart'),
),
],
),
],
),
);
},
separatorBuilder: (context, index) => const SizedBox(width: 10)),
);
}
}
class Product {
String name;
String image;
Product({
this.name,
this.image,
});
Product copyWith({
String name,
String image,
}) {
return Product(
name: name ?? this.name,
image: image ?? this.image,
);
}
}
Output:
On successful login you have redirect to this screen.
Conclusion
This Flutter application shows how to create a login or sign up screen in an application with reCaptcha verification. The majority of commonly used widgets, including Text, TextButton, and ElevatedButton, are encircled by Container widgets. i hope you understand how we implement and use Recaptcha verification in flutter.You can modify this code according to your needs.
Top comments (0)