Flutter人机验证插件hcaptcha的使用
Flutter人机验证插件hcaptcha的使用
开始使用
首先,你需要在你的Flutter项目中安装hcaptcha
插件。通过pub
来安装这个包:
flutter pub add hcaptcha
然后,在你的应用初始化时,使用以下代码来初始化hCaptcha
:
HCaptcha.init(initialSite: 'https://YOUR-SITE.com/path-to-captcha.html');
// 或者
HCaptcha.init(siteKey: 'YOUR-SITE-KEY');
如果你使用initialSite
,则需要提供一个包含以下内容的HTML文件链接:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Captcha Challenge</title>
</head>
<body>
<div style="display: flex; justify-content: center;">
<form method="POST">
<div class="h-captcha" data-sitekey="YOUR_SECRET_GOES_HERE" data-callback="captchaCallback"></div>
<script src="https://js.hcaptcha.com/1/api.js" async defer></script>
</form>
</div>
<script>
function captchaCallback(response) {
if (typeof Captcha !== "undefined") {
Captcha.postMessage(response);
}
}
</script>
</body>
</html>
使用示例
在表单提交时,添加验证码逻辑:
import 'package:flutter/material.dart';
import 'package:hcaptcha/hcaptcha.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('hCaptcha 示例'),
),
body: MyForm(),
),
);
}
}
class MyForm extends StatefulWidget {
[@override](/user/override)
_MyFormState createState() => _MyFormState();
}
class _MyFormState extends State<MyForm> {
final _formKey = GlobalKey<FormState>();
[@override](/user/override)
Widget build(BuildContext context) {
return Form(
key: _formKey,
child: Column(
children: <Widget>[
TextFormField(
decoration: InputDecoration(labelText: '姓名'),
validator: (value) {
if (value == null || value.isEmpty) {
return '请输入姓名';
}
return null;
},
),
ElevatedButton(
onPressed: () async {
if (_formKey.currentState!.validate()) {
Map? captchaDetails = await HCaptcha.show(context);
// 验证成功
if (captchaDetails != null) {
// 现在可以使用 captchaDetails['code']
print('验证码结果: ${captchaDetails['code']}');
} else {
print('验证码未通过');
}
}
},
child: Text('提交表单'),
),
],
),
);
}
}
更多关于Flutter人机验证插件hcaptcha的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter人机验证插件hcaptcha的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
在Flutter项目中集成hCaptcha人机验证插件可以提升应用的安全性,防止自动化脚本和机器人的滥用。虽然Flutter社区中可能没有直接官方支持的hCaptcha插件,但你可以通过调用hCaptcha的Web API来实现这一功能。下面是一个基本的实现思路,包括如何在Flutter中调用一个Web视图来加载和验证hCaptcha。
步骤概述
- 创建Flutter项目:如果还没有Flutter项目,先创建一个。
- 添加Web视图插件:使用
webview_flutter
插件来加载hCaptcha的Web界面。 - 与hCaptcha服务器交互:通过HTTP请求与hCaptcha服务器进行验证。
代码实现
1. 创建Flutter项目
flutter create captcha_demo
cd captcha_demo
2. 添加依赖
在pubspec.yaml
文件中添加webview_flutter
依赖:
dependencies:
flutter:
sdk: flutter
webview_flutter: ^3.0.4 # 确保使用最新版本
然后运行flutter pub get
来安装依赖。
3. 实现Web视图加载hCaptcha
创建一个新的Dart文件,例如hcaptcha_screen.dart
,用于显示Web视图:
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
class HCaptchaScreen extends StatefulWidget {
@override
_HCaptchaScreenState createState() => _HCaptchaScreenState();
}
class _HCaptchaScreenState extends State<HCaptchaScreen> {
late WebViewController _controller;
final _siteKey = 'your_site_key_here'; // 替换为你的hCaptcha站点密钥
final _secretKey = 'your_secret_key_here'; // 替换为你的hCaptcha密钥
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('hCaptcha Verification'),
),
body: WebView(
initialUrl: Uri.dataFromString(
'''
<!DOCTYPE html>
<html>
<head>
<script src="https://hcaptcha.com/1/api.js" async defer></script>
</head>
<body>
<h1>Please complete the hCaptcha challenge</h1>
<div class="g-recaptcha" data-sitekey="$_siteKey"></div>
<button id="submitBtn" disabled>Submit</button>
<script>
var verifyCallback = function(response) {
document.getElementById('submitBtn').disabled = false;
window.flutter_webview_plugin.postMessage(response);
};
var expiredCallback = function() {};
var errorCallback = function(error) {};
var onloadCallback = function() {};
grecaptcha.ready(function() {
grecaptcha.render('example', {
'sitekey': '$_siteKey',
'callback': verifyCallback,
'expired-callback': expiredCallback,
'error-callback': errorCallback
});
});
</script>
</body>
''',
mimeType: 'text/html',
encoding: Encoding.getByName('utf-8')
).toString(),
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (WebViewController webViewController) {
_controller = webViewController;
_controller.setNavigationDelegate(
NavigationDelegate(
onPageStarted: (NavigationRequest request) async {
// 可以在这里处理页面开始加载的逻辑
},
onPageFinished: (NavigationResponse response) async {
// 页面加载完成,可以监听来自Web视图的消息
_controller.addJavaScriptChannel(
JavascriptChannel(
name: 'flutter_webview_plugin',
onMessageReceived: (JavascriptMessage message) {
// 收到hCaptcha的响应
_handleCaptchaResponse(message.message);
},
),
);
},
onNavigationRequest: (NavigationRequest request) {
// 阻止导航到外部链接
if (request.url!.startsWith('http')) {
return NavigationDecision.prevent;
}
return NavigationDecision.navigate;
},
),
);
},
),
);
}
void _handleCaptchaResponse(String captchaResponse) {
// 在这里发送captchaResponse到你的服务器进行验证
// 可以使用dio或http包来发送POST请求
// 例如:
// var response = await http.post(
// Uri.parse('https://hcaptcha.com/siteverify'),
// body: {
// 'secret': _secretKey,
// 'response': captchaResponse,
// 'remoteip': 'user_ip_address', // 用户的IP地址,可以从请求头中获取
// },
// );
// if (response.statusCode == 200) {
// var data = jsonDecode(response.body);
// if (data['success']) {
// // 验证成功
// } else {
// // 验证失败
// }
// } else {
// // 请求失败
// }
// 为了简化示例,这里只打印响应
print('Captcha Response: $captchaResponse');
}
}
注意:在实际应用中,你应该将_secretKey
和验证逻辑放在你的服务器端,而不是在客户端代码中。客户端只需要将用户完成的验证码响应发送到服务器,服务器再与hCaptcha进行验证。
4. 在主应用中使用HCaptchaScreen
打开main.dart
文件,并修改如下:
import 'package:flutter/material.dart';
import 'hcaptcha_screen.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Flutter hCaptcha Demo'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => HCaptchaScreen()),
);
},
child: Text('Verify with hCaptcha'),
),
),
),
);
}
}
总结
以上代码展示了如何在Flutter应用中使用Web视图加载hCaptcha并进行基本的响应处理。实际的生产环境中,你应该将验证逻辑放在服务器端,并且确保敏感信息(如_secretKey
)不会被暴露在客户端代码中。