uniapp引入cloudflare人机验证

news/2025/2/6 19:21:09 标签: uni-app

https://developers.cloudflare.com/turnstile/get-started/client-side-rendering/
使用cloudflare需要注册个账号,并添加网站域名
获取站点密钥与密钥

1.index.html引入

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

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

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

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

登录提交turnstileToken给后端

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

使用的网站域名要与添加的网站域名一致;
在这里插入图片描述


http://www.niftyadmin.cn/n/5843278.html

相关文章

github下载失败网页打开失败 若你已经知道github地址如何cmd下载

直接打开命令行&#xff1a; winr cmd 输入&#xff1a;git clone 地址 eg&#xff1a;git clone https://github.com/akospasztor/stm32f103-dfu-bootloader

【原子工具】快速幂 快速乘

题幂算.一切即1 阴阳迭变积微著&#xff0c;叠浪层峦瞬息功 莫道浮生千万事&#xff0c;元知万象一归宗 文章目录 快速幂原始快速幂&#xff08;O(logn)&#xff09;二分递归形式非递归形式 模下意义的快速幂&#xff08;O(logn)&#xff09;二分递归形式非递归形式 快速乘龟速…

OpenCV:特征检测总结

目录 一、什么是特征检测&#xff1f; 二、OpenCV 中的常见特征检测方法 1. Harris 角点检测 2. Shi-Tomasi 角点检测 3. Canny 边缘检测 4. SIFT&#xff08;尺度不变特征变换&#xff09; 5. ORB 三、特征检测的应用场景 1. 图像匹配 2. 运动检测 3. 自动驾驶 4.…

设计模式Python版 外观模式

文章目录 前言一、外观模式二、外观模式示例三、抽象外观类四、抽象外观类示例 前言 GOF设计模式分三大类&#xff1a; 创建型模式&#xff1a;关注对象的创建过程&#xff0c;包括单例模式、简单工厂模式、工厂方法模式、抽象工厂模式、原型模式和建造者模式。结构型模式&am…

【Leetcode 热题 100】1143. 最长公共子序列

问题背景 给定两个字符串 t e x t 1 text_1 text1​ 和 t e x t 2 text_2 text2​&#xff0c;返回这两个字符串的最长 公共子序列 的长度。如果不存在 公共子序列 &#xff0c;返回 0 0 0。 一个字符串的 子序列 是指这样一个新的字符串&#xff1a;它是由原字符串在不改变…

AlwaysOn 可用性组副本所在服务器以及该副本上数据库的各项状态信息

目录标题 语句代码解释:1. `sys.dm_hadr_database_replica_states` 视图字段详细解释及官网链接官网链接字段解释2. `sys.availability_replicas` 视图字段详细解释及官网链接官网链接字段解释查看视图的创建语句方法一:使用 SQL Server Management Studio (SSMS)方法二:使用…

【R语言】数据操作

一、查看和编辑数据 1、查看数据 直接打印到控制台 x <- data.frame(a1:20, b21:30) x View()函数 此函数可以将数据以电子表格的形式进行展示。 用reshape2包中的tips进行举例&#xff1a; library("reshape2") View(tips) head()函数 查看前几行数据&…

java开发面试自我介绍模板_java面试自我介绍3篇

java 面试自我介绍 3 篇 java 面试自我介绍篇一&#xff1a; 我叫赵&#xff0c;我的同学更都喜欢称呼我的英文名字&#xff0c;叫&#xff0c;六月的 意思&#xff0c;是君的谐音。我来自安徽的市&#xff0c;在 21 年我以市全市第一名 的成绩考上了大学&#xff0c…