最近接待了几位从discuz来的用户,说是想要给自己海外的网站安装验证码,但是discuz境外服务器还要解析安装中心的DNS到境外服务器上,所以基于discuz建站的不好之处就在这里。
而且我们还讨论到一个问题,海外的网站,需要用到滑动验证码吗?
经过激烈的“大战三百回合”,我们得出了结论:必须要。
原因有三:
防止恶意行为:国外的geek可比国内的嚣张多了,各种恶意攻击、刷票、撞库、暴力破解密码等
保护数据和内容:爬虫什么的,国外格外嚣张,而且各种破解工具开源
应对垃圾信息和垃圾账号:通过要求用户手动完成滑动验证,可以有效减少无意义的注册和发布垃圾信息的行为。尤其是对于内容类网站,比如说论坛。
所以说,如果想要做国外的网站或者是App,那么做好防护是必须的。而简单好用且便宜的动态验证码是首选。
今天就来教大家怎么去在自己海外的网站上安装验证码。
可以在discuz找(如果是基于discuz建站的,那你就只有这一个选项),或者使用极验,或者其他提供免费服务的。我们以一家小公司AiSecruis的abtCaptcha为例(链接我就不放了,大家自行选择合适的即可,有需要可以一起交流:出海交流)。
环境先决条件:兼容IE8+、Chrome、Firefox等主流浏览器。
激活atbCAPTCHA服务:创建Applcation,获取apiServer、appld、appSecret;
脚本的使用:
1 | <script src = "https://cdn.aisecurius.com/ctu-group/captcha-ui/v5/index.js" crossorigin = "anonymous" id = "as-captcha-script" >< / script> |
*注意: atbCAPTCHA 脚本经常更新,请务必使用 CDN 上的资源获取最新的安全更新。不要在自己的服务器上使用副本。*
以下是 valina JavaScript、React 和 Vue 演示。
1)JavaScript 示例
假设<div id="demo"></div>
页面上有a,atbCAPTCHA可以按如下方式初始化。
1 2 3 4 5 6 7 8 9 | var myCaptcha = as.Captcha(document.getElementById( 'demo' ), { appId: 'your appId' , / / appId, Obtaining from the console "Application Management" or "Application Configuration" module, apiServer: 'https://cap.aisecurius.com' , / / apiServer, The domain name address is obtained in the top left corner of the console page - > atbCAPTCHA - > "Application Management" page. It is a must to fill in it completely, including https: / / . success: function (token) { console.log( 'token:' , token) / / The atbCAPTCHA token is obtained for back - end verification. Note that if the obtained token is a string starting with sl, it is a downgraded token generated by the front - end network blocked. Please check the front - end network and apiServer address. } }) |
初始化后,abtCAPTCHA 组件将被插入到<div id="demo"></div>
.
2) React 示例
假设页面上有<div id="demo"></div>
abtCAPTCHA 可以初始化如下:
1 2 3 4 5 6 7 8 9 10 | / / class component use componentDidMount useEffect(() = > { as.Captcha(document.getElementById( 'demo' ), { appId: 'appId' , apiServer: 'https://xxx.xxx.com' , success: function (token) { console.log( 'token:' , token) } }); }, []) |
初始化后,atbCAPTCHA 组件将被插入到<div id="demo"></div>
.
3) Vue 示例
假设页面上有<div ref="demo"></div>
abtCAPTCHA 可以初始化如下:
1 2 3 4 5 6 7 8 9 | mounted() { as.Captcha(this.$refs.demo, { appId: 'appId' , apiServer: 'https://xxx.xxx.com' , success: function (token) { console.log( 'token:' , token) } }); } |
初始化后,atbCAPTCHA 组件将被插入到<div ref="demo"></div>
.
4) 外观及尺寸
atbCAPTCHA 有四种样式:
300px
,可通过初始化时的 width
参数调节,高度为 200px
,高度不可调节300px
,可通过初始化时的 width
参数调节,高度为 40px
,高度不可调节.show()
方法后将以浮层的形式展现,宽度为 300px
,高度为 200px
300px
,可通过初始化时的 width
参数调节,高度为 40px
,高度不可调节atbCAPTCHA 实例具有以下方法:
reload() :重新加载当前的 atbCAPTCHA
注意!请不要在成功回调中调用reload(),因为开启无感验证时会重复调用成功回调。
例子:
1 | myCaptcha. reload () |
show() :显示当前的 atbCAPTCHA
如果显示当前的atbCAPTCHA,“style”为“popup”的验证码,默认隐藏。接入用户需要根据页面逻辑调用show()方法来显示和隐藏当前的atbCAPTCHA。
例子:
1 | myCaptcha.show() |
hide() :隐藏当前验证码
例子:
1 | myCaptcha.hide() |
abtCAPTCHA 可用于通过以下方式监听事件:
1 2 3 4 5 6 7 8 9 10 11 | myCaptcha.on( 'ready' , function () { console.log( 'captcha is ready!' ) }) myCaptcha.on( 'verifySuccess' , function (security_code) { console.log( 'security_code is: ' + security_code) }) myCaptcha.on( 'hide' , function () { console.log( 'The verification code control is hidden. ' ) }) |
具体的样式与语言也是可以自定义操作的,具体可以根据自己的需求来。
下载Java7及以上版本的SDK。
Maven 依赖
1 2 3 4 5 | <dependency> <groupId>com.aisecurius< / groupId> <artifactId>ctu - security - sdk< / artifactId> <version> 3.0 < / version> < / dependency> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | / * * The initialization parameters are appid and appSecret * The appid is consistent with the appid of the frontend, and the appid can be disclosed * The appSecret is the secret key, please do not disclose it * The token can be obtained after the verification is completed at the frontend and sent to the backend with the your Form / XHR request. The token is valid for two minutes * * / String appId = "appId" ; String appSecret = "appSecret" ; CaptchaClient captchaClient = new CaptchaClient(appId,appSecret); CaptchaResponse response = captchaClient.verifyToken(token); System.out.println(response.getCaptchaStatus()); / / A fault - tolerant mechanism is designed in the SDK, response.getResult() will be returned true if there is an exception in the network if (response.getResult()) { / * * The token verification passes, to continue other processes * * / } else { / * * If the token verification fails, you can directly block the request or continue to pop up the CAPTCHA * * / } |
下载PHP版SDK: 点击下载
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | include ( "CaptchaClient.php" ); / * * The initialization parameters are appid and appSecret * The appid is consistent with the appid of the frontend, and the appid can be disclosed * The appSecret is the secret key, please do not disclose it * The token can be obtained after the verification is completed at the frontend and sent to the backend with the your Form / XHR request. The token is valid for two minutes * * / $appId = "appId" ; $appSecret = "appSecret" ; $client = new CaptchaClient($appId,$appSecret); $client - >setTimeOut( 2 ); / / Set the timeout, 2 seconds by default; $response = $client - >verifyToken(token); / / ; The token refers to the value passed from the frontend, that is , the token issued after the verification code is successfully verified echo $response - >serverStatus; / / A fault - tolerant mechanism is designed in the SDK, response.getResult() will be returned true if there is an exception in the network if ($response - >result){ echo "true" ; / * * the token verification passes, to continue other processes * * / } else { echo "false" ; / * * Verification failed * * / } |
Python版本SDK下载: 点击下载
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | from CaptchaClient import CaptchaClient if __name__ = = '__main__' : APP_ID = '12610axxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' APP_SECRET = 'a3e56cxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' captchaClient = CaptchaClient(APP_ID, APP_SECRET) captchaClient.setTimeOut( 2 ) # Set the timeout, 2 seconds by default response = captchaClient.checkToken( "token" ) print response[ 'serverStatus' ] # A fault-tolerant mechanism is designed in the SDK, response.getResult() will be returned true if there is an exception in the network print response[ 'result' ] if response[ 'result' ]: # the token verification passes, to continue other processes; pass else : # If the verification fails, you can directly block the request or continue to pop up the CAPTCHA pass |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | / / Version Go 1.13 import "./captcha-client" / * * The initialization parameters are appid and appSecret * The appid is consistent with the appid of the frontend, and the appid can be disclosed * The appSecret is the secret key, please do not disclose it * The token can be obtained after the verification is completed at the frontend and sent to the backend with the your Form / XHR request. The token is valid for two minutes * * / appId : = "appId" appSecret : = "appSecret" captchaClient : = captcha_client.NewCaptchaClient(appId, appSecret) / / captchaClient.SetTimeout( 2000 ) / / Set the timeout, in milliseconds, 2 seconds by default captchaResponse : = captchaClient.VerifyToken(token) / / A fault - tolerant mechanism is designed in the SDK, response.getResult() will be returned true if there is an exception in the network / / fmt.Println(captchaResponse.Ip) if captchaResponse.Result { / * The verification passes, to continue other processes * / } else { / * If the verification fails, you can directly block the request or continue to pop up the CAPTCHA * / } |
公司出海不容易,或者说,搭一个海外的网站不容易,大家前期的防护一定要做好,不然就很容易直接被人冲了。