前端接入代码集成_PC网页业务类型_前端代码集成_无痕验证

无痕验证是阿里巴巴集团提供的全新的人机验证解决方案。由无痕验证组件收集并统一调度下游验证码服务实现综合人机对抗的识别与处理。

在业务中接入无痕验证后，组件完全静默采集所需信息，从而对大部分正常用户完全“零打扰”，仅对存在风险的用户根据风险等级返回相应的下游验证码服务的唤醒建议（即调用该风险等级相应的验证码服务进行人机验证）。

资源引入

在PC端Web页面中使用无痕验证功能，需要在前端页面代码中添加以下代码，引入所需的JS资源。

<script type="text/javascript" charset="utf-8" src="//g.alicdn.com/sd/nvc/1.1.112/guide.js?t=2015052012"></script>

说明：其中，t字段值建议设置为小时级别的时间戳。随实际时间更新，确保所引入的JS资源不会被浏览器长时间缓存，以免无法享受阿里云对JS资源的动态更新。

前端接入代码集成

在需要使用无痕验证功能的Web前端页面中集成前端接入代码。

说明：以下代码为无痕验证功能的前端接入代码示例，请在云盾人机验证控制台中相应服务配置的系统代码集成&测试页面，获取系统根据您选择的业务场景生成的无痕验证前端集成代码，并将其集成在对应的PC端Web页面代码中。

<!DOCTYPE html>
<html lang="en">
<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">
</head>
<body>
<form id="login-form">
    <input id="account" type="text" placeholder="账号" />
    <input id="password" type="password" placeholder="密码">
    <button type="button" id="register" >注册</button>
</form>
<div id="captcha"></div>
<script>
    window.NVC_Opt = {
        //无痕配置 && 滑动验证、刮刮卡验证码通用配置。
        //应用类型标识。它和使用场景标识（scene字段）一起决定了无痕验证的业务场景与后端对应使用的策略模型。您可以在人机验证控制台的配置管理页签找到对应的appkey字段值，请务必正确填写。
        appkey:'CF_APP_1',
        //使用场景标识。它和应用类型标识（appkey字段）一起决定了无痕验证的业务场景与后端对应使用的策略模型。您可以在人机验证控制台的配置管理页签找到对应的scene值，请务必正确填写。
        scene:'nvc_register',
        //是否HTML5页面。对于PC端Web页面类型，该参数值需填写false。
        isH5:false,
        //二次验证的唤醒方式。true为浮层式，false为嵌入式。
        popUp:false,
        //声明二次验证需要渲染的目标元素ID。
        renderTo:'#captcha',
        //回调参数。
        nvcCallback:function(data){
            // 其中，data为getNVCVal()函数的值，该函数为二次验证滑动或者刮刮卡通过后的回调函数。
            // data与业务请求一同上传，由后端请求AnalyzeNvc接口并返回100或者900。
        },
        //业务键字段，可为空。该参数可用于上线前测试，请按照代码集成后测试部分中的方法配置该字段值。
        trans: {"key1": "code0","nvcCode":400},
        //二次验证组件的语言，默认为cn（简体中文）。详细配置方法请参见自定义文案文档。
        language: "cn",
        //当唤醒滑动验证作为二次验证时，配置滑动验证组件的宽度。
        customWidth: 300,
        //当唤醒刮刮卡验证作为二次验证时，配置刮刮卡组件的宽度。
        width: 300,
        //当唤醒刮刮卡验证作为二次验证时，配置刮刮卡组件的高度。
        height: 100,
        //当唤醒刮刮卡验证作为二次验证时，配置需要刮出的两个elements的图片资源。
        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',
        //当唤醒刮刮卡验证作为二次验证时，配置刮动时的前景图像（仅支持base64数据流）。
        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", '反馈问题']
            }
        }
    }
</script>
<!--引入guide.js前必须已定义NVC_Opt。-->
<script src="//g.alicdn.com/sd/nvc/1.1.112/guide.js"></script>
<script>
    function yourRegisterRequest(url, params){
        var callbackName = ('jsonp_' + Math.random()).replace('.', '');
        params += '&callback=' + callbackName;
        var o_scripts = document.getElementsByTagName("script")[0];
        var o_s = document.createElement('script');
        o_scripts.parentNode.insertBefore(o_s, o_scripts);
        //您注册请求的业务回调。
        window[callbackName] = function(json) {
            if(json.result.code == 400) {
                //唤醒滑动验证
                getNC().then(function(){
                    _nvc_nc.upLang('cn', {
                        _startTEXT: "请按住滑块，拖动到最右边",
                        _yesTEXT: "验证通过",
                        _error300: "哎呀，出错了，点击<a href=\"javascript:__nc.reset()\">刷新</a>再来一次",
                        _errorNetwork: "网络不给力，请<a href=\"javascript:__nc.reset()\">点击刷新</a>",
                    })
                    _nvc_nc.reset()
                })
            } else if (json.result.code == 600) {
                //唤醒刮刮卡
                getSC().then(function(){})
            } else if (json.result.code == 700) {
                //唤醒问答验证码。由于问答验证码组件升级中，服务端暂时不会返回code为700的结果。您可以保留该部分的接入代码。
                getLC();
            } else if (json.result.code == 100 || json.result.code == 200) {
                //注册成功
                nvcReset();
                alert("register success!")
            } else if (json.result.code == 800 || json.result.code == 900) {
                //直接拦截
                nvcReset();
                alert("register failed!")
            }
        };
        o_s.src = url + '?' + params;
    }
    document.getElementById('register').onclick = function() {
        //将以下getNVCVal()函数的值，跟随业务请求一起上传，由后端请求AnalyzeNvc接口并返回200，400，600或者800。
        var params = 'a=' + getNVCVal();
        yourRegisterRequest('http://cf.aliyun.com/nvc/nvcAnalyze.jsonp', params)
    }
</script>
</body>
</html>

注意事项

全局变量window.NVC_Opt的声明必须在引入”//g.alicdn.com/sd/nvc/1.1.112/guide.js” 资源前配置完成。
务必将yourRegisterRequest方法中维护的http://cf.aliyun.com/nvc/nvcAnalyze.jsonp接口替换为您自己的业务请求接口（默认接口为线上Demo测试接口，不具备任何实际攻防能力）。另外，在该接口调用过程中，需要附带getNVCVal()函数获取的人机信息串，随业务请求一起传递至您的业务服务端，并参见服务端代码集成文档中的说明发起”业务服务端->风控服务端”的风险查询请求。
对于风险查询请求返回的结果，您可以直接返回给客户端，客户端根据风险等级选择放行、拦截或调用getNC()、getSC()方法在指定div上唤醒二次验证。如果您的业务服务端自身具有风控策略（例如，黑、白名单），您也可以将您自身业务中的风控策略与人机验证服务接口二者得到的结果进行综合，最终决定客户端的风险处置方式。

参数定义说明

在前端接入代码中提供了以下参数，您可以根据业务需要在代码中调整这些参数。

参数	含义	是否必填
appkey	应用类型标识。它和使用场景标识（scene字段）一起决定了无痕验证的业务场景与后端对应使用的策略模型。您可以在人机验证控制台的配置管理页签找到对应的appkey字段值，请务必正确填写。	是
scene	使用场景标识。它和应用类型标识（appkey字段）一起决定了无痕验证的业务场景与后端对应使用的策略模型。您可以在人机验证控制台的配置管理页签找到对应的scene值，请务必正确填写。	是
isH5	是否HTML5页面，默认值为false。对于PC端Web页面类型，该参数值需填写false。	否
popUp	二次验证的唤醒方式。true为浮层式，false为嵌入式。	是
renderTo	声明滑动验证需要渲染的目标元素ID。	是
trans	业务键字段，可为空。该参数可用于上线前测试，请按照代码集成后测试部分中的方法配置该字段值。	否
customWidth	当唤醒滑动验证作为二次验证时，配置滑动条的宽度（单位：px）。建议您为滑动条预留300px以上的宽度。	否
width	当唤醒刮刮卡作为二次验证时，配置刮刮卡组件的宽度（单位：px）。	否
height	当唤醒刮刮卡作为二次验证时，配置刮刮卡组件的高度（单位：px）。	否
language	二次验证组件的语言，默认值为cn（中文）。	否
elements	当唤醒刮刮卡验证作为二次验证时，配置需要刮出的两个elements的图片资源。	否
bg_back_prepared	当唤醒刮刮卡验证作为二次验证时，配置刮动时的背景图像（自动应用平铺填充的方式）。	否
bg_front	当唤醒刮刮卡验证作为二次验证时，配置刮动时的前景图像（仅支持base64数据流格式）。	否
obj_ok	当唤醒刮刮卡验证作为二次验证时，配置验证通过时显示的图标资源。	否
bg_back_pass	当唤醒刮刮卡验证作为二次验证时，配置验证通过时显示的背景图像（自动应用平铺填充的方式）。	否
obj_error	当唤醒刮刮卡验证作为二次验证时，配置验证失败或异常时显示的图标资源。	否
bg_back_fail	当唤醒刮刮卡验证作为二次验证时，配置验证失败或异常时显示的背景图像（自动应用平铺填充的方式）。	否
upLang	当唤醒刮刮卡验证作为二次验证时，用于自定义文案。详细配置方法请参见自定义文案。	否

方法定义说明

无痕验证提供了三个全局方法供您使用。当nvc.js资源加载完成后，您就可以直接调用这些方法。

方法名	参数	作用
getNVCVal	无	在发送业务请求的前一刻调用此方法，将此方法返回的信息串随业务请求带到服务端，由服务端使用该信息串调用人机验证查询潜在风险。
getNC	无	调用此方法，可在您NVC_Opt配置项中renderTo参数声明的div处渲染出滑动验证组件。
getSC	无	调用此方法，可在您NVC_Opt配置项中renderTo参数声明的div处渲染出刮刮卡验证组件。

代码集成后测试

在将前端接入代码集成至PC端Web页面后，建议您在正式上线前通过以下方法进行测试。

通过CF_APP_1值复现验证码各个状态工作机制

您可以通过将appkey字段值设置为验证码服务预设的CF_APP_1并将scene字段值设置为nvc_register，来测试验证码各个状态的效果。将appkey字段和scene字段设置为该特定值后，您可以通过配置前端页面接入代码中的trans字段来直接控制验证码服务接口的返回结果（通过、二次验证、拦截）。

例如，当您使用代码示例中提供的http://cf.aliyun.com/nvc/nvcAnalyze.jsonp服务端接口进行测试时，trans字段值与验证码服务接口返回的结果关系如下表所示：

trans字段值	模拟效果
{“nvcCode”:200}	无痕验证通过。
{“nvcCode”:400, “key1”: “code0”}	唤醒滑动验证，且滑动验证通过。
{“nvcCode”:400, “key1”: “code300”}	唤醒滑动验证，且滑动验证未通过（拦截）。
{“nvcCode”:600, “key1”: “code0”}	唤醒刮刮卡验证，且刮刮卡验证通过。
{“nvcCode”:600, “key1”: “code300”}	唤醒刮刮卡验证，且刮刮卡验证未通过（拦截）。
{“nvcCode”:700}	唤醒问答验证。说明：由于问答验证码组件升级中，服务端暂时不会返回code为700的结果。
{“nvcCode”:800}	无痕验证未通过，直接拦截。

通过这样的方式，您可以直观地观察验证码各个状态的交互、样式和流程。

说明：在正式上线时，请务必将appkey字段和scene字段替换回云盾人机验证控制台中为您分配的值，以免出现不必要的安全问题。

功能性测试和兼容性测试

在正式上线前，建议您执行完整的功能性测试和兼容性测试。在测试过程中，请注意：
- 务必在前端代码中将代码示例提供的http://cf.aliyun.com/nvc/nvcAnalyze.jsonp服务端接口替换为您自己的业务接口，并按照无痕验证服务端代码集成在服务端接入人机验证服务。
- 确保测试过程中，使用云盾人机验证控制台中为您分配的appkey和scene值进行测试。
- 务必根据您配置的业务类型场景进行测试。例如，您的验证码配置在PC端Web页面业务类型使用，请不要通过手机等移动端设备进行测试。
- 针对低版本Internet Explorer浏览器进行测试时，请勿使用Internet Explorer 11浏览器的兼容模式来模拟低版本浏览器。需使用真正低版本的Internet Explorer浏览器进行测试。