svg-captcha icon indicating copy to clipboard operation
svg-captcha copied to clipboard

why it is not work in nextjs@13?

Open xm-c opened this issue 1 year ago • 1 comments

Do you want to request a feature or report a bug?

If this is a feature request, what is motivation for changing the behavior?

If it is a bug, which version of svg-captcha are you using?

What is the current behavior?

What is the expected behavior?

Step to reproduce the bug or other relevant information

xm-c avatar Sep 19 '23 16:09 xm-c

Not works in next13. So I make a service for fetch captcha.

import { StatusCodes } from 'http-status-codes'
export interface SvgCaptchaCreateProps {
  data: string
  text: string
}
export interface SvgCaptchaOption {
  width?: number
  height?: number
  fontSize?: number
  mathMin?: number
  mathMax?: number
  noise?: number
  color?: boolean
  background?: string
}
export class SvgCaptcha {
  private static REMOTE_URL = 'https://svg-captcha.inn-studio.com'
  public static create = async ({
    width = 200,
    height = 50,
    fontSize = 50,
    mathMin = 10,
    mathMax = 99,
    noise = 5,
    color = true,
    background = '',
  }: SvgCaptchaOption): Promise<SvgCaptchaCreateProps | null> => {
    const params = new URLSearchParams({
      width: String(width),
      height: String(height),
      fontSize: String(fontSize),
      mathMin: String(mathMin),
      mathMax: String(mathMax),
      noise: String(noise),
      color: color ? '1' : '0',
      background,
    }).toString()
    try {
      const res = await fetch(`${this.REMOTE_URL}?${params}`, {
        cache: 'no-cache',
      })
      if (res.status !== StatusCodes.OK) {
        return null
      }
      const data = await res.json()
      if (data?.svg && data?.text) {
        return {
          data: data.svg,
          text: data.text,
        }
      }
      return null
    } catch (err) {
      console.log(err)
      return null
    }
  }
}

kmvan avatar Oct 02 '23 14:10 kmvan