API 交互中怎么作好图片验证码？

前言

在传统的 Web 开发过程当中，处理图形验证码很简单，只须要在后台用随机字符串生成一个图片，将验证码内容放进 Session 便可，用户提交表单时从 Session[1] 取出判断便可。

可是现现在，愈来愈推崇 API 交互，无状态，在 Session 这一块，虽然默认配置是不支持了，可是仍是有不少曲线救国的方法。

基于 Session 实现

在 API 开发中，咱们也能够给前端签发 SessionID ，而且经过 PHP 的内置方法，来实现这一切。
好比 咱们与前段约定，当在请求中包含有 X-Session-Id ，且不为空时，表示这个会话已经注册过 SessionID ，不然就颁布一个 SessionID 并返回在 Response Header 中的 X-Session-Id 让前段记录这个 SessionID ，下面简单实现一下。

// code_session.php
session_start();
// 这里假设已经经过 Header 获取到了 SessionID，并保存到了 $sessionId 变量中。
// 当 SessionID 不存在，或者 为空 则建立新的 SessionID 。
if(!isset($sessionId) || empty($sessionId)){
    $sessionId = session_create_id();
    // 由于前台尚未 SessionID ，因此下发一个，通知前端保存。
    header('X-Session-Id: '.$sessionId);
}
// 设置当前会话的 SessionID 。
session_id($sessionId);
// 这里咱们就能够自由的读写 Session 了。
// 生成验证码
$code = mt_rand(1e3 ,1e4-1);
// create_image 请自行实现 或者使用现有的图形验证码库生成。
$image = create_image($code);
// 存储进去 Session
$_SESSION['code'] = $code;
// 输出一张图片
$image->output();

上面基本实现了生成图片，前端须要根据 只须要再提交表单时，在 headers 中带上 X-Session-ID 便可。

// code_session_validate.php

session_start();
// 这里假设已经经过 Header 获取到了 SessionID，并保存到了 $sessionId 变量中。
// 当 SessionID 不存在，或者 为空 则建立新的 SessionID 。
if(
  !isset($sessionId) 
|| empty($sessionId) 
|| !isset($_POST['code']) 
|| empty($_POST['code'])
){
    // 由于没有提交 SessionID 过来 这个确定就是不成立的了，因此直接终止便可。
    exit;
}
// 设置当前会话的 SessionID 。
session_id($sessionId);
if($_POST['code']!=$_SESSION['code']){
    // 验证码错误啦
    exit;
}
// 验证经过了就删掉 code，
unset($_SESSION['code']);

上面使用 Session ，咱们基本就实现了一个简单的验证，并且是基于 API 交互的，不依赖浏览器 cookie 。当咱们须要一些复杂的好比共享 Session ，这些就不在本文的讨论范围了(其实如今也已经超纲了)

基于客户端主动签发

接下来的方法是无状态的，可是须要用到 Redis 。这里使用 PHPRedis 这个扩展来处理。

在大多数状况下，咱们并不须要像上面使用 Session 那样来建立过多的 Session ，形成有一些资源浪费，固然，Session 能够作的不止这些，下面咱们就用 Redis 来作一个客户端主动签发 的图片验证码。

理论原理

由客户端本地生成随机字符串，而后拼接在获取验证码地址的后面，后端截取客户端生成的随机字符串，用此做为验证凭证放入 Redis 中去，再客户端提交时须要带上先前生成的随机字符串一同进项验证。

// code_client.php
$salt = 'wertyujkdbaskndasda';
if(!isset($_GET['sign'])){
    // 客户端没有提供签名，中止执行
    exit;
}
// 用户传来的一切数据都是不可靠的，咱们须要对其加盐后执行 md5
$sign = md5($_GET['sign'].$salt);
// 拼接上签名做为 Redis 的 key
$key = 'code:'.$sign;
// 链接 Redis 
$cache = new \Redis();
// 生成验证码
$code = mt_rand(1e3,1e4-1);
// 保存验证码到 Redis 并设置2分钟的有效期。
if($cache->exists($key)){
    // 这个 Key 已经被占用了，这里先中止。
    exit;
}
$cache->set($key,$code,60*2);
// 建立图片并返回
$image = create_image($code);
$image->output();

好了，接下来验证一下。

// code_client_validate.php
$salt = 'wertyujkdbaskndasda';
if(
!isset($_POST['sign'])
|| !isset($_POST['code']) // 没有提交验证码过来。
|| !empty($_POST['code'])
){
    // 客户端没有提供签名，中止执行
    exit;
}
// 用户传来的一切数据都是不可靠的，咱们须要对其加盐后执行 md5
$sign = md5($_POST['sign'].$salt);
// 拼接上签名做为 Redis 的 key
$key = 'code:'.$sign;
// 链接 Redis 
$cache = new \Redis();

if(!$cache->exists($key)){
    // 根本没有这个 key
    eixt;
}

if($cache->get($key)!=$_POST['code']){
    // 验证码错误
}

// 验证经过了就删除

$cache->del($key);

看着是否是要复杂点儿，甚至还用上了 Redis ，虽然看着不咋地，可是他也实现了咱们想要的，不过这个也不算是太好的方案，并且，还要考虑客户端字符串不够随机的状况，接下来咱们改变一下方向，换成服务端签发。

基于服务端签发

刚刚的是基于客户端签发的实现，下面来提供另外一种思路，可是大致上，这个是差很少的哈都。

理论原理

一样是签发 Sign ，只不过此次由服务端来签发，而后将 Sign 经过 Header 发送给客户端，客户端须要先取到图片资源，注意这里返回的应该是一个合法的二进制流，而后从 header 中取出 Sign ，同时展现给用户。

// code_server.php
$cache = new \Redis();
$salt = 'wertyujkdbaskndasda';
function generateSign(){
    global $cache,$salt;
    $sign = md5(mt_rand().$salt);
    // 拼接上签名做为 Redis 的 key
    $key = 'code:'.$sign;
    if($cache->exists($key)){
        // 是的 你么有看错，就是若是生成的 Sign 已存在，就进行递归，直到生成出一个不存在的。
        return generateSign();
    }
    return $key;
}
// 链接 Redis 
$key = generateSign();
// 生成验证码
$code = mt_rand(1e3,1e4-1);
// 保存验证码到 Redis 并设置2分钟的有效期。
$cache->set($key,$code,60*2);
// 建立图片并返回
$image = create_image($code);
// 哈哈 要剃掉前缀哟
header('X-Captcha-Sign: ' . str_replace('code:','',$key));
$image->output();

看起来几乎没有变化，只是生成 Sign 的方式变了一下，可是，这样搞的话，前端同窗可能就不爽了，他们要先获取这个资源和 headers 中的 X-Captcha-Sign 再 show 到界面上，固然 能够直接将结果 base64 或者 直接用用二进制流生成位图显示都是能够的，咱们只是须要能够验证，验证方法直接使用上面的便可。

特别注意

当你使用 ajax 获取这个资源是，若是你的业务涉及到了跨域，你还须要在响应头设置 Access-Control-Expose-Headers - HTTP | MDN，不然 ajax 没法获取自定义的响应头。。

header('Access-Control-Expose-Headers: X-Captcha-Sign');

总结

看了这三种解决方案，基本都能知足咱们的需求，可能还有人想到了另外一种方案。提供一个 json 接口名，在后台生成图片而后保存起来，返回 url 和 sign 给前端，这样就行了，可是这样作，咱们的资源并不太可控，会形成必定的资源浪费，这里我并无考虑 这种方案。

文中所提到的一些知识都是对一些基础知识的应用，文章中的代码是写文章直接敲的，若是有排版错误或者逻辑错误，请不吝赐教。

文中所用到的 Redis 为 PHPRedis 扩展。至于验证码图片生成能够用 gregwar/captcha - Packagist 来作哟。

以上只是我我的的一些理解，若是你有更好的方案，不妨一块儿分享。

参考

PHP: Sessions - Manual

[注1] 本文中所提到的 Session 为一种技术标准和和咱们常说的经过浏览器自动传递 Cookie 交互中的 Session 有必定概念却别，这里只是本身手动实现了 SessionID的传递 ，可是始终保持 Session 的直译语义 “会话”。