自学内容网 自学内容网
自学内容网 > 正文

Vue3 配合 TypeScript 接入腾讯云滑块验证 引入 SDK 封装 TypeScript 调用方法 Options 提供以下配置参数

🕗 发布于 2024-04-15 18:28 typescript  腾讯云  ubuntu  

Vue3 配合 TypeScript 接入腾讯云滑块验证

引入 SDK

找到 index.html 在 <head> 标签中增加腾讯云验证器 SDK 引用
./index.html:

<!-- 腾讯云：滑块验证 -->
<!-- 验证码程序依赖(必须)。请勿修改以下程序依赖，如使用本地缓存，或通过其他手段规避加载，会影响程序的正常使用。 -->
<!-- 文档：https://cloud.tencent.com/document/product/1110/36841 -->
<script src="https://ssl.captcha.qq.com/TCaptcha.js" ></script>

封装 TypeScript 调用方法

为了兼容 TypeScript 类型提示，并且优雅的在 Vue3 中使用，我们用下面这个 .ts 文件对 SDK 的 TencentCaptcha 方法进行封装。

./src/util/sliderValidator.ts:

/** 验证结果 */
export type SliderValidatorResult = {
  /** 验证结果，0：验证成功。2：用户主动关闭验证码。 */
  ret: number

  /** 验证成功的票据，当且仅当 ret = 0 时 ticket 有值。 */
  ticket: string

  /** 验证码应用ID */
  CaptchaAppId: string

  /** 自定义透传参数 */
  bizState: any

  /** 本次验证的随机串，请求后台接口时需带上 */
  randstr: string
}

/**
  # TencentCaptcha 的配置参数

  - res（用户主动关闭验证码）= `{ret: 2, ticket: null}`
  - res（验证成功） = `{ret: 0, ticket: string, randstr: string}`
  - res（客户端出现异常错误 仍返回可用票据） = `{ret: 0, ticket: string, randstr: string,  errorCode: number, errorMessage: string}`
*/
export type TencentCaptchaOptions = {

  /** 自定义透传参数，业务可用该字段传递少量数据，该字段的内容会被带入callback回调的对象中 */
  bizState?: any

  /** 开启自适应深夜模式 */
  enableDarkMode?: boolean

  /**
    # sdkOpts
    示例 `{"width": 140, "height": 140}`

    注: 只在移动端原生 webview 调用时传入，为设置的验证码元素 loading 弹框大小
  */
  sdkOpts?: { width: number; height: number }

  /**
    # ready
    验证码加载完成的回调, 回调参数为验证码实际的宽高。
    手机原生端可根据此值设置弹框大小。
  */
  ready?: (p: { sdkView: { width: number; height: number } }) => any
}

/** 腾讯验证码 */
declare class TencentCaptcha {
  constructor(appId: string, callback: (p: SliderValidatorResult) => any, options?: TencentCaptchaOptions)
  show(...params: any): any
}

// 复刻 Promise 下的 Resolve 和 Reject 类型
type Resolve = (value: SliderValidatorResult | PromiseLike<SliderValidatorResult>) => void
type Reject = (reason?: any) => void

// 返回值方法
export type ApplySlider = () => Promise<SliderValidatorResult>

/**
  腾讯滑块验证器
**/
export function sliderVerification(options?: TencentCaptchaOptions): ApplySlider {
  if (!TencentCaptcha) throw new Error('TencentCaptcha is not defined')

  let promise = {} as { resolve: Resolve; reject: Reject }
  let slider: TencentCaptcha
  onMounted(() => {
    slider = new TencentCaptcha(
      // App Id
      import.meta.env.VITE_TENCENT_CAPTCHA_APP_ID,
      // Callback
      (res: SliderValidatorResult) => {
        promise.resolve(res)
      },
      // Options
      options,
    )
  })

  return () => {
    return new Promise<SliderValidatorResult>((resolve, reject) => {
      slider.show()
      promise = { resolve, reject }
    })
  }
}

使用方法

<script lang="ts" setup>
import { sliderVerification, ApplySlider } from '~/util/SliderValidator'
let applySlider: ApplySlider
// 初始化滑块验证器
// 初始化参数，参考 TencentCaptchaOptions
onMounted(() => { applySlider = sliderVerification() })

// 开始验证
async function onVerify() {
  const res = await applySlider()
  console.log('SliderValidatorResult:', res)
}
</script>
<template>
  <button @click="onVerify"> 滑块验证 </button>
</template>

这边会用到一个 import.meta.env.VITE_TENCENT_CAPTCHA_APP_ID 的参数，可以从从腾讯云的验证码控制台中获取, 验证码控制台页面内【图形验证】>【验证列表】进行查看 。如果未新建验证，请根据业务需求选择适合的验证渠道、验证场景进行新建。

使用方法

<script lang="ts" setup>
import { sliderVerification } from '~/util/sliderValidator'
// 初始化验证器实例
const applySlider = sliderVerification({
  // Options
  bizState: 'hello, slider!',
  enableDarkMode: true,
})
// 触发验证器
async function onVerify() {
  const res = await applySlider()
  console.log('SliderValidatorResult:', res)
}
</script>
<template>
  <!-- 将方法绑定到一个按钮 -->
  <button @click="onVerify">
    滑块验证
  </button>
</template>
Options 提供以下配置参数
配置名值类型说明
bizStateAny自定义透传参数，业务可用该字段传递少量数据，该字段的内容会被带入callback回调的对象中
enableDarkModeBoolean开启自适应深夜模式
sdkOptsObject示例 {"width": 140, "height": 140} 注: 只在移动端原生webview调用时传入，为设置的验证码元素loading弹框大小
readyFunction验证码加载完成的回调, 回调参数为验证码实际的宽高。手机原生端可根据此值设置弹框大小

原文地址：https://blog.csdn.net/xiaoxiaowenqiang/article/details/137515371

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

相关文章

自学内容网
Copyright © 2015-2024