文档 » 验证码

概览

本文档将教您在您的网站上显示并自定义ProjectPoi组件。从站长的角度来看,ProjectPoi和传统的验证码类似(如谷歌的reCaptcha)。

ProjectPoi组件运行在用户的浏览器上,会生成一个Token并和其他表单信息一起提交,你可以在服务器后端通过HTTP API验证这个Token。

与其他验证码不同,用户不需要证明他们是人类,而是通过进行大量的计算来验证,因为需要占用计算资源,所以可以有效地防止垃圾信息骚扰

集成

如果想要把ProjectPoi验证码集成到你的网站上,你要首先加载 captcha.min.js 到你的页面上,然后放置<div class="projectpoi-captcha"> </div>来显示验证码

如果成功加载JS,div元素内容将会被替换成验证码

<form action="?" method="post">
	<!-- other form fields -->

	<script src="https://ppoi.org/lib/captcha.min.js" async></script>
	<div class="projectpoi-captcha" data-hashes="1024" data-key="SITE_KEY">
		<em>Loading Captcha...<br>
		If it doesn't load, please disable Adblock!</em>
	</div>

	<input type="submit" value="Submit"/>
</form>

当验证完毕之后,会自动生成一个token,并以projectpoi-captcha-token参数和其他内容一起被发送到服务器

在服务器端,你可以通过使用HTTP API /token/verify 来验证token是否正确

curl -X POST \
	-d "token=<projectpoi-captcha-token>" \
	-d "hashes=1024" \
	-d "secret=<secret-key>" \
	"https://api.ppoi.org/token/verify"

# {"success": true, "created": 1504205981, "hashes": 1024}

Hash数量会分别在服务端和客户端被验证一次,以防止用户作弊或绕过

参数

你可以通过修改或添加data-属性来指定以下参数,标了*号的是可选参数

data-key 你的Site Key,参考 设置 - 站点.
data-hashes 需要计算的Hash数量,因为我们的矿池难度为128,所以数量必须是128的倍数
*data-autostart (可选)是否自动开始计算,可选值为 true|false 默认为 false(不开启)
*data-whitelabel (可选)是否隐藏ProjectPoi Logo和“这是什么”链接
*data-callback (可选)当验证完成时的JS回调函数名
*data-disable-elements (可选)验证完毕前需要禁用的元素,比如“提交”按钮。支持CSS选择器。

完整例子

<form action="?" method="post">
	<!-- other form fields -->

	<script src="https://ppoi.org/lib/captcha.min.js" async></script>
	<script>
		function myCaptchaCallback(token) {
			alert('Hash已达设定值. Token 为: ' + token);
		}
	</script>
	<div class="projectpoi-captcha" 
		data-hashes="1024" 
		data-key="SITE_KEY"
		data-autostart="false"
		data-whitelabel="false"
		data-disable-elements="input[type=submit]"
		data-callback="myCaptchaCallback"
	>
		<em>加载验证码...<br>
		If it doesn't load, please disable Adblock!</em>
	</div>

	<!-- submit button will be automatically disabled and later enabled
		again when the captcha is solved -->
	<input type="submit" value="Submit"/>
</form>

PHP后端验证例子

$post_data = [
	'secret' => "SECRET-KEY", // <- Your secret key
	'token' => $_POST['projectpoi-captcha-token'],
	'hashes' => 1024
];

$post_context = stream_context_create([
	'http' => [
		'header'  => "Content-type: application/x-www-form-urlencoded\r\n",
		'method'  => 'POST',
		'content' => http_build_query($post_data)
	]
]);

$url = 'https://api.ppoi.org/token/verify';
$response = json_decode(file_get_contents($url, false, $post_context));

if ($response && $response->success) {
	// All good. Token verified!
}

更多信息(如错误代码等)请参考 HTTP API文档.

© 2017 PPoi.org – FAQToS隐私政策