刮刮卡交互验证码(Scratchcard-Captcha)是阿里集团推出的第二代行为验证码产品,它需要用户与页面上刮刮卡UI组件进行交互,刮出特定内容即可通过验证。
使用H5版刮刮卡交互验证码,需要引入以下js资源:
<!-- 国内使用 -->
<script type="text/javascript" charset="utf-8" src="//g.alicdn.com/sd/nch5/index.js?t=2015052012"></script>
<!-- 若您的主要用户来源于海外,请替换使用下面的js资源 -->
<!-- <script type="text/javascript" charset="utf-8" src="//aeis.alicdn.com/sd/nch5/index.js?t=2015052012"></script> -->
其中,t字段建议设置为小时级别时间戳,随时间更新,确保js不会被浏览器长时间缓存,这样能够享受到我们针对js的动态发布迭代。
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<script charset="utf-8" src="//g.alicdn.com/sd/nch5/index.js"></script>
</head>
<body>
<div id="your-dom-id"></div>
<script>
var nc_token = ["CF_APP_1", (new Date()).getTime(), Math.random()].join(':');
var NC_Opt = {
renderTo: "#your-dom-id",
appkey: "CF_APP_1",
scene: 'test',
token: nc_token,
trans: {'key1': "code0"},
is_Opt: 0,
type: "scrape",
width: 300,
height: 100,
isEnabled: true,
language: 'cn',
times: 5,
objects: ["//img.alicdn.com/tps/TB1BT9jPFXXXXbyXFXXXXXXXXXX-80-80.png"],//勿动,照抄即可
apimap: {
// 'uab_Url': '//aeu.alicdn.com/js/uac/909.js',
},
elements: [
'//img.alicdn.com/tfs/TB17cwllsLJ8KJjy0FnXXcFDpXa-50-74.png',
'//img.alicdn.com/tfs/TB17cwllsLJ8KJjy0FnXXcFDpXa-50-74.png'
],
bg_back_prepared: '//img.alicdn.com/tps/TB1skE5SFXXXXb3XXXXXXXXXXXX-100-80.png',
bg_front: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABQCAMAAADY1yDdAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAADUExURefk5w+ruswAAAAfSURBVFjD7cExAQAAAMKg9U9tCU+gAAAAAAAAAIC3AR+QAAFPlUGoAAAAAElFTkSuQmCC',
obj_ok: '//img.alicdn.com/tfs/TB1rmyTltfJ8KJjy0FeXXXKEXXa-50-74.png',
bg_back_pass: '//img.alicdn.com/tfs/TB1KDxCSVXXXXasXFXXXXXXXXXX-100-80.png',
obj_error: '//img.alicdn.com/tfs/TB1q9yTltfJ8KJjy0FeXXXKEXXa-50-74.png',
bg_back_fail: '//img.alicdn.com/tfs/TB1w2oOSFXXXXb4XpXXXXXXXXXX-100-80.png',
upLang:{"cn":{
_ggk_guide: "请在屏幕上滑动,刮出两面盾牌",
_ggk_success: "恭喜您成功刮出盾牌<br/>继续下一步操作吧",
_ggk_loading: "加载中",
_ggk_fail: ['呀,盾牌不见了<br/>请', "javascript:NoCaptcha.reset()", '再来一次', '或', "http://survey.taobao.com/survey/QgzQDdDd?token=%TOKEN", '反馈问题'],
_ggk_action_timeout: ['我等得太久啦<br/>请', "javascript:NoCaptcha.reset()", '再来一次', '或', "http://survey.taobao.com/survey/QgzQDdDd?token=%TOKEN", '反馈问题'],
_ggk_net_err: ['网络实在不给力<br/>请', "javascript:NoCaptcha.reset()", '再来一次', '或', "http://survey.taobao.com/survey/QgzQDdDd?token=%TOKEN", '反馈问题'],
_ggk_too_fast: ['您刮得太快啦<br/>请', "javascript:NoCaptcha.reset()", '再来一次', '或', "http://survey.taobao.com/survey/QgzQDdDd?token=%TOKEN", '反馈问题']
}
},
callback: function(data) { //成功回调
window.console && console.log(nc_token)
window.console && console.log(data.sessionId)
window.console && console.log(data.sig)
},
failCallback: function(data) { //拦截or失败回调
},
error: function(data) { //异常回调
}
};
var nc = NoCaptcha.init(NC_Opt);
nc.setEnabled(true); // 启动
</script>
</body>
</html>
参数 | 含义 |
---|---|
renderTo | 声明刮刮卡需要渲染的目标元素ID |
appkey | 应用标示。它和scene字段一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以从console的配置里找到它正确的值,请勿乱写 |
scene | 场景标示。它和appkey字段一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以从console的配置里找到它正确的值,请勿乱写 |
type | 请写死”scrape” |
token | 刮刮卡交互验证码的主键,请务必不需要写死固定值。请确保每个用户每次打开页面时,token都是不同的。建议格式为”您的appkey”+”时间戳”+”随机数” |
width | 刮刮卡长度,最小值300,默认值300 |
height | 刮刮卡宽度,最小值100,默认值100 |
trans | 业务键字段。您可以不写此字段,也可以按照下文中”问题排查与错误码”部分文档配置此字段,便于线上问题排查 |
elementID | 通过Dom的ID属性自动填写trans业务键,您可以不写此字段,也可以按照下文中”问题排查与错误码”部分文档配置此字段,便于线上问题排查 |
is_Opt | 是否自己配置底层采集组件。如无特殊场景请保持写0或不写此项。默认为0 |
isEnabled | 是否启用,无特殊场景请默认写true。默认为true |
language | 语言。详细配置方法请见下方”自定义文案”部分。默认为cn(中文) |
times | 允许服务器超时重复次数,默认5次 |
objects | 特殊字段,请务必写死[“//img.alicdn.com/tps/TB1BT9jPFXXXXbyXFXXXXXXXXXX-80-80.png”] |
apimap | 用于自己指定滑动验证各项请求的接口地址。如无特殊情况,请不要配置这里的apimap |
elements | 两个长度的List,自定义需要刮出的两个elements的图片资源 |
bg_back_prepared | 自定义刮动时的背景图像,平铺填充 |
bg_front | 自定义刮动的前景(浮层),注意这里只接受base64数据流 |
obj_ok | 自定义验证通过时显示的图标资源 |
bg_back_pass | 自定义验证通过时的背景图像,平铺填充 |
obj_error | 自定义验证失败或异常时显示的图标资源 |
bg_back_fail | 自定义验证失败或异常时显示的背景图像,平铺填充 |
upLang | 用于自定义文案,具体参见下方”自定义文案”部分文档 |
callback | 验证成功时会触发此回调 |
failCallback | 拦截或验证失败时会触发此回调 |
error | 异常回调 |
noCaptcha对象中维护了一些方法提供给您使用,您可以通过诸如var nc = new noCaptcha(NC_Opt); nc.functionName(parm);的方式来调用使用它们。
方法名 | 参数 | 作用 |
---|---|---|
reset | 无 | 任何时候调用此方法,可以将刮刮卡重置为初始状态(等待刮动) |
hide | 无 | 任何时候调用此方法,可以隐藏刮刮卡组件 |
show | 无 | 在调用hide方法后,任何时候调用此方法,可以展示刮刮卡组件 |
CF_APP_1这个appkey是验证码服务专门为用户测试验证码各个状态所维护的appkey。启用这个appkey后,您可以通过配置前端trans字段来直接控制验证码服务接口的返回(通过or拦截),借此您可以直观的看到验证码各个状态的交互、样式和流程。正式上线时请务必将其替换为阿里云控制台上为您分配的appkey和scene,以免出现不必要的安全问题。
CF_APP_1下trans字段与验证码结果对应关系如下:
trans | 效果 |
---|---|
{“key1”:”code0”} | 刮动一定会通过 |
{“key1”:”code300”} | 刮动一定会被拦截 |
正式上线之前,推荐您执行完整的功能性和兼容性测试。测试过程中有以下几点注意事项:
·请确保您使用阿里云控制台上分配的appkey和scene进行测试,不要胡乱填写
·请注意您当前验证码的使用场景。如果您的验证码在Html5场景下使用,请不要用PC浏览器进行测试
您可以通过配置刮刮卡配置项中的upLang参数来自定义您需要的文案。
upLang:{"cn":{
_ggk_guide: "请摁住鼠标左键,刮出两面盾牌",//初始化完成
_ggk_success: "恭喜您成功刮出盾牌<br/>继续下一步操作吧",//验证成功
_ggk_loading: "加载中",//加载过程
_ggk_fail: ['呀,盾牌不见了<br/>请', "javascript:noCaptcha.reset()", '再来一次', '或', "http://survey.taobao.com/survey/QgzQDdDd?token=%TOKEN", '反馈问题'],//验证失败
_ggk_action_timeout: ['我等得太久啦<br/>请', "javascript:noCaptcha.reset()", '再来一次', '或', "http://survey.taobao.com/survey/QgzQDdDd?token=%TOKEN", '反馈问题'],//操作超时
_ggk_net_err: ['网络实在不给力<br/>请', "javascript:noCaptcha.reset()", '再来一次', '或', "http://survey.taobao.com/survey/QgzQDdDd?token=%TOKEN", '反馈问题'],//加载失败
_ggk_too_fast: ['您刮得太快啦<br/>请', "javascript:noCaptcha.reset()", '再来一次', '或', "http://survey.taobao.com/survey/QgzQDdDd?token=%TOKEN", '反馈问题']//刮动过快
}
}
对于默认的“盾牌”样式的交互与UI,我们为您准备好了18国翻译,您可以根据自己的需求进行替换。替换方法:将language参数和upLang的第一个参数替换为您想要的语言,并在第二个参数中自定义默认UI(盾牌)的文案(“加载中”、”网络异常”、”刮动过快”、”等的太久”在多语言场景不需要自定义文案,修改language参数后会自动提供翻译)
ar_SA:阿拉伯文
de_DE:德文
es_ES:西班牙文
fr_FR:法文
in_ID:印尼语
it_IT:意大利文
iw_HE:希伯来语
ja_JP:日文
ko_KR:韓文
nl_NL:荷蘭文
pt_BR:波蘭文
ru_RU:俄文
th_TH:泰文
tr_TR:土耳其文
vi_VN:越南文
cn:简体中文
tw:繁体中文
en:英文
中文 | 请在屏幕上滑动,刮出两面盾牌 | 呀,盾牌不见了,请再来一次或反馈问题 | 恭喜您成功刮出盾牌,继续下一步操作吧 |
---|---|---|---|
台湾繁体 | 請在螢幕上滑動,刮出兩個盾牌。 | 哎呀,盾牌消失了!請再來一次或通報錯誤。 | 恭喜!您刮出盾牌。請繼續下一步吧! |
English | Swipe the screen to scrape out two shields. | Uh oh, the shield disappeared! Please try again or report an error. | Congratulations! You gained a shield. Continue to the next step! |
Spanish | Desliza la pantalla para raspar dos escudos. | ¡Vaya! El escudo ha desaparecido. Vuelve a intentarlo o informa del problema. | ¡Enhorabuena! Has conseguido un escudo. Continúa con el siguiente paso. |
Polish | Przesuń palcem po ekranie, aby zdrapać dwie tarcze. | Ojej, tarcza znikła! Spróbuj ponownie lub zgłoś problem. | Gratulacje! Zdobywasz tarczę. Przejdź do kolejnego kroku! |
French | Balayez l’écran pour gratter deux écus. | Oups, l’écu a disparu ! Veuillez réessayer ou signaler une erreur. | Félicitations ! Vous avez reçu un écu. Passez à l’étape suivante ! |
German | Wischen Sie auf dem Bildschirm, um zwei Schilde zu kratzen. | Hoppla, der Schild ist verschwunden! Versuchen Sie es erneut oder melden Sie einen Fehler. | Glückwunsch! Sie haben einen Schild gewonnen. Gehen Sie weiter zum nächsten Schritt! |
Italian | Scorrere sullo schermo per grattare due scudi. | Oh oh, lo scudo è scomparso! Riprovare o segnalare un errore. | Congratulazioni! Hai guadagnato uno scudo. Continua con il passaggio successivo. |
Russian | Проведите по экрану, чтобы стереть два щита. | Ох, щит пропал! Повторите попытку или сообщите об ошибке. | Поздравляем! Вы получили щит. Перейдите на следующий шаг! |
Japanese | 画面をスワイプして、2つのシールドを掘り出してください。 | シールドが消えました!再度お試しになるか、エラーを報告してください。 | おめでとうございます!シールドを獲得しました。次のステップに進んでください! |
Korean | 화면을 밀어서 쉴드 두 개를 지우세요. | 쉴드가 사라졌습니다! 다시 시도하거나 오류를 보고해 주세요. | 축하합니다! 쉴드를 획득하셨습니다. 다음 단계로 진행하세요! |
Arabic | قم بسحب الشاشة لانتزاع اثنين من الدروع. | أووه، لقد اختفى الدرع! يُرجى المحاولة مرة أخرى أو الإبلاغ عن خطأ. | تهانينا! لقد حصلت على درع. انتقل إلى الخطوة التالية! |
Turkish | İki kalkanı kazımak için ekranı kaydırın. | Eyvah, kalkan kayboldu! Lütfen daha sonra tekrar deneyin veya bir hata bildiriminde bulunun. | Tebrikler! Bir kalkan kazandınız. Bir sonraki adıma geçin! |
Thai | ปัดหน้าจอเพื่อจัดการโล่สองอัน | โอ๊ะโอ โล่หายไปแล้ว! โปรดลองอีกครั้งหรือรายงานความผิดพลาด | ขอแสดงความยินดี! คุณได้รับโล่ ดำเนินการสู่ขั้นตอนต่อไป! |
Vietnamese | Vuốt màn hình để kéo ra hai khiên. | Ồ, khiên đã biến mất! Vui lòng thử lại hoặc báo cáo lỗi. | Xin chúc mừng! Bạn đã giành được một khiên. Tiếp tục bước tiếp theo! |
Dutch | Veeg over het scherm om twee schilden weg te strepen. | Oh, het schild is verdwenen! Probeer het opnieuw of rapporteer uw probleem. | Gefeliciteerd! U hebt een schild gekregen. Ga verder met de volgende stap! |
Hebrew | החלק על המסך כדי לגרד שני מגינים. | או-או, המגן נעלם! נסה שוב או דווח על שגיאה. | מזל טוב! זכית במגן. המשך לשלב הבא! |
Indonesian | Gesek layar untuk menggurat dua buah perisai. | Oh, perisainya menghilang! Harap coba lagi atau laporkan kesalahan. | Selamat! Anda mendapatkan sebuah perisai. Lanjutkan ke langkah berikutnya! |
刮刮卡交互验证默认不会采集您当前业务场景下的用户名、手机号等业务键,为了方便问题排查,这里强烈建议您配置上传业务主键,这样遇到问题的客户可以提供”业务键+时间”,很方便的关联到对应刮刮卡的请求。否则您必须提供引导用户进行抓包才能具体对应查到日志和请求。
您可以配置elementID来让滑动验证主动采集。elementID的值为一个stringList,配置之后在刮动结束的时刻,滑块会以elementID当中的每一个string作为ID,去获取对应dom的value值并上传。举个例子,如果您配置elementID:[“usernameID”],则刮动结束时document.getElementById(“usernameID”).value会自动被上传至验证码服务端。
如果您不方便上传业务键,在用户遇到问题时您可以引导其点击”反馈问题”链接,然后将打开页面的url复制保存下来以方便后续查询日志,无需您自己进行抓包。
在文档使用中是否遇到以下问题
更多建议
匿名提交