A new open-source mobile UI framework called Flutter was created by Google to quickly create high-quality native interfaces for iOS and Android. Flutter is the primary tool for developing apps for Google Fuchsia and integrates with existing code. It is utilized by developers and organizations worldwide.
Compared to other cross-platform technologies as well as native development options, Flutter has certain distinctive advantages. Because of this, product owners, tech leads, and developers find it to be very enticing. These are Flutter's main advantages.
Flutter's cross-platform capabilities make it possible to create apps for both operating systems using the same codebase. But that's not the only way using Flutter speeds up and streamlines the development process. It also has a well-known "hot reload" feature and quick restart, which lets you see updates in real-time without having to restart the program.
In this article, we will see about the captcha code. we will see how to developer can use reCAPTCHA in flutter and how to implement it. You can also refer 2Captcha one of the leading captcha solving software preferred by Flutter developers.
In Flutter, we can host a web app, but we need to secure it, hence it is best to include ReCAPTCHA in the flutter app. ReCAPTCHA is a highly important service when you want to protect your website from spam users
Advanced risk analysis techniques are used by ReCAPTCHA validation to distinguish between human and automated users. If the captcha detects any spam, it will issue a challenge to make sure you are a person ( a real user ).
You must register here for a captcha API key for your site's IP or domain in order to utilize reCAPTCHA in a flutter app.
Give your site a label to make it easier to find it. This can be a nickname or the URL of your website.
Then select reCAPTCHA V2. Please check the "I'm not a robot" box. The other choices cannot be used.
Enter your domain name. After entering your unique domain, click the plus sign. For any more custom domains linked to your website, repeat this procedure, leaving https:// off each time.
Click on Submit after accepting the Google reCAPTCHA terms of service.
Copy your Site Key and Secret Key, then paste them into a visible location where you want to do your code.
Now let’s start with the implementation of reCAPTCHA code.
In this project, we'll pull an HTML page from the Assets directory and display it in our Flutter app.
Therefore, we'll add a ReCAPTCHA check to the HTML page (index.html) and then display the index.html web page in our Flutter app.
We require a library called webview_flutter_plus in order to load a web page into a flutter app.
Open the pubspec.yaml file and add the webview_flutter_plus package under the dependencies section.
We require authorization to access the internet since we are making internet calls to validate the captcha.
Go to the AndroidManifest.xml file to add the Internet permission.
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.WAKE_LOCK" />
<application android:usesClearTextTraffic="true">
create assets folder in the project directory and now in assets/webpages/ folder create a file & name it as index.html and copy paste below HTML code.
Paste your captcha site key in below code.
<!DOCTYPE html>
<html>
<head>
<title>reCAPTCHA</title>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body style='background-color: aqua;'>
<div style='height: 60px;'></div>
<form action="?" method="POST">
<div class="g-recaptcha"
data-sitekey="6LdgVmAhAAAAAF1vJWcd75AcxLY92jmLfsCx8Am-"
data-callback="captchaCallback"></div>
</form>
<script>
function captchaCallback(response){
if(typeof Captcha!=="undefined"){
Captcha.postMessage(response);
}
}
</script>
</body>
</html>
<html>
<body>
Now replace the below code in the main.dart file.
import 'package:flutter/material.dart';
import 'package:flutter_recaptcha/WelcomePage.dart';
import 'package:webview_flutter_plus/webview_flutter_plus.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@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> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: WebViewPlus(
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (controller){
controller.loadUrl("assets/webpages/index.html");
},
javascriptChannels: Set.from([
JavascriptChannel(name: 'Captcha', onMessageReceived: (JavascriptMessage message){
Navigator.pushReplacement(context, MaterialPageRoute(builder: (context) => WelcomePage()));
})
]),
)
);
}
}
Create another file WelcomePage.dart in the lib folder and add the below code in it.
import 'package:flutter/material.dart';
class Welcomeage extends StatelessWidget {
const WelcomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Text("Welcome",style: TextStyle(fontSize: 20),),
),
);
}
}
So, the implementation is done now try to run your project and get the output like below.
##Conclusion:
So, in this article, we had seen how to create an API key and use the reCaptcha code in a flutter. I hope you guys are enjoying this article.