行为式验证码

全新人机验证方式，高效拦截机器行为，业务安全第一道防线。搭载风险感知引擎，智能切换验证难度，安全性高，极致用户体验。读屏软件深度适配，视障群体也可轻松使用，符合工信部无障碍适配要求

平台支持（兼容性）

| Android|iOS|
| ---- | ----- | | 适用版本区间：4.4以上|适用版本区间：9 - 14|

环境准备

CocoaPods安装教程

资源引入/集成

yarn add @yidun/captcha-plugin-rn
npm install @yidun/captcha-plugin-rn

项目开发配置

调用示例

import React, {Component} from 'react';
import {
    SafeAreaView,
    NativeModules,
    Button
} from 'react-native';

const captchaHelper = NativeModules.NTESCaptchaHelper;

class Demo extends Component {
    render() {
        return (
            <SafeAreaView style={{flex: 1}}>
                <Button onPress={() => captchaHelper.init({
                    captcha_id: '易盾获取到的业务id',
                    styleConfig:{
                       radius: 10,
                       capBarTextColor: "#25D4D0",
                       capBarTextSize: 18,
                       capBarTextWeight: "bold"
                    }
                 })} title="初始化"/>
                <Button onPress={() => captchaHelper.showCaptcha()} title="显示验证码"/>
            </SafeAreaView>
        )
    }
}

SDK 方法说明

1. 初始化

代码说明：

import {NativeModules} from 'react-native';
const captchaHelper = NativeModules.NTESCaptchaHelper;//对象创建
captchaHelper.init(options)

options 支持的配置项说明

| key | value 类型 | 是否必填 | 默认值 | 描述 | | ---- | ---- | -------- |-------| ---- | | captcha_id | String | 是 | 无 | 易盾获取到的业务 id | | failed_max_retry_count | Number | 是 | 无 | 失败后尝试最大次数 | | is_debug | Boolean | 否 | false | 是否启动 debug 模式 | | dimAmount | Number | 否 | 0.5 | 验证码框遮罩层透明度 | | is_touch_outside_disappear | Boolean | 否 | true | 点击弹窗外部是否可以关闭验证码 | | timeout | Number | 否 | 10000 | 超时时间 | | is_hide_close_button | Boolean | 否 | false | 是否隐藏关闭按钮 | | use_default_fallback | Boolean| 否 | true | 是否采用默认降级 | | language_type | String | 否 | zh-CN | 多语言语言类型 | | loading_text | String | 否 | 智能检测中 | 自定义加载文案 | | theme | String | 否 | light | 主题/dark、light两种 | | is_show_loading | Boolean | 否 | true | 是否显示loading | | is_close_button_bottom | Boolean | 否 | false | 关闭按钮是否在下方 | | theme | String | 否 | light | 主题，支持light、dark | | is_mourning_day | Boolean | 否 | false | 是否黑白模式 | | size | String | 否 | 无 | 适老化字体图标大小，支持small、medium、large、x-large | | is_mourning_day | Boolean | 否 | false | 是否黑白模式 | | refreshInterval | Number | 否 | 300 | 滑动拼图、智能无感知、短信、语音验证失败后，停留时间。如果需要延长错误提示时间（为了让用户感知到）可自定义配置，单位为 ms | | isIpv6 | Boolean | 否 | false | 网络是否ipv6 | | is_show_inner_close | Boolean | 否 | false | 是否显示验证码内部关闭按钮 | | can_upload | Boolean | 否 | true | 是否支持数据上报 | | styleConfig | object/ReadableMap | 否 | 空 | 验证码高级UI自定义配置 |

language_type 多语言对应表

| 多语言值 | 说明 | | ---- | ---- | | zh-CN | 中文 | | zh-TW | 台湾繁体 | | zh-HK | 香港繁体 | | en | 英式英文 | | en-GB | 英式英文 | | en-US | 美式英文 | | ja | 日语 | | ko | 韩文 | | th | 泰语 | | vi | 越南语 | | fr | 法语 | | ru | 俄语| | ar | 阿拉伯语 | | de | 德语 | | it | 意大利语 | | he | 希伯来语 | | hi | 印地语 | | id | 印尼语 | | my | 缅甸语 | | lo | 老挝语 | | ms | 马来语 | | pl | 波兰语 | | pt | 葡萄牙语 | | es | 西班牙语 | | tr | 土耳其语 | | nl | 荷兰语 | | es-la | 拉美西语 | | pt-br | 巴西葡语 | | sv | 瑞典语 | | no | 挪威语 | | da | 丹麦语 | | cs | 捷克语 | | hu | 匈牙利语 | | sk | 斯洛伐克语 | | ro | 罗马尼亚语 | | el | 希腊语 | | sr | 塞尔维亚语 | | bs | 波斯尼亚语 | | mk | 马其顿语 | | bg | 保加利亚语 | | fi | 芬兰语 | | et | 爱沙尼亚语 | | lv | 拉脱维亚语 | | lt | 立陶宛语 | | sl | 斯洛文尼亚语 | | hr | 克罗地亚语 | | uk | 乌克兰语 | | vi | 越南语 | | fa | 波斯语 | | ca | 加泰罗尼亚语 | | gl | 加利西亚语 | | eu | 巴斯克语 | | ka | 格鲁吉亚语 | | az | 阿塞拜疆语 | | uz | 乌兹别克语 | | km | 高棉语 | | si | 僧伽罗语 | | ur | 乌尔都语 | | bo | 藏语 | | be | 白俄罗斯语 | | kk | 哈萨克语（西里尔文） | | bn | 孟加拉语 | | fil | 菲律宾语 | | jv | 爪哇语 | | ne | 尼泊尔语 | | sw | 斯瓦西里语 | | mi | 毛利语 | | am | 阿姆哈拉语 | | te | 泰卢固语 | | mr | 马拉地语 | | ta | 泰米尔语 | | gu | 古吉拉特语 | | kn | 卡纳达语 | | ml | 马来亚拉姆语 | | or | 欧里亚语 | | pa | 旁遮普语 | | as | 阿萨姆语 | | mai | 迈蒂利语 | | mn | 蒙古语（西里尔文） | | ug | 维吾尔语 |

styleConfig 验证码UI自定义配置对应表

| UI配置项 | 类型 | 描述 | | ------ |----| ---- | | radius |int |验证码圆角| | capBarTextAlign |String |弹框头部标题文字对齐方式，可选值为 left center right| | capBarBorderColor |String |弹框头部下边框颜色，想要去掉的话可取 transparent 或者与背景色同色 #fff| | capBarTextColor |String |弹框头部标题文字颜色| | capBarTextSize |int |弹框头部标题文字字体大小| | capBarTextWeight |String | 弹框头部标题文字字体体重，可设置粗细，参考：capBarTextWeight: normal、bold、lighter、bolder、100、200、300、400、500、600、700、800、900更多详情参考：https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight| | capBarTitleHeight |int |弹框头部标题所在容器高度| | capBodyPadding |int |验证码弹框 body 部分的内边距，相当于总体设置 capPaddingTop，capPaddingRight，capPaddingBottom，capPaddingLeft| | capPaddingTop |int |验证码弹框 body 部分的【上】内边距，覆盖 capPadding 对于上内边距的设置,单位px| | capPaddingRight |int |验证码弹框 body 部分的【右】内边距，覆盖 capPadding 对于右内边距的设置,单位px| | capPaddingBottom |int |验证码弹框 body 部分的【底】内边距，覆盖 capPadding 对于底内边距的设置,单位px| | capPaddingLeft |int |验证码弹框 body 部分的【左】内边距，覆盖 capPadding 对于左内边距的设置,单位px| | paddingTop |int |弹框【上】内边距，实践时候可与 capPaddingTop 配合,单位px| | paddingBottom |int |弹框【下】内边距，实践时候可与 capPaddingBottom 配合,单位px| | capBorderRadius |int |验证码弹框body圆角| | borderColor |String |滑块的边框颜色| | background |String |滑块的背景颜色| | borderColorMoving |String |滑块的滑动时边框颜色，滑动类型验证码下有效| | backgroundMoving |String |滑块的滑动时背景颜色，滑动类型验证码下有效| | borderColorSuccess |String |滑块的成功时边框颜色，此颜色同步了文字成功时文字颜色、滑块背景颜色| | backgroundSuccess |String |滑块的成功时背景颜色| | backgroundError |String |滑块的失败时背景颜色| | borderColorError |String |失败时边框颜色| | slideBackground |String |滑块的滑块背景颜色| | textSize |int |滑块的内容文本大小| | textColor |String |滑块内容文本颜色（滑块滑动前的颜色，失败、成功前的颜色）| | height |int |滑块的高度| | borderRadius |int |滑滑块的圆角| | gap |String |滑块与验证码视图之间的距离,单位px| | executeBorderRadius |int |组件圆角大小| | executeBackground |String |组件背景色| | executeTop |String |组件外层容器距离组件顶部距离,单位px| | executeRight |String |组件外层容器距离组件右侧距离,单位px|

2. 显示验证码

代码说明：

captchaHelper.showCaptcha()

3. 验证状态监听

使用的是 react-native 的 event 发送事件

首先导入 NativeEventEmitter

import {NativeEventEmitter} from 'react-native'
const NTESRNRouterEmitter = new  NativeEventEmitter(NativeModules.NTESCaptchaHelper)

然后添加事件监听，总共三种事件

• 验证码弹窗准备完成 onLoaded

NTESRNRouterEmitter.addListener('onLoaded', (event) => {
    
});

• 验证成功回调 onSuccess

NTESRNRouterEmitter.addListener('onSuccess', (event) => {
      // validate：返回的结果码
      alert(event.validate);
      alert(event.result);
      alert(event.message);
});

• 失败回调 onError

NTESRNRouterEmitter.addListener('onError', (event) => {
      // code：错误码 message：错误信息
      alert(event.code);
      alert(event.message);
});

• 取消验证码回调 onCancel

NTESRNRouterEmitter.addListener('onClose', (event) => {
      //message：取消的具体场景
      alert(event.message);
});