secure-action v1.0.0

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

• 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

• status data 类型

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

事件

Secure Action 组件触发以下事件：

CSS 变量

许可证

本项目基于 MIT 许可证。