@yidun/captcha-plugin-rn v1.1.6

行为式验证码

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

平台支持（兼容性）

环境准备

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',
                    is_no_sense_mode: false,
                    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 支持的配置项说明

language_type 多语言对应表

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

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);
});