vue+drf+第三方滑动验证码接入的实现

vue+drf+第三方滑动验证码接入的实现_第1张图片

1、背景

近期在项目开发练习中用到了登录功能 + 验证码的需求,验证码一般分为三种类型:图片验证码、短信验证码、滑动验证码,相关实现思路如下

图片验证码

对于图片验证码的实现可以借助python中的第三方模块pillow的相关方法进行实现(有时间会写文章)

短信验证码

短信验证码的主要思路是通过调用第三方短信接口向手机发送短信,接收用户输入并与系统生成的随机数串比对

滑动验证码

滑动验证码一般是利用第三方的验证码服务提供商,例如腾讯防水墙、极验验证等。和我们自己实现验证码的思路相比较,第三方验证码更为安全可靠

本文以腾讯防水墙为例,记录在vuedrf组合的前后端分离项目中接入第三方滑动验证码服务

2、验证流程

验证的前后端调用时序图如下(图片来源于腾讯验证码官方文档)

vue+drf+第三方滑动验证码接入的实现_第2张图片

3、创建验证

首先登陆到腾讯云控制台创建一个云 API 密钥,在左侧导航栏选择【访问管理】>【API 密钥管理】,进入 API 密钥管理页面,单击【新建密钥】创建密钥。

然后进入验证码控制台,单击【新建验证】,根据需求输入验证名称、验证所属域名、验证渠道(Web 端或小程序插件)及验证场景,填写完成后,单击【确定】完成验证创建。

最后,查看申请到的资源信息

vue+drf+第三方滑动验证码接入的实现_第3张图片

4、前端代码

4.1 添加核心js文件

把防水墙的前端核心js文件在项目根目录下index.html中使用script标签引入

index.html



  
    
    
    
    opsweb
  
  
    

或者在src/main.js中通过import引入,导入前需要将上面的核心js文件下载到项目静态文件目录中

// 导入防水墙验证码的核心js文件
import "../static/js/TCaptcha";

4.2 添加配置

src/settings.js中添加配置

export default {
  HOST: 'http://opsapi.ssgeek.com:8000',  // 后端api地址
  TC_captcha:{
    app_id: "2020427221",  // 腾讯防水墙APPID配置
  },
}


4.3 组件修改

修改登录页面vue组件Login.vue,将登录按钮绑定到验证码显示的自定义方法上,先触发验证码请求再触发登录

template部分




script部分


                    
                    

你可能感兴趣的:(vue+drf+第三方滑动验证码接入的实现)