luffcc项目-04-登录防水墙认证（滑动图片验证码）、在登录认证中接入防水墙、前端获取显示并校验验证码

一、登录防水墙认证（滑动图片验证码）

1.在登录认证中接入防水墙

验证码有三种：图片验证码，短信验证码，滑动验证码
官网：https://007.qq.com
使用微信扫码登录腾讯云控制台，然后根据官方文档，把验证码集成到项目中

快速接入：https://007.qq.com/python-access.html?ADTAG=acces.start

访问地址: https://cloud.tencent.com/document/product/1110/36839
访问云API秘钥
访问验证码控制台: https://console.cloud.tencent.com/captcha
新建验证应用[ 新用户可以领取一个免费的验证码套餐 ]

获取当前验证码应用的应用ID和应用秘钥.

把秘钥和ID保存到settings/dev.py配置文件中.

# 腾讯防水墙配置
FSQ = {'URL':"https://ssl.captcha.qq.com/ticket/verify",'appid':'2080330111','app_serect_key':'07v2KHaK2CMY8tkl_aOrbcA**',
}

2.前端获取显示并校验验证码

把防水墙的前端核心js文件在客户端根目录下index.html中使用script引入或者在src/main.js中通过import引入。
下载地址：https://ssl.captcha.qq.com/TCaptcha.js

    <script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>

在客户端项目的src/settings.js中添加配置：

export default {Host:"http://api.renran.cn:8000",TC_captcha:{app_id: "2080330111",},
}

<template><div class="login box"><img src="../../static/img/Loginbg.3377d0c.jpg" alt=""><div class="login"><div class="login-title"><img src="../../static/img/Logotitle.1ba5466.png" alt=""><p>帮助有志向的年轻人通过努力学习获得体面的工作和生活!</p></div><div class="login_box"><div class="title"><span @click="login_type=0">密码登录</span><span @click="login_type=1">短信登录</span></div><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 id="geetest1"></div><div class="rember"><p><input type="checkbox" class="no" name="a" v-model="remember"/><span>记住密码</span></p><p>忘记密码</p></div><button class="login_btn" @click="loginHandle">登录</button><p class="go_login" >没有账号 <router-link to="/user/register">立即注册</router-link></p></div><div class="inp" v-show="login_type==1"><input v-model = "username" type="text" placeholder="手机号码" class="user"><input v-model = "password"  type="text" class="pwd" placeholder="短信验证码"><button id="get_code">获取验证码</button><button class="login_btn">登录</button><p class="go_login" >没有账号 <span>立即注册</span></p></div></div></div></div>
</template><script>
export default {name: 'Login',data(){return {login_type: 0,username:"",password:"",remember:false,}},methods:{loginHandle(){var captcha1 = new TencentCaptcha('2080330111', (res) =>{if (res.ret === 0){console.log(res.randstr);console.log(res.ticket);this.$axios.post(`${this.$settings.Host}/users/login/`,{username:this.username,password:this.password,ticket:res.ticket,randstr:res.randstr,}).then((res)=>{console.log(res);// console.log(this.remember);if (this.remember){localStorage.token = res.data.token;localStorage.username = res.data.username;localStorage.id = res.data.id;sessionStorage.removeItem('token');sessionStorage.removeItem('username');sessionStorage.removeItem('id');}else {sessionStorage.token = res.data.token;sessionStorage.username = res.data.username;sessionStorage.id = res.data.id;localStorage.removeItem('token');localStorage.removeItem('username');localStorage.removeItem('id');}this.$confirm('下一步想去哪消费！', '提示', {confirmButtonText: '去首页',cancelButtonText: '去个人中心',type: 'success'}).then(() => {this.$router.push('/');}).catch(() => {this.$router.push('/person');});}).catch((error)=>{this.$alert('用户名或者密码错误', '登录失败', {confirmButtonText: '确定',});})}});captcha1.show(); // 显示验证码}},};
</script><style scoped>
.box{width: 100%;height: 100%;position: relative;overflow: hidden;
}
.box img{width: 100%;min-height: 100%;
}
.box .login {position: absolute;width: 500px;height: 400px;top: 0;left: 0;margin: auto;right: 0;bottom: 0;top: -338px;
}
.login .login-title{width: 100%;text-align: center;
}
.login-title img{width: 190px;height: auto;
}
.login-title p{font-family: PingFangSC-Regular;font-size: 18px;color: #fff;letter-spacing: .29px;padding-top: 10px;padding-bottom: 50px;
}
.login_box{width: 400px;height: auto;background: #fff;box-shadow: 0 2px 4px 0 rgba(0,0,0,.5);border-radius: 4px;margin: 0 auto;padding-bottom: 40px;
}
.login_box .title{font-size: 20px;color: #9b9b9b;letter-spacing: .32px;border-bottom: 1px solid #e6e6e6;display: flex;justify-content: space-around;padding: 50px 60px 0 60px;margin-bottom: 20px;cursor: pointer;
}
.login_box .title span:nth-of-type(1){color: #4a4a4a;border-bottom: 2px solid #84cc39;
}.inp{width: 350px;margin: 0 auto;
}
.inp input{border: 0;outline: 0;width: 100%;height: 45px;border-radius: 4px;border: 1px solid #d9d9d9;text-indent: 20px;font-size: 14px;background: #fff !important;
}
.inp input.user{margin-bottom: 16px;
}
.inp .rember{display: flex;justify-content: space-between;align-items: center;position: relative;margin-top: 10px;
}
.inp .rember p:first-of-type{font-size: 12px;color: #4a4a4a;letter-spacing: .19px;margin-left: 22px;display: -ms-flexbox;display: flex;-ms-flex-align: center;align-items: center;/*position: relative;*/
}
.inp .rember p:nth-of-type(2){font-size: 14px;color: #9b9b9b;letter-spacing: .19px;cursor: pointer;
}.inp .rember input{outline: 0;width: 30px;height: 45px;border-radius: 4px;border: 1px solid #d9d9d9;text-indent: 20px;font-size: 14px;background: #fff !important;
}.inp .rember p span{display: inline-block;font-size: 12px;width: 100px;/*position: absolute;*/
/*left: 20px;*/}
#geetest{margin-top: 20px;
}
.login_btn{width: 100%;height: 45px;background: #84cc39;border-radius: 5px;font-size: 16px;color: #fff;letter-spacing: .26px;margin-top: 30px;
}
.inp .go_login{text-align: center;font-size: 14px;color: #9b9b9b;letter-spacing: .26px;padding-top: 20px;
}
.inp .go_login span{color: #84cc39;cursor: pointer;
}
</style>

服务端对验证返回的票据进行验证才允许登录。
users/urls.py，代码：

from rest_framework_jwt.views import obtain_jwt_token, verify_jwt_token
from . import views
from django.urls import pathurlpatterns = [path(r'login/', views.CustomLoginView.as_view()),  #颁发token值的path(r'verify/', verify_jwt_token),]

视图中针对原来的jwt登录进行改造。
views.py

from django.shortcuts import render# Create your views here.
from rest_framework_jwt.views import ObtainJSONWebTokenfrom lyapi.apps.users.serializers import CustomeSerializerclass CustomLoginView(ObtainJSONWebToken):serializer_class = CustomeSerializer

在原来jwt的序列化器基础上增加验证相关的参数。
serializers.py


from rest_framework_jwt.serializers import JSONWebTokenSerializer
from rest_framework import serializers
from rest_framework_jwt.compat import get_username_field, PasswordField
from django.utils.translation import ugettext as _
from django.contrib.auth import authenticate, get_user_model
from rest_framework_jwt.settings import api_settings
User = get_user_model()
jwt_payload_handler = api_settings.JWT_PAYLOAD_HANDLER
jwt_encode_handler = api_settings.JWT_ENCODE_HANDLER
jwt_decode_handler = api_settings.JWT_DECODE_HANDLER
jwt_get_username_from_payload = api_settings.JWT_PAYLOAD_GET_USERNAME_HANDLERclass CustomeSerializer(JSONWebTokenSerializer):def __init__(self, *args, **kwargs):"""Dynamically add the USERNAME_FIELD to self.fields."""super(JSONWebTokenSerializer, self).__init__(*args, **kwargs)self.fields[self.username_field] = serializers.CharField()self.fields['password'] = PasswordField(write_only=True)self.fields['ticket'] = serializers.CharField(write_only=True)self.fields['randstr'] = serializers.CharField(write_only=True)#def validate(self, attrs):credentials = {self.username_field: attrs.get(self.username_field),'password': attrs.get('password'),'ticket': attrs.get('ticket'),'randstr': attrs.get('randstr'),}#{'username':'root',password:'123'}if all(credentials.values()):user = authenticate(self.context['request'],**credentials)  #self.context['request']当前请求的request对象if user:if not user.is_active:msg = _('User account is disabled.')raise serializers.ValidationError(msg)payload = jwt_payload_handler(user)return {'token': jwt_encode_handler(payload),'user': user}else:msg = _('Unable to log in with provided credentials.')raise serializers.ValidationError(msg)else:msg = _('Must include "{username_field}" and "password".')msg = msg.format(username_field=self.username_field)raise serializers.ValidationError(msg)

在自定义认证类的authenticate方法中，增加对于验证码的判断逻辑.
utils.py

from urllib.parse import urlencode
import json, urllib
from urllib.request import urlopenimport requests
from django.conf import settings
def jwt_response_payload_handler(token, user=None, request=None):# print('>>>>>',user,type(user))return {'token': token,'username': user.username,'id':user.id}from users import models
from django.db.models import Q
def get_user_obj(accout):  #666try:user_obj = models.User.objects.get(Q(username=accout)|Q(phone=accout))except:return Nonereturn user_objfrom django.contrib.auth.backends import ModelBackendimport logging
logger = logging.getLogger('django')class CustomeModelBackend(ModelBackend):'''''ticket': attrs.get('ticket'),'randstr': attrs.get('randstr'),'''def authenticate(self, request, username=None, password=None, **kwargs):try:user_obj = get_user_obj(username)ticket = kwargs.get('ticket')userip = request.META['REMOTE_ADDR']randstr = kwargs.get('randstr')print('userip:', userip)'''https://captcha.tencentcloudapi.com/?Action=DescribeCaptchaResult&CaptchaType=9&Ticket=xxxx&UserIp=127.0.0.1&Randstr=xxx&CaptchaAppId=201111111&AppSecretKey=xxxxxx'''# ----------------------------------# 腾讯验证码后台接入demo# ----------------------------------# ----------------------------------# 请求接口返回内容# @param  string appkey [验证密钥]# @param  string params [请求的参数]# @return  string# ----------------------------------params = {"aid": settings.FSQ.get('appid'),"AppSecretKey": settings.FSQ.get('app_serect_key'),"Ticket": ticket,"Randstr": randstr,"UserIP": userip}params = urlencode(params).encode()url = settings.FSQ.get('URL')f = urlopen(url, params)content = f.read()res = json.loads(content)print(res)  # {'response': '1', 'evil_level': '0', 'err_msg': 'OK'}if res.get('response') != '1':return Noneif user_obj:if user_obj.check_password(password):return user_objelse:return Noneexcept Exception:logger.error('验证过程代码有误，请联系管理员')return None

luffcc项目-04-登录防水墙认证（滑动图片验证码）、在登录认证中接入防水墙、前端获取显示并校验验证码相关推荐

魔方APP项目-07-客户端提交登录信息、在APICloud中集成防水墙验证码，前端获取显示并校验验证码、服务端校验验证码、保存用户登录状态，APICloud提供的数据存储、客户端保存用户登陆数据
用户登录一.客户端提交登录信息 html/login.html,代码: <!DOCTYPE html> <html> <head><title>登录& ...
WordPress登录注册评论滑动图片验证码插件腾讯云验证码(CAPTCHA)
为了网站安全我们一般会在登录页.注册页.评论页添加验证码功能,传统的验证码都是输入字母数字或加减法等,现在比较流行图片滑动验证码.最为关键的是腾讯云提供有图形验证(图片滑动验证码)服务器(一年内提供几 ...
登录界面的滑动_电脑同时登录两个微信，原来这么简单？3步搞定！
关注我?发送[模板],送海量精选 PPT 模板! 作者:小斯策划:视频小分队编辑:小胖 Hey hey,what's up? what's up! 这里是小斯,AKA差一点玩转PPT,也要给你分享 ...
vue中纯前端实现滑动图片验证的方式
Hello,大家好呀~ 众所周知,滑动图片验证一直是各类网站登录和注册的一种校验方式,是用来防止有人恶意使用脚本批量进行操作从而设置的一种安全保护方式. 一般而言,这种滑动图片验证是可以通过后端配合完 ...
登录页面html5 css3 js代码,H5+css3+js搭建带验证码的登录页面
本文实例为大家分享了H5+css3+js搭建带验证码的登录页面,供大家参考,具体内容如下 login.html EasyBuy后台管理系统 .main_bar{ width:1350px; heigh ...
登录页面带验证码html,使用H5+css3+js实现带验证码的登录页面
使用H5+css3+js实现带验证码的登录页面发布时间:2020-10-28 19:51:18 来源:亿速云阅读:151 作者:Leah 本篇文章为大家展示了使用H5+css3+js实现带验证码的 ...
H5+css3+js搭建带验证码的登录页面
login.html [html] view plain copy <!DOCTYPE HTML> <html> <head> <title>EasyB ...
java验证码验证码_Java登录页面实时验证用户名密码和动态验证码
●登录名和密码是同时验证的,并不是先验证登录名是否存在,然后再验证密码是否正确,是同时进行验证,若登录名和密码当中一个条件不符合,则提示用户登录名或者密码错误, 这样做的意义是为了保证用户信息的安全( ...
【项目】springboot中使用kaptcha生成验证码，登录时密码加盐处理
记录使用kaptcha的过程为前后端分离项目,前端vue框架文章目录 0.下载jar包 1.添加依赖 2.添加KaptchaConfig配置 3.后端用于登录的封装类编写 4.修改controll ...
【49.Auth2.0认证与授权过程-微博开放平台认证授权过程-百度开放平台认证授权过程-社交登录实现(微博授权)-分布式Session问题与解决方案-SpringSession整合-Redis】
一.知识回顾 [0.三高商城系统的专题专栏都帮你整理好了,请点击这里!] [1-系统架构演进过程] [2-微服务系统架构需求] [3-高性能.高并发.高可用的三高商城系统项目介绍] [4-Linux云 ...

luffcc项目-04-登录防水墙认证（滑动图片验证码）、在登录认证中接入防水墙、前端获取显示并校验验证码

一、登录防水墙认证（滑动图片验证码）

1.在登录认证中接入防水墙

2.前端获取显示并校验验证码

luffcc项目-04-登录防水墙认证（滑动图片验证码）、在登录认证中接入防水墙、前端获取显示并校验验证码相关推荐

最新文章

热门文章