如何集成滑动验证的前端页面代码_验证码(Captcha)-阿里云帮助中心

阿里云验证码提供客户端滑动验证功能。在阿里云验证码控制台中根据场景添加配置后，您需要将系统生成的前端页面代码集成到您需要使用滑动验证功能的Web页面中。本文介绍了如何集成滑动验证的前端页面代码。

前端接入代码示例

在需要使用滑动验证功能的Web前端页面中，需要对滑动验证进行初始化。以下代码为滑动验证功能的前端接入代码示例。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script src="https://g.alicdn.com/AWSC/AWSC/awsc.js"></script>
</head>
<body>
<div id="nc"></div>
<script>
    // 实例化nc
    AWSC.use("nc", function (state, module) {
        // 初始化
        window.nc = module.init({
            // 应用类型标识。它和使用场景标识（scene字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的appkey字段值，请务必正确填写。
            appkey: "CF_APP_1",
            //使用场景标识。它和应用类型标识（appkey字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的scene值，请务必正确填写。
            scene: "register",
            // 声明滑动验证需要渲染的目标ID。
            renderTo: "nc",
            //前端滑动验证通过时会触发该回调参数。您可以在该回调参数中将会话ID（sessionId）、签名串（sig）、请求唯一标识（token）字段记录下来，随业务请求一同发送至您的服务端调用验签。
            success: function (data) {
                window.console && console.log(data.sessionId)
                window.console && console.log(data.sig)
                window.console && console.log(data.token)
            },
            // 滑动验证失败时触发该回调参数。
            fail: function (failCode) {
                 window.console && console.log(failCode)
            },
            // 验证码加载出现异常时触发该回调参数。
            error: function (errorCode) {
                 window.console && console.log(errorCode)
            }
        });
    })
</script>
</body>
</html>

初始化

资源引入
在Web页面中使用滑动验证功能，需要在前端页面代码中添加以下代码，引入所需的JS资源。<script src="https://g.alicdn.com/AWSC/AWSC/awsc.js"></script>。

初始化代码说明

// 实例化nc 
    AWSC.use("nc", function (state, module) {
        var ncOption = {} // 滑动验证初始化参数
        // 初始化 调用module.init对滑动验证进行初始化
        window.nc = module.init(ncOption);
    })

说明

初始化module.init完成后，会返回一个实例化的nc对象。示例代码中该nc对象存在window.nc变量中。

初始化参数说明
在前端代码实例化验证组件时提供了以下初始化参数，您可以根据业务需要在代码中调整这些参数。

参数	含义	是否必填
appkey	应用类型标识。您可以在阿里云验证码控制台的配置管理页签找到对应的appkey字段值，请务必正确填写。	是
scene	使用场景标识。您可以在阿里云验证码控制台的配置管理页签找到对应的scene值，请务必正确填写。	是
renderTo	声明滑动验证需要渲染的目标元素ID。	是
foreign	请求国外需配置为true。	否
language	语言，默认值为cn（中文）。关于多语言的配置方法，请参见自定义文案与多语言设置。	否
width	滑动条的宽度（单位：px）。默认值为300，建议您为滑动条预留300 px以上的宽度。	否
fontSize	滑动组件展示的字体大小。默认值为12。	否
hideErrorCode	隐藏验证时的错误码，默认值为false。	否
upLang	用于验证码的自定义文案。	否
test	测试字段，用于测试验证码的不同状态。	否
success	验证通过时会触发该回调函数。您可以在该回调参数中将、会话ID（sessionid）、签名串（sig）字段记录下来，随业务请求一同发送至您的服务端调用验签。	否
fail	验证失败时触发该回调参数。	否
error	验证出现错误时触发该回调参数。	否

测试

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

通过设定初始化参数test的值复现滑动验证各个状态工作机制
您可以通过将test字段值设置为滑动验证服务提供的不同内容，来测试验证码各个状态的效果。通过配置前端页面初始化代码中的test字段来直接控制滑动验证服务接口的返回结果（通过、拦截）。
test字段值
模拟效果
module.TEST_PASS
滑动验证通过。
module.TEST_BLOCK
滑动验证未通过，被拦截。
前缀module为AWSC.use返回的对象，示例代码中命名为module。
通过这样的方式，您可以直观地观察验证码各个状态的交互、样式和流程。
说明
新版集成代码中token是自动生成的，无需用户自行指定token。如果您在正式上线或进行完整的功能性测试时未提前删除test配置项，会导致token异常，从而可能导致集成操作中某个环节出现异常，例如：验签失败等。
测试代码示例：
```
AWSC.use("nc", function (state, module) {
  window.nc = module.init({
    ...
    ...
    // 测试使用配置，test值为module.NC.TEST_PASS为测试滑动通过状态，值为module.NC.TEST_BLOCK为测试滑动失败的状态。
    test: module.TEST_PASS, // 测试滑动通过状态
    // test: module.TEST_BLOCK, // 测试滑动失败状态
    ...
    ...
  });
})
```
功能性测试和兼容性测试。
在正式上线前，建议您执行完整的功能性测试和兼容性测试。在测试过程中，请注意：
- 确保测试过程中，使用阿里云验证码控制台中为您分配的appkey和scene值进行测试。
- 对于Internet Explorer浏览器，验证组件最低支持至Internet Explorer 9，Internet Explorer 8及以下不支持。
- 在完整的功能性测试时，若成功调用获取的token包含CF_APP_1的内容，请检查test配置项是否删除，避免完整功能性测试失败。

对生成的nc对象进一步操作说明

初始化module.init完成之后，会返回一个实例化的nc对象，示例代码中存在window.nc变量中。您可以使用以下方法，按需对返回的nc对象进行进一步的操作。

说明

调用方式为window.nc[方法名]。

方法名	参数	作用
reset	无	任何时候调用此方法，可将滑动验证重置为初始状态（即等待滑动状态）。
hide	无	任何时候调用此方法，可隐藏滑动验证组件。
show	无	在调用hide方法后，任何时候调用此方法，可重新展示滑动验证组件。

test字段值	模拟效果
module.TEST_PASS	滑动验证通过。
module.TEST_BLOCK	滑动验证未通过，被拦截。