简介

刮刮卡交互验证码(Scratchcard-Captcha)是阿里集团推出的第二代行为验证码产品，它需要用户与页面上刮刮卡UI组件进行交互，刮出特定内容即可通过验证。刮刮卡H5

资源引入说明

使用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的动态发布迭代。

完整接入demo

<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方法后，任何时候调用此方法，可以展示刮刮卡组件

测试指南

(1) CF_APP_1复现验证码各个状态机

CF_APP_1这个appkey是验证码服务专门为用户测试验证码各个状态所维护的appkey。启用这个appkey后，您可以通过配置前端trans字段来直接控制验证码服务接口的返回（通过or拦截），借此您可以直观的看到验证码各个状态的交互、样式和流程。正式上线时请务必将其替换为阿里云控制台上为您分配的appkey和scene，以免出现不必要的安全问题。
CF_APP_1下trans字段与验证码结果对应关系如下：

trans	效果
{“key1”:”code0”}	刮动一定会通过
{“key1”:”code300”}	刮动一定会被拦截

(2) 正式上线测试

正式上线之前，推荐您执行完整的功能性和兼容性测试。测试过程中有以下几点注意事项：
·请确保您使用阿里云控制台上分配的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!

问题排查

(1) 上传业务键

刮刮卡交互验证默认不会采集您当前业务场景下的用户名、手机号等业务键，为了方便问题排查，这里强烈建议您配置上传业务主键，这样遇到问题的客户可以提供”业务键+时间”，很方便的关联到对应刮刮卡的请求。否则您必须提供引导用户进行抓包才能具体对应查到日志和请求。
您可以配置elementID来让滑动验证主动采集。elementID的值为一个stringList，配置之后在刮动结束的时刻，滑块会以elementID当中的每一个string作为ID，去获取对应dom的value值并上传。举个例子，如果您配置elementID:[“usernameID”]，则刮动结束时document.getElementById(“usernameID”).value会自动被上传至验证码服务端。

(2) 获取token

如果您不方便上传业务键，在用户遇到问题时您可以引导其点击”反馈问题”链接，然后将打开页面的url复制保存下来以方便后续查询日志，无需您自己进行抓包。

H5版本

简介