CaptchaA2 验证码前端

使用说明

后端部署：

import { Context, Hono } from 'hono';
import { CaptchaA2Client, captchaA2Middleware, captchaA2CheckMiddleware } from 'captcha-a2-client';

const captchaA2Client = new CaptchaA2Client({
  baseUrl: 'https://a2.captcha.com/',
  apiKey: 'ts-captcha-key',
  appName: 'capt2',
});

const app = new Hono();

const getClientIp = (c: Context) => {
  const ip = c.req.header('X-Real-IP') || 'none';
  return ip;
};

app.get('/captcha/generate-captcha', async c => {
  captchaA2Client.setClientIp(getClientIp(c));
  const data = await captchaA2Client.generateCaptcha();
  return c.json(data);
});

app.post('/captcha/check-captcha', captchaA2CheckMiddleware(captchaA2Client), async c => {
  return c.json({ message: 'Captcha checked' });
});

app.post('/captcha/verify-captcha', captchaA2Middleware(captchaA2Client), async c => {
  return c.json({ message: 'Captcha verified' });
});

app.post('/captcha/send-sms-with-captcha', async c => {
  captchaA2Client.setClientIp(getClientIp(c));
  const { captchaKey, value, phone } = await c.req.json();
  const data = await captchaA2Client.sendSmsWithCaptcha(
    captchaKey,
    value,
    phone,
    3451// 发送给用户的验证码文本
  );
  return c.json(data);
});

// 可以不用这个接口，而是自定义验证
app.post('/captcha/verify-sms-code', async c => {
  captchaA2Client.setClientIp(getClientIp(c));
  const { phone, code } = await c.req.json();
  const data = await captchaA2Client.verifySms(phone, code);
  return c.json(data);
});

export default app;

前端使用：

<template>
  <div>
    <h1>CaptchaA2 普通表单保护</h1>
    <input type="text" v-model="text" />
    <button @click="showCaptcha">提交</button>
    <hr>
    <h1>短信验证码场景Captcha保护</h1>
    <input placeholder="输入手机号码" type="text" v-model="smsPhone" />
    <input placeholder="输入短信验证码" type="text" v-model="smsCode" />
    <button @click="showSmsModal">获取短信验证码</button>
    <br>
    <button @click="handleVerifySms">提交</button>
    <CaptchaA2 @done="handleDone" :checkSlide="checkSlide" :fetchSlide="fetchCaptchaData" v-model:show="showModal" />
  </div>
</template>

<script setup>

import { ref, onMounted } from 'vue'

const showModal = ref(false)

const text = ref('文本文本123')
const smsPhone = ref('13188776655')
const smsCode = ref('')
const type = ref(0)

const showCaptcha = () => {
  type.value = 0
  showModal.value = true
}

const sendSms = () => {
  fetch('/api/captcha/send-sms-with-captcha', {
    method: 'POST',
    body: JSON.stringify({phone: smsPhone.value})
  })
}

const showSmsModal = () => {
  type.value = 1
  showModal.value = true
}

const handleVerifySms = () => {
  fetch('/api/captcha/verify-sms-code', {
    method: 'POST',
    body: JSON.stringify({phone: smsPhone.value, code: smsCode.value})
  })
}

const fetchCaptchaData = () => {
  return new Promise((resolve, reject) => {
    fetch('/api/captcha/generate-captcha')
      .then(res => res.json())
      .then(data => {
        resolve(data)
      })
  })
}

const checkSlide = (data) => {
  return new Promise((resolve, reject) => {
    fetch('/api/captcha/check-captcha', {
      method: 'POST',
      body: JSON.stringify(data)
    })
      .then(res => res.json())
      .then(data => {
        resolve(data)
      })
  })
}

const handleDone = (data) => {
  if (type.value === 0) {
    fetch('/api/captcha/verify-captcha', {
      method: 'POST',
      body: JSON.stringify({...data, text: text.value})
    })
  } else {
    fetch('/api/captcha/send-sms-with-captcha', {
      method: 'POST',
      body: JSON.stringify({phone: smsPhone.value, code: smsCode.value, ...data})
    })
  }
}

</script>