DRF 中使用级验科技滑动验证

接口的login 登录

使用 Django 中的 auth 认证因为之前合并了 django 的用户表创建的用户密码会在内部进行加密不知道加密方式所以要使用 authenticate 来进行判断
使用 APIView 自定义一个视图

导入 认证
from django.contrib.auth import authenticate

使用 自带的 认证来判断用户名跟密码
class LoginView(APIView):
    def post(self, request):
        res_obj = MyResponse()  # 使用自定义的 响应对象
        username, password = request.data.get('username'), request.data.get('password')
        auth_obj = authenticate(username=username,password=password)
        if auth_obj:
            res_obj.data = '登陆成功!'
        else:
            res_obj.data = '账号或密码错误!'
        # logger.debug(request.data)
        return Response(res_obj.dict)

可以使用邮箱登录

from django.contrib.auth import authenticate, login, logout
from django.contrib.auth.backends import ModelBackend
from django.db.models import Q
from models import UserProfile

# 让用户可以用邮箱登录
# setting 里要有对应的配置
class CustomBackend(ModelBackend):
    def authenticate(self, username=None, password=None, **kwargs):
        try:
            user = UserProfile.objects.get(Q(username = username) | Q(email=username))
            if user.check_password(password):
                return user
        except Exception as e:
            return None
复制代码
记得引入models中创建的表

# AUTH 方法（支持邮箱登录）
AUTHENTICATION_BACKENDS = ('users.views.CustomBackend',)

级验科技滑动验证

注意官方文档 学习使用 SDK 并下载匹配使用的 SDK

后端创建对应的返回初始化滑动验证的 json 数据

from django.shortcuts import HttpResponse
# 从 SDK的  \gt3-python-sdk-master\sdk  中 查找  工具类 
from utils.geetest import GeetestLib

# 请在官网申请ID使用，示例ID不可使用
pc_geetest_id = "b46d1900d0a894591916ea94ea91bd2c"
pc_geetest_key = "36fc3fe98530eea08dfc6ce76e3d24c4"

# 页面初始化时请求的 数据
def pcgetcaptcha(request):
    user_id = 'test'
    gt = GeetestLib(pc_geetest_id, pc_geetest_key)
    status = gt.pre_process(user_id)
    # 前后端分离的  项目  永不到  
    # request.session[gt.GT_STATUS_SESSION_KEY] = status    
    # request.session["user_id"] = user_id
    response_str = gt.get_response_str()
    return HttpResponse(response_str)

从前端接收对应的数据

//  导入 必须的js文件  从sdk 文档中 查找 
import '@/assets/js/gt'

created() {
    this.$axios.get('/pcgetcaptcha/')
        .then((res) => {
        console.log(res);
        //请检测data的数据结构， 保证data.gt, data.challenge, data.success有值
        let data = res.data;
        initGeetest({
            // 以下配置参数来自服务端 SDK
            gt: data.gt,
            challenge: data.challenge,
            offline: !data.success,
            new_captcha: true,
            // product: 'popup',  // 选项:  float、popup、custom、bind
        }, function (captchaObj) {
            // 这里可以调用验证实例 captchaObj 的实例方法
            captchaObj.appendTo("#captchaBox"); 
            //将验证按钮插入到宿主页面中captchaBox元素内  id 选择器
        })
    })
},

二次验证前端发送登录请求并且携带着滑动验证的参数

注意:

validateResult 是包存在组件中的 data 数据在通过滑动验证时执行的函数需要注意 this 的指向问题通过在外部定义变量来保存 this 对象

methods: {
    // 登录的 点击按钮
    login_btn() {
        this.$axios.post('/login/', {
            username: this.username,
            password: this.password,
            // 滑动验证 相应的 参数
            geetest_challenge: this.validateResult.geetest_challenge,
            geetest_validate: this.validateResult.geetest_validate,
            geetest_seccode: this.validateResult.geetest_seccode,
        })
            .then((res) => {
            if (res.data.code === 0) {
                this.$router.push({name: 'home'})
            } else {
                alert(res.data.error)
            }
        })
    }
},
    created() {
        this.$axios.get('/pcgetcaptcha/')
            .then((res) => {
            // 定义变量 保存 this 指向
            let base = this;
            //请检测data的数据结构， 保证data.gt, data.challenge, data.success有值\
            let data = res.data;
            initGeetest({
                // 以下配置参数来自服务端 SDK
                gt: data.gt,
                challenge: data.challenge,
                offline: !data.success,
                new_captcha: true,
                // product: 'popup',  // 选项:  float、popup、custom、bind
            }, function (captchaObj) { // 这里可以调用验证实例 captchaObj 的实例方法
                //将验证按钮插入到宿主页面中captchaBox元素内  	id 选择器
                captchaObj.appendTo("#captchaBox");
                captchaObj.onReady(function () {
                    // 加载完验证控件之后 执行
                }).onSuccess(function () {
                    // 验证成功之后 执行
                    let result = captchaObj.getValidate();
                    console.log(result);
                    base.validateResult = result;
                }).onError(function () {
                    // console.log(3333)
                    //your code
                }) }) })},

在视图中接收用户信息以及滑动验证的数据

class LoginView(APIView):
    def post(self, request):
        res_obj = MyResponse()
        # 用于滑动验证
        gt = GeetestLib(pc_geetest_id, pc_geetest_key)
        challenge = request.data.get(gt.FN_CHALLENGE, '')
        validate = request.data.get(gt.FN_VALIDATE, '')
        seccode = request.data.get(gt.FN_SECCODE, '')
        status = True   # 前后端分离  没有session 数据 改为 True
        if status:
            # 通过 级验科技验证
            result = gt.success_validate(challenge, validate, seccode, None)
        else:
            # 通过本地验证
            result = gt.failback_validate(challenge, validate, seccode)
        if result:  # 判断是否是真人  还是爬虫
            # 常规用户登录的 数据验证
            username, password = request.data.get('username'), request.data.get('password')
            auth_obj = authenticate(username=username,password=password)
            if auth_obj:
                res_obj.data = '登陆成功!'
            else:
                res_obj.error = '账号或密码错误!'
                res_obj.code = 1
        else:
            # 滑动验证不通过
            res_obj.code = 1
            res_obj.error = '必须通过滑动验证!'
        return Response(res_obj.dict)

posted @ 2019-02-27 22:14 拐弯阅读(357) 评论(0) 编辑收藏举报

刷新页面返回顶部

拐弯

DRF 中使用 级验科技滑动验证

接口的login 登录

级验科技滑动验证

公告

DRF 中使用级验科技滑动验证