滑块验证码使用文档

Vue使用方法

1. 初始化滑块接口

import Captcha from '@hiapi/captcha-js'
const appId= '10000'
const apiUrl ="https://api.cloud.hiapi.cn/cloud-api"
Captcha.init(appId,apiUrl);

第三个参数为可选的国际化配置,见下方「国际化」。

2. 弹出滑块

import Captcha from '@hiapi/captcha-js'

const params= {} //接口请求参数

const option ={
	onClose:Function(), //关闭事件
	onError:Function(e), //错误事件
	onSuccess:Function(token), //成功事件
}

Captcha.init(params,option);

3. 刷新滑块

import Captcha from '@hiapi/captcha-js'

Captcha.refresh();

4. 关闭滑块

import Captcha from '@hiapi/captcha-js'
Captcha.close();

HTML使用方法

1. 初始化滑块接口

const appId= '10000'
const apiUrl ="https://api.cloud.hiapi.cn/cloud-api"
Captcha.init(appId,apiUrl);

2. 弹出滑块

const params= {} //接口请求参数
const option ={
	onClose:Function(), //关闭事件
	onError:Function(e), //错误事件
	onSuccess:Function(token), //成功事件
}
Captcha.init(params,option);

3. 刷新滑块

Captcha.refresh();

4. 关闭滑块

Captcha.close();

国际化

内置 zh-CN(默认)与 en 两套文案。不传 locale 时会自动根据浏览器 navigator.language 探测(zh* → zh-CN,en* → en,其余回退 zh-CN)。

初始化时指定语言

Captcha.init(appId, apiUrl, { locale: 'en' })

运行时切换语言

Captcha.setLocale('zh-CN')

覆盖内置文案 / 新增语言

// 可覆盖已有语言的某几个 key,也可整套新增语言
Captcha.init(appId, apiUrl, {
  locale: 'ja',
  messages: {
    ja: {
      title: '続行するには以下の認証を完了してください',
      sliderTips: '左のボタンを押しながらドラッグしてパズルを完成させてください',
      refresh: '更新',
      feedback: 'フィードバック',
      loading: '読み込み中.',
      submitting: '送信中',
      success: '認証成功'
    }
  }
})
// 或初始化后再合并
Captcha.setMessages({ en: { refresh: 'Reload' } })

可用文案 key:title、sliderTips、refresh、feedback、loading、submitting、success。 (错误提示文案由后端返回,不在此表中。)