README

要求：php >= 5.4, jquery > 1.8 | 最新版本 2.0.2

这是一个验证码系统，用户可以重新创建棋盘上棋子的位置（非棋类用户）或者将棋子放在能给出将军的位置来解决问题（仅限棋类用户）。还有一个没有js的备用方案，主要作为未来迭代的占位符；不要使用它。Chesscaptcha是为了娱乐而构建的，它是一个正在进行中的项目，所以请随意提交pull请求并贡献！

在这里查看演示这里。

📚 Laravel + Chesscaptcha 教程这里.

📚 Chess captcha + 表情符号这里.

由 @elioair 创建 | 推特: @elioair

使用的库

实现

通过 Composer

composer require elioair/chesscaptcha

Composer 完成导入包后

您可以删除 /vendor/elioair/chesscaptcha/examples 目录
将 /vendor/elioair/chesscaptcha/assets 目录或其内容放置到您的项目中合适的位置。注意图像文件同时由 js 客户端和 php 服务器端使用。
在 /vendor/elioair/chesscaptcha/src/ChessCaptcha/BoardImageCreator.php 中修复图像路径

直接克隆仓库

克隆仓库，然后通过访问 /examples 目录立即查看其工作方式。您可能需要在 src/ChessCaptcha 目录中类文件的相关类文件中包含 require_once。

快速提示：运行 composer install，然后运行 composer dump-autoload --optimize 并包含加载器。

工作示例： /examples/chesscaptcha-example.php

PHP 配置

<?php
// The array that contains the configuration for the php side
  $config = [
    'divId'=>'chesscaptcha',
    'whitesquare'=>'#f0d9b5',
    'blacksquare'=>'#b58863',
    'matemode'=>'no', // yes or no
    'nojsfallback'=>'no', // yes or no; activate the fallback in case js is disabled
    'titleoverride'=>'Copy the position below', // text override
    'titlemateoverride'=>'Mate-In-One', // text override
    'helpoverride'=>'Drag the pieces into the board to copy the given position. To remove a piece drag it out of the board.', // text override
    'startoverride'=>'Start', // text override
    'clearoverride'=>'Clear', // text override
    'pieceStyle'=>'wikipedia', // the name of the piece style to use or 'random', default is 'wikipedia'
  ];

  require_once("../src/ChessCaptcha/ChessCaptcha.php");
  $chesscaptcha = new \ChessCaptcha\ChessCaptcha($config['whitesquare'], $config['blacksquare'], $config['matemode'], $config['nojsfallback'], $config['pieceStyle']);
?>

HTML

<form ...>
  ...
  <!-- The #chesscaptcha div where the captcha will be rendered. If needed you can change the # in the $config array -->
  <div id="chesscaptcha"><?php if($config['nojsfallback'] == 'yes'){ echo $chesscaptcha->noJsHtml($config['pieceImages']);}?></div>

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

javascript + js 选项对象

<script>
// The object containing the configuration for the js side
var chessCaptchaParams = {
    cc_divId: '<?php echo $config['divId'];?>',
    cc_mateMode: '<?php echo $config['matemode']?>' === 'no' ? false : true,
    cc_whiteSquare: '<?php echo $config['whitesquare'];?>',
    cc_blackSquare: '<?php echo $config['blacksquare'];?>',
    cc_titleOverride: '<?php echo $config['titleoverride'];?>',
    cc_mateTitleOverride: '<?php echo $config['titlemateoverride'];?>',
    cc_helpOverride: '<?php echo $config['helpoverride'];?>',
    cc_startOverride: '<?php echo $config['startoverride'];?>',
    cc_clearOverride: '<?php echo $config['clearoverride'];?>',
    cc_sideToPlay: '<?php echo $chesscaptcha->chessCaptchaFenCode[2]; ?>',
    cc_challenge: '<?php echo $chesscaptcha->chessCaptchaChallenge; ?>',  // The image of the position
    cc_matechallenge: '<?php echo $chesscaptcha->chessCaptchaFenCode[0];?>',  // The fen code of matemode position
    cc_pathtoimg: '../assets/img/pieces',
    cc_piecestyle: '<?php echo $chesscaptcha->chessCaptchaPieceStyle;?>',
};
</script>
<script type="text/javascript" src="../assets/js/chesscaptcha.js"></script>

如果需要ajax验证，请在此处添加并配置它

<script type="text/javascript" src="../assets/js/chesscaptcha-ajax-validation.js"></script>

验证

从 POST 请求中获取 chesscaptchaposition 并将其输入到验证方法中。 $validate = \ChessCaptcha\ChessCaptcha::validate($inputFen, $noJs, $colorTolerance); 更多信息请参阅 src/chesscaptchavalidate.php 文件。

进一步配置

查看 boardimagecreator.php 以获取图像的设置。

问题

当设置为从底部开始时，位置未故意更新。 请勿在 fen 数组中将初始位置作为 fen 字符串。
在某些平板电脑上，当放大时，棋子放置不正确。

待办事项

添加对每页多个实例的支持。

常见问题解答

1. 如何更改显示的位置？

编辑 src/fengenerator.php 中的 $givenFen 数组（简单模式）和 $givenMateInOne（将军模式）。

2. 棋子没有显示或者没有显示棋盘图像。

请确保您有正确的棋子图像文件的路径。例如，boardimagecreator.php 中的 $pieceImageDir 属性和 $config['$pieceImageDir']。

3. 如何使检查忽略棋子颜色？

将 true 作为 Chesscaptcha::validate 方法的第三个参数，以使比较不受颜色影响。

许可证

在 MIT 许可证下分发

elioair / chesscaptcha

维护者

详细信息