uniapp引入cloudflare人机验证

https://developers.cloudflare.com/turnstile/get-started/client-side-rendering/

使用cloudflare需要注册个账号,并添加网站域名

获取站点密钥与密钥

1 .index.html引入

javascript 复制代码
 <script src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit"></script>

2.登录页面使用 id需要 唯一

html 复制代码
<div id="example-container1" style="width: 90%; margin: 0 auto;" data-size="flexible"></div>
javascript 复制代码
	//人机验证相关代码
	const turnstileToken = ref("");
	onMounted(() => {
		turnstile.ready(function() {
			turnstile.render("#example-container1", {
				sitekey: "",   //站点密钥
				callback: function(token) {
					turnstileToken.value = token;
				},
			});
		});
	})

3 .登录时验证turnstileToken是否存在

登录提交turnstileToken给后端

后端使用的是密钥,用来验证前端传递来的站点密钥

使用的网站域名要与添加的网站域名一致;

相关推荐
盛夏绽放3 小时前
关于 uni-app 与原生微信小程序中的生命周期 —— 一次“生命旅程”的解读
微信小程序·小程序·uni-app
知识分享小能手4 小时前
uni-app 入门学习教程,从入门到精通,uni-app 基础知识详解 (2)
前端·javascript·windows·学习·微信小程序·小程序·uni-app
2501_916008895 小时前
iOS 发布全流程详解,从开发到上架的流程与跨平台使用 开心上架 发布实战
android·macos·ios·小程序·uni-app·cocoa·iphone
风清云淡_A7 小时前
【uniapp】uni.uploadFile上传数据多出一个304的get请求处理方法
uni-app
shykevin7 小时前
uni-app x商城,商品列表组件封装以及使用
windows·uni-app
cesske8 小时前
uniapp 编译支付宝小程序canvas 合成图片实例,支付宝小程序 canvas 渲染图片 可以换成自己的图片即可
小程序·uni-app·apache
Q_Q51100828518 小时前
python+uniapp基于微信小程序的旅游信息系统
spring boot·python·微信小程序·django·flask·uni-app·node.js
2501_9160074720 小时前
iOS 混淆工具链实战,多工具组合完成 IPA 混淆与加固(iOS混淆|IPA加固|无源码混淆|App 防反编译)
android·ios·小程序·https·uni-app·iphone·webview
游戏开发爱好者821 小时前
FTP 抓包分析实战,命令、被动主动模式要点、FTPS 与 SFTP 区别及真机取证流程
运维·服务器·网络·ios·小程序·uni-app·iphone
2501_915909061 天前
iOS 26 文件管理实战,多工具组合下的 App 数据访问与系统日志调试方案
android·ios·小程序·https·uni-app·iphone·webview