本文作者:Tianheng Ni
本文分类:前端开发 浏览:2762
阅读时间:1595字, 约2-2.5分钟
Hi, 欢迎来到nth.ink,这次我们来看一下如何做一个附带hCaptcha(就是那个带有要你找出“红绿灯🚥”或其他图片的那个)验证的登录界面。
hCaptcha
先来介绍一下hCaptcha。它是基于Google的reCaptcha
创建的,支持recaptcha的100%功能,而且还提高了安全性,有了更多的选项,最重要的是——国内用户也能用!(reCaptcha不稳定,时常被墙)/斜眼笑
注册hCaptcha
打开:hCaptcha官网:https://hcaptcha.com
点击“注册”。
我选择了Github第三方注册。
然后Github进行Auth后,进入后台dashboard。
加载速度还挺快的!
进入后台后,选择“Sites”,然后根据图片操作。
进入设置。根据下图操作:
好了,至此hcaptcha配置完成!
然后我们开始写代码。。。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>登录</title>
<script>
function rvcallback() {
document.getElementById("subm").removeAttribute("disabled")
}
</script>
<script src="https://hcaptcha.com/1/api.js" async defer></script>
</head>
<body>
<div id="login">
<h1>登录</h1>
<form action="请填写登录响应页面.php" method="get" autocomplete="off">
用户名: <input type="text" required="required" placeholder="用户名" name="name"></input>
密码: <input type="text" required="required" placeholder="密码" name="pwd"></input>
<button class="but" id="subm" type="submit" disabled="disabled">登录</button>
</form><br/>
<div class="h-captcha" data-sitekey="填写你的site key" data-theme="dark" data-callback="rvcallback"></div>
</div>
</body>
</html>
请在自己的网站上实践!本机的话,就算了。学一下hcaptha的api是怎么用的就可以。
下面是完成的效果(用在了LandChat上✅,链接🔗):
加载速度还可以的吧!
如果不成功的话,点击注册是没有反应的哦!
下面说一下有哪些更多选项:
在前面引入API的js文件时,有以下选项:
<script src="https://hcaptcha.com/1/api.js?hl=zh&onload=myFunction" async defer></script>
hl表示语言,onload表示加载完成后调用的函数。这些都是可选的!
在下面使用div时,有以下选项:
<div class="h-captcha" data-sitekey="填写你的site key" data-theme="dark" data-callback="rvcallback" data-size="100" data-error-callback="ErrorCallBack"></div>
class和data-sitekey都是必填的。theme可以选择:light,dark等。data-callback:验证成功后调用的函数名。data-error-callback:验证错误后调用的函数名。
如果想了解更多,请参阅hcaptcha API手册。
关于作者Tianheng Ni
- 卑微站长23564~ 苣蒻OIer,电脑爱好者,喜欢C++编程/折腾网站
- Email: eric_ni2008@163.com
- 注册于: 2020-04-05 07:11:36
2020-09-26 16:50
审核通过
现在(国内)所有用hcaptcha的网站都没法用了,api.js响应连接超时