我们的验证码被人盗刷,各种防盗机制用了个遍,可是道高一尺魔高一丈。迫不得已用了阿里验证码
引入阿里验证码的好处
通过对用户的行为数据、设备特征与网络数据构建多维度数据分析,使用业界先进的风控引擎结合“规则+AI”模型,对风险设备使用、模拟行为、暴力重放等攻击进行综合实时风控判决,解决企业账号、活动、交易等关键业务环节存在的欺诈威胁,降低企业经济损失。
用户体验好,简单的滑动就进行验证了
引入阿里验证码的坏处 收费,具体价格参照文档的收费说明
官方文档:https://help.aliyun.com/product/28308.html?spm=a2c4g.11186623.6.540.3a057a5cjCWJxm
实现思路
前端(FE): 引入js资源包,复制文档上的html和js代码(可根据自己业务灵活修改)
调用服务端验签接口进行验证
服务端返回验签失败可让用重新拖动滑块试试(可以使用nc.reset()方法)
服务端(RD):下载sdk https://help.aliyun.com/document_detail/122000.html?spm=a2c4g.11186623.6.564.156c2bc1H1mOrF
收到参数后传给sdk进行验签
验签成功再走业务代码的逻辑
实现过程
1.新增配置获取appkey和scene,把appkey放入项目配置文件
2.获取AccessKeyId和Access Key Secret放入项目配置文件
3.引入所需的JS资源。
- 页面的主要访问来自中国大陆地区用户时,使用以下代码:
<script type="text/javascript" charset="utf-8" src="//g.alicdn.com/sd/nch5/index.js?t=2015052012"></script>
- 页面的主要访问来自非中国大陆地区用户时,使用以下代码:
<script type="text/javascript" charset="utf-8" src="//aeis.alicdn.com/sd/nch5/index.js?t=2015052012"></script>
说明:其中,t字段值建议设置为小时级别的时间戳。随实际时间更新,确保所引入的JS资源不会被浏览器长时间缓存,以免无法享受阿里云对JS资源的动态更新。
4.放入js(scene是新增的配置项里的scene)callback是完成滑动操作后的回调函数,把传给回调函数的参数传给服务端进行验签
var nc_token = ["CF_APP_1", (new Date()).getTime(), Math.random()].join(':');
var NC_Opt =
{
//声明滑动验证需要渲染的目标元素ID。
renderTo: "#your-dom-id",
//应用类型标识。它和使用场景标识(scene字段)一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在人机验证控制台的配置管理页签找到对应的appkey字段值,请务必正确填写。
appkey: "CF_APP_1",
//使用场景标识。它和应用类型标识(appkey字段)一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在人机验证控制台的配置管理页签找到对应的scene值,请务必正确填写。
scene: "register",
//滑动验证码的主键,请勿将该字段定义为固定值。确保每个用户每次打开页面时,其token值都是不同的。系统默认的格式为:”您的appkey”+”时间戳”+”随机数”。
token: nc_token,
//滑动条的宽度。
customWidth: 300,
//业务键字段,可为空。为便于线上问题的排查,建议您按照线上问题定位文档中推荐的方法配置该字段值。
trans:{"key1":"code0"},
//通过Dom的ID属性自动填写trans业务键,可为空。建议您按照线上问题定位文档中推荐的方法配置该字段值。
elementID: ["usernameID"],
//是否自定义配置底层采集组件。如无特殊场景,请使用默认值(0),即不自定义配置底层采集组件。
is_Opt: 0,
//语言。PC端Web页面场景默认支持18国语言,详细配置方法请参见自定义文案与多语言文档。
language: "cn",
//是否启用。一般情况,保持默认值(true)即可。
isEnabled: true,
//内部网络请求的超时时间。一般情况建议保持默认值(3000ms)。
timeout: 3000,
//允许服务器超时重复次数,默认5次。超过重复次数后将触发报错。
times:5,
//用于自定义滑动验证各项请求的接口地址。一般情况,请勿配置该参数。
apimap: {
// 'analyze': '//a.com/nocaptcha/analyze.jsonp',
// 'get_captcha': '//b.com/get_captcha/ver3',
// 'get_captcha': '//pin3.aliyun.com/get_captcha/ver3'
// 'get_img': '//c.com/get_img',
// 'checkcode': '//d.com/captcha/checkcode.jsonp',
// 'umid_Url': '//e.com/security/umscript/3.2.1/um.js',
// 'uab_Url': '//aeu.alicdn.com/js/uac/909.js',
// 'umid_serUrl': 'https://g.com/service/um.json'
},
//前端滑动验证通过时会触发该回调参数。您可以在该回调参数中将请求标识(token)、会话ID(sessionid)、签名串(sig)字段记录下来,随业务请求一同发送至您的服务端调用验签。
callback: function (data) {
window.console && console.log(nc_token)
window.console && console.log(data.csessionid)
window.console && console.log(data.sig)
}
}
var nc = new noCaptcha(NC_Opt)
//用于自定义文案。详细配置方法请参见自定义文案与多语言文档。
nc.upLang('cn', {
_startTEXT: "请按住滑块,拖动到最右边",
_yesTEXT: "验证通过",
_error300: "哎呀,出错了,点击<a href=\"javascript:__nc.reset()\">刷新</a>再来一次",
_errorNetwork: "网络不给力,请<a href=\"javascript:__nc.reset()\">点击刷新</a>"
})
5.服务端引入SDK https://help.aliyun.com/document_detail/122000.html?spm=a2c4g.11186623.6.564.558c51b3A4Qm5I
6.服务端收到前端传的参数后
/**
* 阿里云滑动验证码签名验证
*
* @param $data 前端传的的参数
*
* @return \SimpleXMLElement
*
*/
public function checkSignAli($data){
//相关的配置文件
$ali = C('ALIOSS');
//客户端ip
$ip = get_client_ip();
$csessionid = $data['csessionid'];
$sig = $data['sig'];
$scene = $data['scene'];
$token = $data['token'];
//阿里的sdk
$iClientProfile = \DefaultProfile::getProfile("cn-hangzhou", $ali['id'], $ali['key']);
$client = new \DefaultAcsClient($iClientProfile);
\DefaultProfile::addEndpoint("cn-hangzhou", "cn-hangzhou", "afs", "afs.aliyuncs.com");
$request = new Afs\AuthenticateSigRequest();
$request->setSessionId($csessionid);
$request->setToken($token);
$request->setSig($sig);
$request->setScene($scene);
$request->setAppKey($ali['appkey_pc']);
$request->setRemoteIp($ip);
$result = $client->getAcsResponse($request);
//result->Code为返回的验签结果(100成功,900失败)
return $result->Code === 100 ? true : false;
}
7.签名校验成功才可发送验证码,每次滑动生成的签名只能使用一次,从而防盗