fady-mak / secure-action

Secure Action 是一个基于行为的验证码组件，适用于 Vue 3。

Secure Action

Secure Action 是一个基于行为的验证码组件，适用于 Vue 3。

示例

特性

• 生成基于行为的随机验证码，用于验证用户交互。
• 在 Vue 3 项目中轻松集成。
• 定制主题。

安装

npm install secure-action

使用

<template>
  <SecureAction
    ref="secureActionRef"
    :request="behavioralCaptcha"
    :verify="handleVerify"
  ></SecureAction>
  <button @click="withInterceptor">登录</button>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import {
  SecureAction,
  type SecureActionInstance,
  type VerifyOptions,
  type RequestFnOptions
} from 'secure-action'
import { useBehavioralCaptcha } from 'secure-action'
const secureActionRef = ref<SecureActionInstance>()

const handleSignIn = () => {
  console.log('触发登录')
}

/**
 * useBehavioralCaptcha 辅助验证函数 当验证通过且自动关闭后 触发传入的方法
 *
 * export declare function useBehavioralCaptcha(
 *            instance: Ref<SecureActionInstance | undefined>,
 *            fn: Function): {
 *     withInterceptor: () => Promise<void>;
 * };
 */
const { withInterceptor } = useBehavioralCaptcha(secureActionRef, handleSignIn)

const baseUrl = 'http://127.0.0.1/v1/behavioral_captcha'
const behavioralCaptchaKey = ref('')

// 生成行为验证码
const behavioralCaptcha = ({ loading, onSuccess, onError }: RequestFnOptions) => {
  loading.value = true
  fetch(`${baseUrl}?account=Fady Mak&scene=1`)
    .then((res) => res.json())
    .then((res) => {
      if (String(res.code).endsWith('6200')) {
        const { image, thumbnail, key } = res.data
        onSuccess(image, thumbnail)
        behavioralCaptchaKey.value = key
      } else {
        onError(res.message)
      }
    })
    .finally(() => {
      loading.value = false
    })
}

// 验证验证码
const handleVerify = ({ onError, onSuccess, points }: VerifyOptions) => {
  fetch(`${baseUrl}/verify`, {
    method: 'post',
    body: JSON.stringify({
      account: 'Fady Mak',
      scene: 1,
      dots: String(points),
      key: behavioralCaptchaKey.value
    }),
    headers: {
      'Content-Type': 'application/json'
    }
  })
    .then((res) => res.json())
    .then((res) => {
      if (String(res.code).endsWith('6200')) {
        onSuccess()
      } else {
        onError(res.message)
      }
    })
}
</script>

Props

• Secure Action 组件支持以下 props

属性名	类型	默认值	必需	描述
request	Function	-	true	请求函数，用于获取验证码图片和缩略图
verify	Function	-	true	验证函数，用于验证用户的操作是否正确
title	String	图形验证	false	标题
loadingText	String	加载中...	false	加载中的文本提示
validatingText	String	验证中,请稍等...	false	验证中的文本提示
successText	String	验证成功	false	验证成功的文本提示
failText	String	验证失败，请按提示重新操作	false	验证失败的文本提示
flat	Boolean	true	false	是否将 points 属性扁平化成一维数组
errorRefreshWait	Number	2000	false	验证错误时刷新间隔时间（毫秒）
successCloseWait	Number	2000	false	验证成功时关闭间隔时间（毫秒）
maskClosable	Boolean	true	false	点击遮罩层是否可以关闭对话框
hideCancel	Boolean	false	false	是否隐藏取消按钮
closable	Boolean	true	false	是否显示关闭按钮
keyboard	Boolean	true	false	是否支持按下键盘的 ESC 键关闭对话框
okText	String	确认	false	确认按钮的文本
cancelText	String	取消	false	取消按钮的文本
maskClass	String	-	false	遮罩层的类名
class	String	-	false	容器的类名
maxPoint	Number	9	false	验证点的最大数量
r	Number	10	false	检测的半径(某个点在此半径内是否有点)
fallbackBg	String	#f5f5f5	false	图片加载失败时的背景色
fallbackText	String	加载失败	false	图片加载失败时的提示语
footerAlign	`'start'	center	'end'`	'end'

• types

export type RequestFnOptions = {
  loading: Ref<boolean>
  onSuccess: (image: string, thumbnail: string) => void
  onError: (message?: string) => void
}
export type RequestFn = (options: RequestFnOptions) => void

export type VerifyOptions = {
  loading: Ref<boolean>
  points: number[] | [number, number][]
  onSuccess: (message?: string) => void
  onError: (message?: string) => void
}
export type VerifyFn = (options: VerifyOptions) => void

Slots

插槽名	描述	参数
title	标题	-
loading	加载中	-
fallback	加载失败图片	-
status	状态	data(结构如下)

• status data 类型

 interface StatusData {
   status: '' | 'SUCCESS' | 'ERROR';
   statusText: string
 }

事件

Secure Action 组件触发以下事件：

事件名	描述	参数
verify	验证	-

CSS 变量

CSS 变量	默认值	描述
--as-color	#1d2129	主文字颜色
--as-bg-color	#ffffff	背景颜色
--as-radius	8px	圆角半径
--as-font-size	14px	字体大小
--as-color-primary	#164cff	主要颜色
--as-color-danger	#f53f3f	危险颜色
--as-color-success	#00b42a	成功颜色
--as-border	1px solid #edeef0	边框样式
--as-header-height	48px	头部高度
--as-header-paddig	0 16px	头部内边距
--as-body-paddig	24px 32px 32px	内容区域内边距
--as-thumbnail-wrap-margin	0 0 16px	缩略图容器外边距
--as-footer-height	56px	底部高度
--as-footer-paddig	0 16px	底部内边距
--as-button-radius	4px	按钮圆角半径
--as-button-gap-x	16px	按钮水平间距
--as-button-border-width	1px	按钮边框宽度
--as-button-border-style	solid	按钮边框样式
--as-button-padding-y	7px	按钮垂直内边距
--as-button-padding-x	15px	按钮水平内边距
--as-button-icon-padding	7px	按钮图标内边距
--as-button-icon-image-size	16px	按钮图标尺寸
--as-button-border-color-default	#dbdde2	按钮默认边框颜色
--as-point-size	20px	验证点的尺寸
--as-point-font-weight	500	验证点的字体粗细
--as-point-border	1px solid #f3f6ff	验证点的边框样式

许可证

本项目基于 MIT 许可证。