1. 说明:在laravel如果前后端分离,则不能在框架中使用验证码session为了保存和验证验证码是否正确,我在网上找了很久,终于找到了解决办法;
2.原文档地址:https://segmentfault.com/a/1190000016764250?utm_source=tag-newest;
3.1.安装:
composerrequiremews/captcha
3.2.找到config/app.php下的providers,添加以下代码
\Mews\Captcha\CaptchaServiceProvider::class,
3.3.找到config/app.php下的aliases,添加以下代码;
'Captcha'=> Mews\Captcha\Facades\Captcha::class,
4.发布配置文件;
phpartisan vendor:publish
之后就可以了config/captcha.php
配置验证码
return [ 'default' => [ 'length' => 5, 'width' => 120, 'height' => 36, 'quality' => 90, ], // ... ];
5. 正常使用session,我之前写过文档,感兴趣的小伙伴可以查找下我之前写的文档;
6. php 接口返回图形验证码:
public function getCodeImage() { ///输入二维码图片路径 return [ 'code' => 101, 'message' => 要求成功, 'result' => app('captcha')->create('default', true) ]; }
返回结果:
{ "code": 101, "message": "请求成功", "result": { "sensitive": false, "key": "$2y$10$20a0XmywfMWedCV6GfFK2.EF0OaGtAiBTUkorbOAjqUqKoGLBhsBa", "img": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAAkCAYAAABCKP5eAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAVkElEQVR4nI1be4xcV3n/nfu c2f2aXvX60e8fmYd24lJIAEBVROVtqCqSdUWqaAWtWolIH2AkCgqIAqtSiXKozRIBdpIFWpFVUUtaoQKSh9JeAViJ3ZiJ vHrl/rtb2PmdmZO/d9 sfsd a7Z 6WHmm1M/eex3e 5 /7zhmxtLQksdmk7H8UQsC2bdRqNdi2DdM0IYQA7yeEUM klMjzHEVRDL1L0xRhGKLb7SJJEnieh7GxMXieB9M0EUURer0e0jRFlmVI0xRFUcAwDDWPlFL9ZVmGbreLNE1hWRYcx4FpmoqOoigAAKZpwjRNtSd9b7ZtI8sy5Hle2geNp8/0jvZGdNF89ByA4gGNof macIwDBiGgaIokOe5 k77okZ75nunvvw9rUU88DxP8ZT4lGUZLLBmGAZM04Rt27AsC4vNx9W7I1NfG1qcE8WVgL nTeR5jjzP1eJpmiLPc/Wf/miMLhS juu6sCxL0aszhJSMM1AXItHC90Fr0HOuIJzBfBw953vla lCI2HzebmQqR/NSwql84TvO01T1YcbpGmaEGTBQghYlgXbtuG6LkzTRFEUSqMX1j8Ivc3t/LtK7dcZnuc5er0eut0uhBBwXVdpc5IkStv4ePqsC5ivQ40LlFuUzjgubC483reqD32vmpcsrMqr0TNusXw9LmBOt25ItDc nuRVFAXSNIVpmvA8D67rYvEP00G/GzduSHJnjuMo90WExXGMJEmQpimSJEEYhvA8D9u3b8eV1u8PCX3/xFeUe TEcKsBgDiOS655KwZxIejucSsh0jrEfJ2hnGFkAXwM9bMsa0iwAIbcuO41OC26m9Xppf6cB/p aSwZHgBYlgXP85CmKRb ICnJYO6rIwMXTRPwzcRxrAhIkgS9Xg9FUSgrIyKPTH2t9D3Pc1xe 8CQ0A/v KqKfdQ3jmOkaao2TzGlSmj0TI9tpDi8P7cELhQ9tPAYq8dAPlYfozfdxXOh6nvg P063PxfXF37rourn4o3 ydA gCAA59pVZyzxwLWHwD5JJpUdu2leVR7LNtWwEbYhIRk2UZpr3PlYCMEALzt39PbeLu6a rcVmWlWIlt3BilGX1YUJVjP /GE/aTxslS9GZzNfS3SUPGdR0BdqKDj3287H0jFy3jmn4PBufHlGfm8iVdZJA bxcWUzT7FswCYaQKwdZZFm0EYrRpmkqiycBZFmGMAzR6XQghIDneWg0GjAMA7uCL8AwDPi r1x9FEVI07QElOg/Z4SUEo7jwHEcBcSqgBExhjNMB39cs6vAoh5biWk89tE7Po/e9Hk4naTIPLYS3pFSovOZ0dJc9U 0lHGNjY0pF03jycCUS2aZheM4sHTrIX9PjHIcB0DfIm52I5y7dgfX19to9SI4poEDOybxln0zmPRdZcVxHCOKIhRFAd/3FaOp0Vo6AibCCSzxlIMzvIqZutC2cvE6aKlypzzkcIWJYgOOXSh EH3krdI0VWFHp7FKIePPbkOsKUfw8ab63OfBYH6OJ/I8V3Gb tKzLMtUpmFxtEzgiLvls8ur IcXz H5hSWs93Ry s0UAo8dP4gPv/mYigFxHCsGjIyMwHVdxTzyBDpI0QVGG I5Nh9T5bIty1Lhg6de1M yLEgpsdpycPbiCGwLePsb1odiNTGNnq00HXzr2WnMbOvh MEWdm6LFI2Ug4ZhWBIwVxbDMBB/dluJb97HVpUHrPII9Jl7OQAqzaR5ydsahoE0TdHr9RRtFtdocoWGYeBmu4uPPv0cfnDlZqVQeculxL cuYDldgef//kHlVBqtRp831funMd3ro06Q i5zqQ7sgMPNmrChiEG1kf066GF3Cv1GcRPge/8cBu6PQtCSNx7aB312sDKSEG4h7l8owYpBW7cqeHQ3m4J4RZFgTiOS643 cvtQ3zyPraqpUqi0rqJXjI43/fheZ5ak5Q0SZJSaKXwWhSF4oVFHbiAhRB4zz9 G9eaGz9VuLw9v3gTz169jYf3z6h8mhiupz3cBW8Vr7iFvlos4yJWAAC7xCjeaO4tKQjfpN509y0EcO/hDXz/5XFIKfDyhVG89b511Z nOtQWlgIAgGUW2DfTU sYhoEsy7D6cQ ADaDfz/3jlZIX2py5MtXja/HnruvC9334vg/HcVTOS2GB9k775tU7WteiOMN9fF4UCJMUVW2y5mEy8HG9uYEwzYbef v8An7h7n2qbMaZRNpOuS/XPo4BqJE7vihXcFGuqOd1uFsyh1wyuWc9DaH552ZDnHptBFFsYv5KgPvn2gj8YTQOALfXbHTCvivdN9ODYxtofape6jP6qU4po5DSUHsj2jgI1BWennGDI6BK3ieKIuR5rgzR9/3S/qSUpVKvisEAFBID i7qE 94M/7oX/8LANBwHfzOg8fwzqMHcHj7OIqiQBjH O1vfhcvXFsubfTMrTVluTQvLUogrNfrIQxDJEmiXLgeW2nzV QazuEWarAhINBFgpq0FK06c/hnnYHk9qSUsMwcJw528MKro8gLgZfn63jziXalgJ0vOXg3NsHPGaD1dB3jnw41QFhG01WVJz2 8rCRL/wE8vZloD4JOXUIYmpWZSt8H1xpefGEBMxTvTiOYVF8pMG0 KPHD6GTpLi8so73P3QCk40AXBlkluHdx/cPCbjZi7GRZpjYdCEEuHiliJRpk4Ah5ErtJjZwRizDEAInsQs/wBUAgFdYyOVwukSbrAJMJAyeqszNtvHSfANJauDcQh0nDrbgucVQqvLvDzbQ7Znw3By/ a5lGIZQoJRjCS5wTg9vtD4PA0VRQC6dB7IYiNooVhZgbX fEi7V7Mnr0XeuRBxU0iFKnucDAfPUhJj03vuPllAt16JbrQ2shdEQgwHg0moLE7WB 7AsSwlSCIEgCFCr1RCGYaWlEaB6yVgCBHASu DCQoF n4bhwRIDza5KlaoYTMpDz2xL4rEXB1abnW6gg378JOtZbQfoPtNX7IN7IpjmIK2sQvPAcAznHoXcNj3L8xxyY6UvXGq2i8bktMpoqL5ANWcOWDlfyTv2ej21viWlVL6dAnZRFHBdV XAJKjvLy7hP15fxH9euIqbG2GlcAHg0koTD yeUhugOQjdOY6jNkiHDRyIrRZdnBJLkAI4gWnMiBHclH1BWDDgGfaQZZB1EkNp0/zUqCiKUmUIAOSHVvHUf88iyw3YVoFffXixlHYs3AhU3 OH /xJ0xSPf/Bp/PWXf3HITXJD0AEV8XGomtZcKtHkbL rdCBDuS0wOAYl6 ZrkPJQeATQF3C73UYYhgpmJ0mCer2uhP3M/CI 9z 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"
}
}
注释:result.img 返回的是base64的格式图片路径;之后前端需要把验证码和key一直发送给后端,key是与图片一起绑定数据,(base64可以直接放在img的src里面,前端分情况有的可能需要转换)。
7. 后端验证验证码是否正确(验证的方式有两种):
第一种:
$captcha = $request->input('captcha'); //验证码
$key = $request->input('key'); //验证码
if (!captcha_api_check($v_code, $key)){
return [
'code' => 104,
'msg' => '验证码错误'
];
}else{
return [
'code' => 101,
'msg' => '验证码正确'
]
}
第二种:
$data = $req->all();
$validator = Validator::make($data, [
'key' => 'required',
'captcha' => 'required|captcha_api:' . $req->input('ckey')
]);
if (!$validator->fails()) {
return [
'code' => 104
'msg' => '验证码错误',
];
}else{
reurn [
'code' => 101,
'mag' => '验证码正确'
];
}
8.总结 :大致过程就是 首先前端请求接口拿到验证码图片,然后前后在吧key与用户输入的值一起发送到后端进行验证。