humi-ncpc

封装react滑动验证组建

install

npm install humi-ncpc

默认安装最新版本

use

# 组件中引入
import HumiNcpc from 'humi-ncpc';
# 样式引入
import 'humi-ncpc/lib/main.min.css';

<HumiNcpc appkey={"FFFF0N000000000072D4"} />

arguments

| 参数 | 含义 | 是否必填 | | ------------ | ----------------------------------------------------------- | ------- | | renderTo | 声明滑动验证需要渲染的目标元素ID | 是 | | appkey | 应用标示。它和scene字段一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以从console的配置里找到它正确的值，请勿乱写 | 是 | | scene | 场景标示。它和appkey字段一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以从console的配置里找到它正确的值，请勿乱写 | 是 | | token | 滑动验证码的主键，请务必不需要写死固定值。请确保每个用户每次打开页面时，token都是不同的。建议格式为”您的appkey”+”时间戳”+”随机数” | 是 | | customWidth | 滑动条的长度，建议预留300像素以上 | 否 | | trans | 业务键字段。您可以不写此字段，也可以按照下文中”问题排查与错误码”部分文档配置此字段，便于线上问题排查 | 否 | | elementID | 通过Dom的ID属性自动填写trans业务键，您可以不写此字段，也可以按照下文中”问题排查与错误码”部分文档配置此字段，便于线上问题排查 | 否 | | is_Opt | 是否自己配置底层采集组件。如无特殊场景请保持写0或不写此项。默认为0 | 否 | | isEnabled | 是否启用，无特殊场景请默认写true。默认为true | 否 | | timeout | 内部网络请求的超时时间，一般不需要改，默认值为3000ms | 否 | | times | 允许服务器超时重复次数，默认5次 | 否 | | apimap | 用于自己指定滑动验证各项请求的接口地址。如无特殊情况，请不要配置这里的apimap | 否 | | callback | 前端滑动验证通过时会触发此回调，您可以在这个回调中将token、sessionid、sig记录下来，随业务请求带到您的server端调用验签 | 是 |

function

| 方法名 | 参数 | 作用 | | ------- | ----- | ----- | | reload | 无 | 任何时候调用此方法，可以将滑动验证重置为初始状态(等待滑动) | | hide | 无 | 任何时候调用此方法，可以隐藏滑动验证组件 | | show | 无 | 在调用hide方法后，任何时候调用此方法，可以展示滑动验证组件 | | getToken | 无 | 任何时候调用此方法，可以获取当前滑动验证实例的token | | setTrans | Object | 可以设置滑动验证的业务键，方便问题排查定位。详见”问题排查与错误码说明”部分 | | upLang | String,Object | 用于配置NC自定义文案，详见”自定义文案与多语言”部分 | | destroy | 无 | 销毁当前滑动验证实例 |