<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Tencent Captcha Demo</title>
</head>
<body>
<div
style="
min-height: min-h-screen;
display: flex;
align-items: center;
min-height: 100vh;
justify-content: center;
"
>
<button
id="TencentCaptcha"
data-appid="2044554539"
data-cbfn="TencentCaptchaCallback"
type="button"
>
Verify Now
</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>
<script>
window.TencentCaptchaCallback = (res) => {
console.log(res);
// res（用户主动关闭验证码）= {ret: 2, ticket: null}
// res（验证成功） = {ret: 0, ticket: "String", randstr: "String"}
if (res.ret === 0) {
// console.log(res.ticket); // 票据
const url = `https://1vqq7.sse.codesandbox.io`; // 后端校验ticket接口地址
const { appid, randstr: rand_str, ticket } = res;
axios
.post(url, { appid, rand_str, ticket })
.then(({ data }) => {
alert(data.message);
console.log(data);
})
.catch((error) => {
console.log(error);
});
}
};
</script>
</body>
</html>
