@dzc/slide-verify

滑动验证组件

描述

基于React封装的滑动验证组件，用于登录时人机验证，有效防止接口被调用等攻击行为。只需通过简单的右滑交互操作，用户无需思考即可通过验证。

效果

安装

npm i @dzc/slide-verify --save

使用

import React from 'react';
import SlideVerify from '@dzc/slide-verify';

export default () => {

  const onSuccess = (e) => { console.log('前端滑动验证通过时会触发该回调参数。您可以在该回调参数中将会话ID（sessionId）、签名串（sig）、请求唯一标识（token）字段记录下来，随业务请求一同发送至您的服务端调用验签。', e) }

  const onFail = (e) => { console.log('滑动验证失败时触发该回调参数。', e) }

  const onError = (e) => { console.log('验证码加载出现异常时触发该回调参数。', e) }

  const reqCode = async () => {
    // const res = await false // 返回失败情况
    // const res = await fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/diamond.json') // 返回成功
    // return res
    const res = await 'lkjsafdsafsaf'
    return res
  }

  const SlideVerifyProps = {
    width: '300px',
    height: '34px',
    defaultBg: '#e8e8e8',
    defaultText: '请按住滑块，拖动到最右边',
    loadingText: '验证中',
    successBg: '#7ac23c',
    successText: '验证通过',
    reqCode,
    onSuccess,
    onFail,
    onError
  }

  return <SlideVerify {...SlideVerifyProps} />;
};

API

参数	说明	类型	默认值	可选值
width	宽度	string	'300px'	-
height	高度	string	'#e8e8e8'	-
defaultBg	默认背景色	string	'34px'	-
defaultText	默认文字	string	'请按住滑块，拖动到最右边'	-
loadingText	验证中文字	string	'验证中'	-
successBg	验证成功时背景色	string	'#7ac23c'	-
successText	验证成功时文字	string	'验证通过'	-
reqCode	回调函数，用于请求接口获取key值返回到组件中	func	-	-
onSuccess	前端滑动验证通过时会触发该回调参数。您可以在该回调参数中将会话ID（sessionId）、签名串（sig）、请求唯一标识（token）字段记录下来，随业务请求一同发送至您的服务端调用验签。	func	-	-
onFail	滑动验证失败时触发该回调参数。	func	-	-
onError	验证码加载出现异常时触发该回调参数。	func	-	-
onError	验证码加载出现异常时触发该回调参数。	func	-	-

更新日志

2.0.1 ~ 2.0.5 修复组件切换显示问题
2.0.0 支持内网环境下使用、支持背景和文字配置、支持通过后端已返回code再进行验证
1.0.6 修复组件切换展示不全问题
1.0.5 修复组件切换展示不全问题
1.0.4 修复组件切换展示不全问题
1.0.3 修复组件切换展示不全问题
1.0.2 修复组件切换不显示问题
1.0.1 修改组件安装方式
1.0.0 组件发布

温馨提示

如需支持更多自定义效果，请联系作者逐步完善
开发者：诺克
微信：15858194070

鼓励和支持

开发不易，开源不易。如果这篇经验对您有所帮助，请多给我一些鼓励和支持，谢谢！。