一、登录防水墙认证（滑动图片验证码）
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",
},
}
Login.vue本部分全部代码
<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 path
urlpatterns = [
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 ObtainJSONWebToken
from lyapi.apps.users.serializers import CustomeSerializer
class 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_HANDLER
class 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 urlopen
import 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): #666
try:
user_obj = models.User.objects.get(Q(username=accout)|Q(phone=accout))
except:
return None
return user_obj
from django.contrib.auth.backends import ModelBackend
import 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 None
if user_obj:
if user_obj.check_password(password):
return user_obj
else:
return None
except Exception:
logger.error('验证过程代码有误，请联系管理员')
return None
8982
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
