增加 clicaptcha

README_CN.md

@@ -18,3 +18,5 @@
 
 
 
+
+

php/clicaptcha/README.md

@@ -0,0 +1,43 @@
+# clicaptcha
+这是一个基于PHP的jQuery中文点击验证码插件
+
+## 效果图
+![](https://i.loli.net/2019/07/24/5d37f5679236726997.png)
+
+## 原理
+
+（1）创建验证码图片 $clicaptcha->creat();
+
+	随机取4个坐标，指定坐标创建汉字合成图片，返回图片url，4个文字。
+	并设置session，客户端生成 cookie
+
+（2）验证 $clicaptcha->check($_POST['info'], false)
+
+	用户点击图片，得到4个坐标 +cookie 发送到服务器。
+	服务器通过 cookie 得到创建的4个坐标。
+	与发送过来的坐标位置对比，偏差不太大即返回成功，偏差太大返回失败。
+
+
+## 调用方式
+```html
+<input type="hidden" id="clicaptcha-submit-info" name="clicaptcha-submit-info">
+```
+```js
+$('#clicaptcha-submit-info').clickCaptcha({
+    src: '../clicaptcha.php',
+	success_tip: '验证成功！',
+	error_tip: '未点中正确区域，请重试！',
+	callback: function(){
+		//...
+	}
+});
+```
+```php
+//后端进行二次验证
+require('../clicaptcha.class.php');
+$clicaptcha = new clicaptcha();
+echo $clicaptcha->check($_POST['clicaptcha-submit-info']) ? '后端二次验证成功' : '后端二次验证失败';
+```
+
+## Vue 版
+[vue-clicaptcha](https://github.com/hooray/vue-clicaptcha)

php/clicaptcha/clicaptcha.php

@@ -0,0 +1,10 @@
+<?php
+	require('clicaptcha.class.php');
+	
+	$clicaptcha = new clicaptcha();
+	if($_POST['do'] == 'check'){
+		echo $clicaptcha->check($_POST['info'], false) ? 1 : 0;
+	}else{
+		$clicaptcha->creat();
+	}
+?>

php/clicaptcha/css/captcha.css

@@ -0,0 +1,75 @@
+#clicaptcha-box{
+	display: none;
+	width: 350px;
+	height: 290px;
+	padding: 15px;
+	border: 1px solid #b1b3b8;
+	background-color: #f5f6f7;
+	position: fixed;
+	z-index: 10000;
+	left: 50%;
+	top: 50%;
+	margin-left: -191px;
+	margin-top: -161px;
+	border-radius: 10px;
+	box-shadow: 0 0 0 1px hsla(0,0%,100%,.3) inset, 0 .5em 1em rgba(0, 0, 0, 0.6);
+}
+#clicaptcha-box .clicaptcha-img{
+	width: 350px;
+	height: 200px;
+	border: none;
+}
+#clicaptcha-box .clicaptcha-title{
+	font-family: 'Microsoft YaHei';
+	height: 40px;
+	line-height: 40px;
+	font-size: 14px;
+	text-align: center;
+	color: #333;
+}
+#clicaptcha-box .clicaptcha-title span{
+	font-size: 16px;
+	font-weight: bold;
+	color: #c00;
+}
+#clicaptcha-box .clicaptcha-title span.clicaptcha-clicked{
+	color: #069;
+}
+#clicaptcha-box .clicaptcha-refresh-box{
+	position: relative;
+	margin-top: 10px;
+}
+#clicaptcha-box .clicaptcha-refresh-line{
+	position: absolute;
+	top: 16px;
+	width: 140px;
+	height: 1px;
+	background-color: #ccc;
+}
+#clicaptcha-box .clicaptcha-refresh-line-left{
+	left: 5px;
+}
+#clicaptcha-box .clicaptcha-refresh-line-right{
+	right: 5px;
+}
+#clicaptcha-box .clicaptcha-refresh-btn{
+	display: block;
+	margin: 0 auto;
+	width: 32px;
+	height: 32px;
+	background: url(../image/refresh.png) no-repeat;
+}
+#clicaptcha-box .clicaptcha-refresh-btn:hover{
+	background-position:-32px 0;
+}
+#clicaptcha-mask{
+	display: none;
+	position: fixed;
+	z-index: 9999;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	opacity: 0.5;
+	background-color: rgb(0, 0, 0);
+}

php/clicaptcha/demo/action.php

@@ -0,0 +1,6 @@
+<?php
+	require('../clicaptcha.class.php');
+	
+	$clicaptcha = new clicaptcha();
+	echo $clicaptcha->check($_POST['clicaptcha-submit-info']) ? '后端二次验证成功' : '后端二次验证失败';
+?>

php/clicaptcha/demo/css/main.css

@@ -0,0 +1,6 @@
+#login{width:500px;padding:50px;border:1px solid #ccc;margin:10px auto;}
+.row{height:30px;line-height:30px;padding:5px 0;}
+.row .text{width:100px;float:left;}
+.row .input{width:350px;float:left;}
+.row .input input{width:200px;height:26px;padding:0;}
+button{width:100px;height:30px;}

php/clicaptcha/demo/debug.log

@@ -0,0 +1,16 @@
+[0919/182053.924:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0919/182053.925:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0919/182053.925:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0919/182053.925:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0919/182053.925:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0919/182053.925:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0919/182053.925:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0919/182053.926:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0919/182053.927:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0919/182053.927:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0919/182053.930:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0919/182053.930:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0919/182053.930:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0919/182053.930:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0919/182053.930:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0919/182053.930:ERROR:crash_report_database_win.cc(469)] failed to stat report

php/clicaptcha/demo/index.html

@@ -0,0 +1,42 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>clicaptcha在线演示</title>
+<link rel="stylesheet" href="../css/captcha.css">
+<link rel="stylesheet" href="css/main.css">
+<script src="jquery-1.8.3.min.js"></script>
+<script src="../clicaptcha.js"></script>
+<script>
+$(function(){
+	$('#sub').click(function(){
+		$('#clicaptcha-submit-info').clicaptcha({
+			src: '../clicaptcha.php',
+			callback: function(){
+				$('#form').submit();
+			}
+		});
+	});
+});
+</script>
+</head>
+
+<body>
+<div id="login">
+	<form action="action.php" method="post" id="form" name="form">
+		<div class="row">
+			<div class="text">用户名：</div>
+			<div class="input"><input type="text"></div>
+		</div>
+		<div class="row">
+			<div class="text">密码：</div>
+			<div class="input"><input type="password"></div>
+		</div>
+		<div class="row">
+			<button type="button" id="sub">提交</button>
+		</div>
+		<input type="hidden" id="clicaptcha-submit-info" name="clicaptcha-submit-info">
+	</form>
+</div>
+</body>
+</html>

php/clicaptcha/font/fonts.txt

@@ -0,0 +1 @@
+SourceHanSansCN-Normal.otf