旋转扶正验证

配合后端 image-validation/rotate-captcha 使用的前端组件。弹窗里拖动左侧滑块，把圆形图片转正。松手后才提交角度。手机和 PC 都能拖。

组件不发请求地址，由业务传入 create 和 verify。验证通过后抛出 passToken，页面再去发验证码。

安装

npm install front-image-validation

Vue 3 项目需要已安装 vue@3。

Vue 3

<script setup>
import { ref } from 'vue'
import RotateCaptcha from 'front-image-validation/vue'

const open = ref(false)
const phone = ref('')

async function create(scene, target) {
  const data = await fetch('/your/captcha/create', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ scene, target }),
  }).then((response) => response.json())
  return data
}

async function verify(token, angle) {
  const response = await fetch('/your/captcha/verify', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ token, angle }),
  })
  const data = await response.json()
  if (!response.ok) {
    const error = new Error(data.message || '验证未通过')
    error.remaining = data.remaining
    throw error
  }
  return data
}

function onSuccess(passToken) {
  open.value = false
  // 带着 passToken 去发送验证码
}
</script>

<template>
  <button type="button" @click="open = true">获取验证码</button>
  <RotateCaptcha
    v-model:open="open"
    scene="sms"
    :target="phone"
    :create="create"
    :verify="verify"
    @success="onSuccess"
  >
    <template #feedback>
      <a href="/feedback">意见反馈</a>
    </template>
  </RotateCaptcha>
</template>

create 返回 { token, image }，image 是后端给出的 data:image/png;base64,...。verify 成功返回 { pass_token, expires_in }。失败时抛出带 remaining 的错误。剩余次数为 0，或消息里包含「失效」时，组件会自动重新拉图。

uni-app

使用 Vue 3。页面里：

<script setup>
import { ref } from 'vue'
import RotateCaptcha from 'front-image-validation/uni'

const open = ref(false)
const phone = ref('')

function create(scene, target) {
  return new Promise((resolve, reject) => {
    uni.request({
      url: '/your/captcha/create',
      method: 'POST',
      data: { scene, target },
      success: (res) => resolve(res.data),
      fail: reject,
    })
  })
}

function verify(token, angle) {
  return new Promise((resolve, reject) => {
    uni.request({
      url: '/your/captcha/verify',
      method: 'POST',
      data: { token, angle },
      success(res) {
        if (res.statusCode >= 400) {
          const error = new Error(res.data.message || '验证未通过')
          error.remaining = res.data.remaining
          reject(error)
          return
        }
        resolve(res.data)
      },
      fail: reject,
    })
  })
}
</script>

<template>
  <button @click="open = true">获取验证码</button>
  <RotateCaptcha
    v-model:open="open"
    scene="sms"
    :target="phone"
    :create="create"
    :verify="verify"
    @success="onSuccess"
  />
</template>

小程序里用手指拖滑块。H5 上鼠标和触摸都可以。意见反馈用同名插槽 feedback，不传就不显示。

属性

| 属性 | 说明 | | --- | --- | | open / v-model:open | 是否显示弹窗 | | scene | 场景，例如 sms | | target | 手机号或邮箱 | | create | (scene, target) => Promise<{ token, image }> | | verify | (token, angle) => Promise<{ pass_token, expires_in }> | | title | 默认「安全验证」 | | subtitle | 默认「请完成下方验证后继续操作」 | | hint | 默认「拖动左侧滑块使图片为正」 |

滑块最左是 0°，最右是 360°，提交的是顺时针角度。点遮罩不会关闭，点右上角关闭。