h5实现安全认证

最新推荐文章于 2024-08-29 09:22:17 发布

马蹄铁呀

最新推荐文章于 2024-08-29 09:22:17 发布

阅读量636

点赞数

分类专栏： vue.js 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_49022197/article/details/125190446

版权

vue.js 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何在登录页面集成腾讯滑块验证码，包括在HTML中引入JS文件和在具体代码中调用验证过程。当用户完成验证后，会触发发送短信验证码并进行倒计时显示。整个流程涉及前端验证、交互及后台接口调用。

摘要由CSDN通过智能技术生成

第一步

全局 index.html
在这里插入图片描述

<!-- 腾讯滑块验证 -->
    <script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>

或者

本页面
在这里插入图片描述

head() {
   return {
     title: '登录',
     // 验证码的发送前的那个划框, 在这定义腾讯的验证码[captcha]
     script: [{ src: 'https://ssl.captcha.qq.com/TCaptcha.js' }]
   }
 },

第二步

在这里插入图片描述
具体代码

const captcha = new TencentCaptcha('2099788396', res => {
    // res（用户主动关闭验证码）= {ret: 2, ticket: null}
    // res（验证成功） = {ret: 0, ticket: "String", randstr: "String"}
    if (res.ret === 0) {
      const toast = Toast.loading({
        message: '加载中...',
        forbidClick: true,
        loadingType: 'spinner',
        duration: 0
      })
      // const  = await
      sendSmsCode({ mobile, userType: 'c' }).then(({ code, message, data }) => {
        toast.clear()
        if (code === '200') {
          if (data) {
            loginFormData.smsCode = data
          }
          isSendSmsIng.value = true
          loginFormData.smsCount += 1
          countDown() // 调用倒计时函数
          Toast('短信验证码发送成功')
        } else {
          isSendSmsIng.value = false
          Toast(message || '短信验证码发送失败')
        }
      })
    }
  })
  captcha.show()