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
和drf
组合的前后端分离项目中接入第三方滑动验证码服务2、验证流程 验证的前后端调用时序图如下(图片来源于腾讯验证码官方文档)
文章图片
3、创建验证 首先登陆到腾讯云控制台创建一个云 API 密钥,在左侧导航栏选择【访问管理】>【API 密钥管理】,进入 API 密钥管理页面,单击【新建密钥】创建密钥。
然后进入验证码控制台,单击【新建验证】,根据需求输入验证名称、验证所属域名、验证渠道(Web 端或小程序插件)及验证场景,填写完成后,单击【确定】完成验证创建。
最后,查看申请到的资源信息
文章图片
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+第三方滑动验证码接入内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
推荐阅读
- android第三方框架(五)ButterKnife
- thinkphp|thinkphp 3.2 如何调用第三方类库
- Android7.0|Android7.0 第三方应用无法访问私有库
- iOS常用第三方库
- 【微信开放平台】微信第三方扫码登录(亲测可用)
- FaceBook第三方登录换号重新登录
- 第三方框架|第三方框架 | AFNetworking源码解析(3) 请求过程
- android仿抖音上下切换视频|android仿抖音上下切换视频,仿抖音上下滑动切换视频
- 那些年第三方授权踩过的坑
- cocos2dx下的滑动选择效果