阿里公布年度外贸数据：每天有10亿美元采购需求 _中国经济网――国家经济门户
经济日报微信中经网微信
（责任编辑：韦伟）
财经关键词
&&&&中国经济网声明：股市资讯来源于合作媒体及机构，属作者个人观点，仅供投资者参考，并不构成投资建议。投资者据此操作，风险自担。
商务进行时
&&&&&&&&&&&&&&&&&&&&jQuery 滑动选取数值范围插件(仿阿里云选主机配置效果)
有时我们在页面上需要选择数值范围，如购物时选取价格区间，购买主机时自主选取CPU，内存大小配置等，使用直观的滑块条直接选取想要的数值大小即可，无需手动输入数值，操作简单又方便。
本文向大家介绍一款范围选择器插件jRange，它是基于jQuery的一款简单插件。本站之前有类似：jQuery+CSS使用滑块选取价格范围，其中不太好的地方是使用了jqueryui庞大的插件库，有兴趣的朋友可以看看。下面我们来看下插件jRange的使用。
首先载入jQuery库文件以及jRange相关的文件：jquery.range.css和插件：jquery.range.js
&script src="jquery.js"&&/script&
&link rel="stylesheet" href="jquery.range.css"&
&script src="jquery.range.js"&&/script&
然后在需要展示滑块选择器的位置放入以下代码：
&input type="hidden" class="slider-input" value="23" /&
我们使用了hiiden类型的文本域，设置默认值value，如23。
调用jRange插件非常简单，直接用下面的代码：
$('.single-slider').jRange({
scale: [0,25,50,75,100],
format: '%s',
width: 300,
showLabels: true,
showScale: true
插件jRange也提供了一些必要的选项设置来满足各种需求。
滑动范围的最小值，数字，如0
滑动范围的最大值，数字，如100
步长值，每次滑动大小
滑动条下方的尺度标签，数组类型，如[0,50,100]
showLabels
布尔型，是否显示滑动条下方的尺寸标签
布尔型，是否显示滑块上方的数值标签
滑动条宽度
是否为选取范围。4.4k 次阅读
标签：至少1个，最多5个
阿里云的服务 数据风控下面有项滑动验证, 适合有人机验证场景的应用接入.
所谓滑动验证, 是在需要进行人机识别时, 前端出现验证滑块, 通过拖动滑块到末尾, 实现验证. 如果阿里云认为此次验证风险稍高, 可能出现点击汉字的认证等, 如果风险太高, 验证会直接拒绝.
集成过程基本是按照
开通滑动验证服务之后, 阿里云控制台会给出前后端的示例代码, 其中appkey是根据用户不同分配的不通的key.
前端代码如下所示:
&!DOCTYPE html&
&meta charset="UTF-8"&
&title&示例-WEB版&/title&
&!-- 此段必须要引入 t为小时级别的时间戳 --&
&link type="text/css" href="http://g.alicdn.com/sd/ncpc/nc.css?t=7" rel="stylesheet"/&
&script type="text/javascript" src="http://g.alicdn.com/sd/ncpc/nc.js?t=7"&&/script&
&!-- 引入结束 --&
&!-- 此段必须要引入 --&
&div id="_umfp" style="display:width:1height:1overflow:hidden"&&/div&
&!-- 引入结束 --&
&!-- 表单示例，请替换成您的业务表单 --&
&div class="container"&
&form action="您提交的服务端地址" method="post"&
&div class="ln"&
&span class="h"&用户名：&/span&
&input type="text" name="username"&
&div class="ln"&
&span class="h"&密码：&/span&
&input type="password" name="password"&
&div class="ln"&
&div id="dom_id"&&/div&
&input type='hidden' id='csessionid' name='csessionid'/&
&input type='hidden' id='sig' name='sig'/&
&input type='hidden' id='token' name='token'/&
&input type='hidden' id='scene' name='scene'/&
&div class="ln"&
&input type="submit" value="提交"&
&!-- 表单示例结束 --&
&!-- 此段必须要引入 --&
var nc = new noCaptcha();
var nc_appkey = '你的appkey';
// 应用标识,不可更改
var nc_scene = 'other';
//场景,不可更改
var nc_token = [nc_appkey, (new Date()).getTime(), Math.random()].join(':');
var nc_option = {
renderTo: '#dom_id',//渲染到该DOM ID指定的Div位置
appkey: nc_appkey,
scene: nc_scene,
token: nc_token,
trans: '{"name1":"code0"}',//测试用，特殊nc_appkey时才生效，正式上线时请务必要删除；code0:通过;code100:点击验证码;code200:图形验证码;code300:恶意请求拦截处理
callback: function (data) {// 校验成功回调
console.log(data.csessionid);
console.log(data.sig);
console.log(nc_token);
document.getElementById('csessionid').value = data.
document.getElementById('sig').value = data.
document.getElementById('token').value = nc_
document.getElementById('scene').value = nc_
nc.init(nc_option);
&!-- 引入结束 --&
&!-- 样式示例，请替换成自己的样式 --&
background: #f5f5f5;
font-size: 14
line-height: 20
margin: 0;
padding: 0;
.container {
background: #
padding: 20
margin: 20
width: 400
padding: 5px 0;
display: inline-
.ln input {
border: solid 1px #999;
padding: 5px 8
&!-- 样式示例结束 --&
其中标记不可更改的地方就不要更改. 可以看到, 在验证通过之后, console会打印出session, sig, token等几个验证返回变量, 连同scene一起, 通过表单返回业务后台, 由后台调用阿里云滑动验证服务进行校验.
python后台方面, 首先需要
pip install aliyun-python-sdk-jaq
安装阿里云滑动验证的python sdkpython的后台代码大致如下:
# coding: utf-8
import requests
from aliyunsdkcore import client
from aliyunsdkjaq.request.v import AfsCheckRequest
from aliyunsdkcore.profile import region_provider
from app.libs.configure import config
region_provider.modify_point('Jaq', 'cn-hangzhou', 'jaq.aliyuncs.com')
clt = client.AcsClient(config.ALIYUN_OSS_ACCESS_KEY, config.ALIYUN_OSS_ACCESS_SECRET, 'cn-hangzhou')
def check_aliyun_captcha(session, sig, token, scene):
request = AfsCheckRequest.AfsCheckRequest()
# 必填参数：请求来源： 1：Android端； 2：iOS端； 3：PC端及其他
request.set_Platform(3)
request.set_Session(session)
request.set_Sig(sig)
request.set_Token(token)
request.set_Scene(scene)
result = clt.do_action_with_exception(request)
print result
这只是个简单示例, print出了返回结果. 这个返回结果是json序列化的string, 需要将其反序列化进行结果判定. 如果Data元素是true的话, 证明校验通过, 可以进行下面的业务逻辑.同样的, 这里还有一点没有处理, 就是do_action_with_exception的抛出ServerException的问题. 应当catch处理.
如果验证通过的话, 阿里云返回:
{"Data":true,"ErrorMsg":"success.","ErrorCode":0}
但只能验证一次, 第二次同样参数执行的话, 会返回:
{"Data":false,"ErrorMsg":"invalid sig parameter.","ErrorCode":400}
是为了防止暴力尝试等.
同时必须说明, 阿里云的这项服务我认为并不稳定, 集成中间出现了一直invalid sig的报错. 后来经与技术支持沟通才ok. 并且这块的文档友好程度等还比较欠缺.
另: 我还按照阿里云api文档(, , )的说明写了段代码, 不使用aliyun-python-sdk, 手动拼接请求.同样发现了很多问题.比如文档中有一段
这个签名值应当不是随便写的. 使用文档中要求的HMAC-SHA1签名算法, 无论是用python像如下这样书写:
from hashlib import sha1
import hmac
from base64 import b64encode
hashed = hmac.new('testsecret&', string_to_sign, sha1)
signature = b64encode(hashed.digest())
print signature
还是像如下用Java算签名:
import javax.crypto.M
import javax.crypto.SecretK
import javax.crypto.spec.SecretKeyS
import org.apache.commons.codec.binary.Base64;
public class HMACSHA1 {
private static final String MAC_NAME = "HmacSHA1";
private static final String ENCODING = "UTF-8";
public static byte[] HmacSHA1Encrypt(String encryptText, String encryptKey) throws Exception {
byte[] data=encryptKey.getBytes(ENCODING);
SecretKey secretKey = new SecretKeySpec(data, MAC_NAME);
Mac mac = Mac.getInstance(MAC_NAME);
mac.init(secretKey);
byte[] text = encryptText.getBytes(ENCODING);
return mac.doFinal(text);
public static void main(String[] args) throws Exception{
byte[] bytes = HMACSHA1.HmacSHA1Encrypt("string_to_sign", "testsecret&");
System.out.println(Base64.encodeBase64String(bytes));
string_to_sign用文档中给出的替换, 我的两段程序算出的是一致的, 但都跟文档中给出的不一致. 不清楚为何基础算法会不一致, 难道是文档不够新.
如果我用python如下根据api文档实现自己的后台请求方法的话:
import random
from urllib import quote
from hashlib import sha1
import hmac
import requests
from base64 import b64encode
import datetime
def utcnow_isostr():
dt = datetime.datetime.utcnow()
return datetime.datetime.strftime(dt, '%Y-%m-%dT%H:%M:%SZ')
def quote_ali(element):
return quote(str(element)).replace('+', '20%').replace('*', '2A%').replace('%7E', '~')
def build_afs_check_request(session, sig, token, scene):
m = dict()
m['Action'] = 'AfsCheck'
m['Format'] = 'JSON'
m['Version'] = ''
m['AccessKeyId'] = config.ALIYUN_OSS_ACCESS_KEY
m['SignatureMethod'] = 'HMAC-SHA1'
m['Timestamp'] = utcnow_isostr()
m['SignatureVersion'] = '1.0'
m['SignatureNonce'] = str(int(random.random()*1000000))
m['token'] = token
m['sig'] = sig
m['session'] = session
m['scene'] = scene
m['platform'] = 3
ks = m.keys()
query_list = list()
for k in ks:
query_list.append(k + '=' + quote_ali(m[k]))
string_to_sign = 'GET&%2F&' + '&'.join(query_list)
print string_to_sign
base_query_string = '&'.join(query_list)
hashed = hmac.new(config.ALIYUN_OSS_ACCESS_SECRET + '&', string_to_sign, sha1)
signature = b64encode(hashed.digest())
print signature
url = 'http://jaq.aliyuncs.com/?{}&Signature={}'.format(base_query_string, quote_ali(signature))
return url
def custom_check_aliyun_captcha(session, sig, token, scene):
url = build_afs_check_request(session, sig, token, scene)
resp = requests.get(url)
print resp.content
这么去请求的话会报Signature不一致, 果不出所料.
基于以上诡异的表现, 我觉得阿里云滑动验证作为外部服务并不友好或成熟. 更倾向于用自己做的一些验证码服务, 虽然会简单些, 更容易被攻破, 至少稳定, 提供的qps更高.
1 收藏&&|&&0
你可能感兴趣的文章
同出现了invalid sig问题，请问是如何解决的？
同出现了invalid sig问题，请问是如何解决的？
我给阿里云联系, 说了这个问题, 第二天什么都没干就好了, 他们的这个服务很诡异, 不是很敢用
我给阿里云联系, 说了这个问题, 第二天什么都没干就好了, 他们的这个服务很诡异, 不是很敢用
我跟著官方文檔去集成，服務端一直是回傳 900, 驗証失敗。請問是什麼問題？
我跟著官方文檔去集成，服務端一直是回傳 900, 驗証失敗。請問是什麼問題？
你可能感兴趣的文章
分享到微博？
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。您还没有登录，快捷通道只有在登录后才能使用。 还没有帐号？ 赶紧
阿里滑动验证如何取消二次输入验证码？
在线时间2小时
阿里滑动验证如何取消二次输入验证码？已经鼠标滑动到右边，却还有手动输入验证码，这个很烦，能不能只实现滑动不要二次输入？
在线时间2629小时
楼主您好，&&请问您是在哪个网址的登录框遇到需要多种验证的呢？&&如果是官方网站的，可能为了安全，是不允许关闭的喔。
Debian 是一个自由的操作系统 (OS)，提供您安装在计算机上使用。操作系统就是能让您的计算机工作的一系列基本程序和实用工具。
在线时间2小时
回 1楼dongshan8的帖子
是在我的网站安装后出现的情况，但是我关闭了站点内置的验证码后，更新了缓存，阿里滑动验证才没有出现二次验证的输入，直接滑动到右边就可以了。没有收到及时的回复，我就自己动手了，捣鼓了半天，才发现是这样的原因。
在线时间2629小时
回 2楼(莫贪) 的帖子
您好，&&感谢您选择和使用阿里云的“滑动验证插件”产品。&&您能更新帖子的状态，这很好。
Debian 是一个自由的操作系统 (OS)，提供您安装在计算机上使用。操作系统就是能让您的计算机工作的一系列基本程序和实用工具。
访问内容超出本站范围，不能确定是否安全
限100 字节
如果您提交过一次失败了，可以用”恢复数据”来恢复帖子内容
您目前还是游客，请
验证问题: 13 + 3 = ?
&回复后跳转到最后一页您还没有登录，快捷通道只有在登录后才能使用。 还没有帐号？ 赶紧
关于阿里滑动验证码
在线时间2小时
&一直没发现阿里的新产品 阿里滑动验证码 但是安装后才发现好多繁琐步骤不懂添加 &虽然阿里给了相关图文说明 但是对于只懂运作内容不懂修改代码的小白站长来说太难了&希望阿里能简化安装集成的流程 或者给小白一个更详细的论坛安装教程 视频更好&&&不知道介绍里给的代码是干什么用的 如果要集成到某个论坛页面 既然是做给论坛的 那么页面都是统一的 不能告知下文件路径给个样例吗&而且后台插件填写了自己申请的数值后点 确认修改 没有任何反映 也不跳转也不提示 点其它地方点回来又变成空的了&&&既然这哥插件作为阿里云商业的一个部署 而且在论坛发布了专属版 那么希望官方能把教程完善或者安装简化 小白话&&&在线等解决方案
在线时间1076小时
部署到discuz论坛的说明还是十分的详细的。你那里没看懂？
善用阿里云帮助文档。
在线时间2小时
回 1楼51干警网的帖子
已经联系上客服在线帮我处理 目前还没有解决
在线时间2小时
Re关于阿里滑动验证码
发现一个问题以及一处BUG
在线时间66小时
Re关于阿里滑动验证码
哪里有这个？我怎么没看到？
在线时间0小时
Re关于阿里滑动验证码
滑动 这块 如果提交参数后 验证失败 如何重置
在线时间0小时
回 1楼51干警网的帖子
滑动 这块 如果提交参数后 验证失败 如何重置
在线时间1076小时
回 6楼(新仔2) 的帖子
善用阿里云帮助文档。
访问内容超出本站范围，不能确定是否安全
限100 字节
如果您在写长篇帖子又不马上发表，建议存为草稿
您目前还是游客，请
验证问题: ECS是阿里云提供的什么服务？ 正确答案:云服务器
&回复后跳转到最后一页