做一个附带hCaptcha验证的登录界面

Hi, 欢迎来到nth.ink,这次我们来看一下如何做一个附带hCaptcha(就是那个带有要你找出“红绿灯🚥”或其他图片的那个)验证的登录界面。

hCaptcha

先来介绍一下hCaptcha。它是基于Google的reCaptcha创建的,支持recaptcha的100%功能,而且还提高了安全性,有了更多的选项,最重要的是——国内用户也能用!(reCaptcha不稳定,时常被墙)/斜眼笑

注册hCaptcha

打开:hCaptcha官网:https://hcaptcha.com

截屏2020-09-26 下午4.09.49

点击“注册”。

截屏2020-09-26 下午4.10.22

我选择了Github第三方注册。

然后Github进行Auth后,进入后台dashboard。

加载速度还挺快的!

进入后台后,选择“Sites”,然后根据图片操作。

截屏2020-09-26 下午4.15.30

进入设置。根据下图操作:

好了,至此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上✅,链接🔗):

截屏2020-09-26 下午4.34.16

加载速度还可以的吧!

如果不成功的话,点击注册是没有反应的哦!

下面说一下有哪些更多选项:

在前面引入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手册

版权声明:本文为博主EricNTH原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接: https://nth.ink/front-end/P2644.html

(广告由我们的赞助商提供,内容与本站无关)
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇