锐客网

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

目录

  • 1、背景
  • 2、验证流程
  • 3、创建验证
  • 4、前端代码
    • 4.1 添加核心js文件
    • 4.2 添加配置
    • 4.3 组件修改
  • 5、后端代码
    • 5.1 添加配置
    • 5.2 接收验证并返回
    • 5.3 添加url路由
  • 6、运行测试

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

    1、背景 近期在项目开发练习中用到了登录功能 + 验证码的需求,验证码一般分为三种类型:图片验证码、短信验证码、滑动验证码,相关实现思路如下
    图片验证码
    对于图片验证码的实现可以借助python中的第三方模块pillow的相关方法进行实现(有时间会写文章)
    短信验证码
    短信验证码的主要思路是通过调用第三方短信接口向手机发送短信,接收用户输入并与系统生成的随机数串比对
    滑动验证码
    滑动验证码一般是利用第三方的验证码服务提供商,例如腾讯防水墙、极验验证等。和我们自己实现验证码的思路相比较,第三方验证码更为安全可靠
    本文以腾讯防水墙为例,记录在vuedrf组合的前后端分离项目中接入第三方滑动验证码服务

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

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

    3、创建验证 首先登陆到腾讯云控制台创建一个云 API 密钥,在左侧导航栏选择【访问管理】>【API 密钥管理】,进入 API 密钥管理页面,单击【新建密钥】创建密钥。
    然后进入验证码控制台,单击【新建验证】,根据需求输入验证名称、验证所属域名、验证渠道(Web 端或小程序插件)及验证场景,填写完成后,单击【确定】完成验证创建。
    最后,查看申请到的资源信息

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

    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部分
    export default {name: 'Login',data() {return {login_type: 0,remember_me: false,username: "",password: "",}},methods: {show_captcha() {var captcha1 = new TencentCaptcha(this.$settings.TC_captcha.app_id, res=> {/*res:appid: "2020427221"# 验证码的APPIDrandstr: "@GCV"# 随机字符串,防止重复ret: 0# 0表示用户操作成功,2表示用户主动关闭验证码窗口ticket: ""# 验证通过以后的票据,提供给后端,将来到验证码服务器中进行*/// console.log(res); this.$axios.get(`${this.$settings.HOST}/users/captcha/`,{params:{ticket: res.ticket,randstr: res.randstr,}}).then(response=>{if(response.data.detail){// 继续进行登录处理this.login(); }}).catch(error=>{this.$message.error("对不起,验证码校验不通过!"); }); }); captcha1.show(); },login() {// 判断用户是否输入用户名或密码,否则提示用户输入if (!this.username) {this.$message.error('请输入用户名!')} else if (!this.password) {this.$message.error('请输入密码!')} else {// 携带用户名和密码,提交post请求this.$axios.post(`${this.$settings.HOST}/users/login/`, {username: this.username,password: this.password,}).then((res) => {// 存储tokenif (this.remember_me) {localStorage.token = res.data.token; sessionStorage.removeItem('token')} else {sessionStorage.token = res.data.token; localStorage.removeItem('token')}// 跳转到首页this.$router.push('/hippo/showcenter')}).catch((error) => {// 捕获请求返回的错误,4xx,5xxthis.$message.error('用户名或者密码有误,请重新输入!')})}},},};


    5、后端代码 相关操作指引可以参考官方示例:https://007.qq.com/python-access.html

    5.1 添加配置
    将腾讯验证码控制台查看到的验证信息配置到drf后端代码的配置文件中
    # 腾讯防水墙配置TENCENT_CAPTCHA = {"GATEWAY": "https://ssl.captcha.qq.com/ticket/verify",# 验证码验证地址"APPID": "2020427221",# 验证码应用的APPID"App_Secret_Key": "0mnAr1EpNTjm63fQgKPU87w**",# 验证码应用的AppSecretKey}


    5.2 接收验证并返回

    在用户app下编写用户验证码的普通类视图view
    from rest_framework.views import APIViewfrom rest_framework.response import Responsefrom rest_framework import statusfrom django.conf import settingsfrom urllib.parse import urlencodefrom urllib.request import urlopenimport jsonimport ssl# Create your views here.class CaptchaAPIView(APIView):"""验证码"""ssl._create_default_https_context = ssl._create_unverified_contextdef get(self, request):"""接收客户端提交的验证码相关信息"""params = {"aid": settings.TENCENT_CAPTCHA.get("APPID"),"AppSecretKey": settings.TENCENT_CAPTCHA.get("App_Secret_Key"),"Ticket": request.query_params.get("ticket"),"Randstr": request.query_params.get("randstr"),"UserIP": request._request.META.get("REMOTE_ADDR")}# 把字典数据转换成地址栏的查询字符串格式# aid=xxx&AppSecretKey=xxx&xxxxxparams = urlencode(params)# print(params)url = settings.TENCENT_CAPTCHA.get("GATEWAY")# 发送http的get请求f = urlopen("%s?%s" % (url, params))# https://ssl.captcha.qq.com/ticket/verify?aid=xxx&AppSecretKey=xxx&xxxxx# f.read() 读取响应信息content = f.read()res = json.loads(content)# print(res)if int(res.get("response")) == 1:# 验证成功return Response({"detail": 1})else:# 验证失败return Response({"detail": 0}, status=status.HTTP_400_BAD_REQUEST)


    5.3 添加url路由
    最后,添加用于前端发送请求的后端url路由
    from django.urls import pathfrom rest_framework_jwt.views import obtain_jwt_tokenfrom . import viewsurlpatterns = [path('login/', obtain_jwt_token),path('captcha/', views.CaptchaAPIView.as_view()),# 验证码校验]


    6、运行测试
    最终效果如下

    vue+drf+第三方滑动验证码接入的实现
    文章图片
    在腾讯验证码的后台可以看到详细的请求信息图表

    vue+drf+第三方滑动验证码接入的实现
    文章图片
    【vue+drf+第三方滑动验证码接入的实现】到此这篇关于vue+drf+第三方滑动验证码接入的实现的文章就介绍到这了,更多相关vue+drf+第三方滑动验证码接入内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!