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

2024-07-29 09:22:15

1、背景

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

图片验证码

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

短信验证码

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

滑动验证码

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

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

2、验证流程

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

3、创建验证

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

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

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

4、前端代码

4.1 添加核心js文件

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

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>
    <title>opsweb</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

或者在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部分

<template>
<!--登录内容开始-->
<div class="inp" v-if="login_type==0">
  <input v-model="username" type="text" placeholder="用户名" class="user">
  <input v-model="password" type="password" name="" class="pwd" placeholder="密码">
  <div class="rember">
    <p>
      <input v-model="remember_me" type="checkbox" class="no" name="a"/>
      <span>记住密码</span>
    </p>
  </div>
  <button class="login_btn" @click="show_captcha">登录</button>
<!--登录内容结束-->
</div>
</template>

script部分

<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"  # 验证码的APPID
        randstr: "@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) => {
          // 存储token
          if (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,5xx
          this.$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 APIView
from rest_framework.response import Response
from rest_framework import status
from django.conf import settings
from urllib.parse import urlencode
from urllib.request import urlopen
import json
import ssl

# Create your views here.
class CaptchaAPIView(APIView):
    """验证码"""
    ssl._create_default_https_context = ssl._create_unverified_context

    def 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&xxxxx
        params = 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 path
from rest_framework_jwt.views import obtain_jwt_token
from . import views

urlpatterns = [
    path('login/', obtain_jwt_token),
    path('captcha/', views.CaptchaAPIView.as_view()),  # 验证码校验
]

6、运行测试

最终效果如下

在腾讯验证码的后台可以看到详细的请求信息图表

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

vue_drf实现短信验证码

目录一.需求 1,需求二.sdk参数配置 1,目录结构三.代码实现 1,后端代码 2,前端代码一.需求 1,需求我们在做网站开发时,登录页面很多情况下是可以用手机号接收短信验证码,然后实现登录的,那我们今天就来做一做这一功能. 伪代码: 进入登录页面,点击短信登录输入手机号码,点击获取验证码,后端在redis里保存验证码用户把手机收到的验证码输入,点击登录,会把手机号和验证码发往后端,然后进行验证要想发送短信,让用户收到短信,我们的借助一个容联云的接口,注册一个账号. 使用时需要
vue+drf+第三方滑动验证码接入的实现

目录 1.背景 2.验证流程 3.创建验证 4.前端代码 4.1 添加核心js文件 4.2 添加配置 4.3 组件修改 5.后端代码 5.1 添加配置 5.2 接收验证并返回 5.3 添加url路由 6.运行测试 1.背景近期在项目开发练习中用到了登录功能 + 验证码的需求,验证码一般分为三种类型:图片验证码.短信验证码.滑动验证码,相关实现思路如下图片验证码对于图片验证码的实现可以借助python中的第三方模块pillow的相关方法进行实现(有时间会写文章) 短信验证码短信验证码的主要
Vue插件之滑动验证码用法详解

本文实例讲述了Vue插件之滑动验证码用法.分享给大家供大家参考,具体如下: 目录预览基于滑动式的验证码,免于字母验证码的繁琐输入用于网页注册或者登录安装使用方法更新记录 V1.1.2 版本 V1.1.1 描述(此版本有bug,请使用最新版) V1.1.0 版本新增属性`imgs`: 内置方法 props传参(均为可选) 自定义回调函数注意事项预览基于滑动式的验证码,免于字母验证码的繁琐输入用于网页注册或者登录目前仅前端实现,支持移动端滑动事件.版本V1.1.2 github
Vue插件之滑动验证码

本文实例为大家分享了Vue插件之滑动验证码的具体代码,供大家参考,具体内容如下预览目前仅前端实现,支持移动端滑动事件.版本V1.0.5 github文档地址安装 npm install --save vue-monoplasty-slide-verify 使用方法: // main.js import Vue from 'vue'; import SlideVerify from 'vue-monoplasty-slide-verify'; Vue.use(SlideVerify); //
vue如何在项目中调用腾讯云的滑动验证码

在项目中使用滑动验证,可以调用腾讯云的组件和接口(付费项目) 导言首先看看官方的步骤教学: https://cloud.tencent.com/document/product/1110/36839 其中,前端涉及到的是"步骤3:客户端接入",里面介绍了两种接入方法:"快速接入"和"定制接入". 项目是原生HTML 或者 jQuery 开发,那么可以使用"快速接入". 项目使用 vue.react 等框架开发,则需要使用&q
使用Vue 实现滑动验证码功能

做网络爬虫的同学肯定见过各种各样的验证码,比较高级的有滑动.点选等样式,看起来好像挺复杂的,但实际上它们的核心原理还是还是很清晰的,本文章大致说明下这些验证码的原理以及带大家实现一个滑动验证码. 我之前做过 Web 相关开发,尝试对接过 Lavavel 的极验验证,当时还开发了一个 Lavavel 包: https://github.com/Germey/LaravelGeetest ,在开发包的过程中了解到了验证码的两步校验规则. 实际上这类验证码的校验是分为两个步骤的: 1.第一步就是前端的
vue仿淘宝滑动验证码功能(样式模仿)

我们知道验证码的目的是为了验证到底是人还是机器. 淘宝滑动验证码会采集用户的操作数据,环境数据等等,通过算法加密成一个字符串,提交到服务器分析,判断是不是人工在操作. 我这里写的只是模仿了样式,并没有进行那些复杂的操作,所以并不安全(不能判断人还是机器). 因为touch事件和mouse事件不同,和获取clientX在移动端和pc端也不同!!!所以分两端下面有PC端和移动端!!!(2019-03-12更新) 本文基于vue,引入下面组件可以直接使用 1.实际效果 2.PC端!!! vue组
python自动化操作之动态验证码、滑动验证码的降噪和识别

目录前言一.动态验证码二.滑动验证码三.验证码的降噪四.验证码的识别总结前言 python对动态验证码.滑动验证码的降噪和识别,在各种自动化操作中,我们经常要遇到沿跳过验证码的操作,而对于验证码的降噪和识别,的确困然了很多的人.这里我们就详细讲解一下不同验证码的降噪和识别. 一.动态验证码动态验证码是服务端生成的,点击一次,就会更换一次,这就会造成很多人在识别的时候,会发现验证码一直过期这是因为,如果你是把图片下载下来,进行识别的话,其实在下载的这个请求中,其实相当于点击了一次
python识别和降噪动态验证码与滑动验证码

目录一.动态验证码二.滑动验证码三.验证码的降噪四.验证码的识别〝古人学问遗无力,少壮功夫老始成〞 python对动态验证码.滑动验证码的降噪和识别,在各种自动化操作中,我们经常要遇到沿跳过验证码的操作,而对于验证码的降噪和识别,的确困然了很多的人.这里我们就详细讲解一下不同验证码的降噪和识别.如果这篇文章能给你带来一点帮助,希望各位小伙伴们多多支持我们. 一.动态验证码动态验证码是服务端生成的,点击一次,就会更换一次,这就会造成很多人在识别的时候,会发现验证码一直过期这是因为
Java selenium处理极验滑动验证码示例

要爬取一个网站遇到了极验的验证码,这周都在想着怎么破解这个,网上搜了好多知乎上看到有人问了这问题,我按照这思路去大概实现了一下. 1.使用htmlunit(这种方式我没成功,模拟鼠标拖拽后轨迹没生成,可以跳过) 我用的是java,我首先先想到了用直接用htmlunit,我做了点初始化 private void initWebClient() { if (webClient != null) { return; } webClient = new WebClient(BrowserVersion.
Java实现滑动验证码的示例代码

最近滑动验证码在很多网站逐步流行起来,一方面对用户体验来说,比较新颖,操作简单,另一方面相对图形验证码来说,安全性并没有很大的降低.当然到目前为止,没有绝对的安全验证,只是不断增加攻击者的绕过成本. 接下来分析下滑动验证码的核心流程: 后端随机生成抠图和带有抠图阴影的背景图片,后台保存随机抠图位置坐标前端实现滑动交互,将抠图拼在抠图阴影之上,获取到用户滑动距离值,比如以下示例前端将用户滑动距离值传入后端,后端校验误差是否在容许范围内. 这里单纯校验用户滑动距离是最基本的校验,出于更高的安全考