vue2中使用vaptcha并生成一个组件提交到drf后端把后端也写一下

前端代码：

<template>
  <div>
    <div ref="vaptcha"></div>
    <button @click="submit">提交</button>
  </div>
</template>

<script>
import Vaptcha from 'vaptcha-sdk';

export default {
  data() {
    return {
      vid: 'xxxxx', // 替换成自己的vid
      challenge: '',
      validate: ''
    }
  },
  mounted() {
    this.initVaptcha()
  },
  methods: {
    initVaptcha() {
      const that = this;
      const vaptcha = new Vaptcha(this.vid, {
        container: this.$refs.vaptcha,
        type: 'popup',
        scene: 0,
        offline_server: 'https://www.vaptcha.com/demo/tk',
        onSuccess(challenge, validate) {
          that.challenge = challenge;
          that.validate = validate;
        }
      });
      vaptcha.init();
    },
    async submit() {
      // 向后端提交验证结果
      const res = await fetch('/api/vaptcha/', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          challenge: this.challenge,
          validate: this.validate
        })
      });
      const data = await res.json();
      console.log(data);
    }
  }
}
</script>

后端代码：

from django.views.decorators.csrf import csrf_exempt
from django.http import JsonResponse

import requests
import json

@csrf_exempt
def vaptcha(request):
    if request.method == 'POST':
        # 获取前端提交的验证结果
        data = json.loads(request.body.decode('utf-8'))
        challenge = data.get('challenge')
        validate = data.get('validate')

        # 向vaptcha服务器验证
        url = 'http://api.vaptcha.com/v2/validate'
        params = {
            'id': 'xxxxx',  # 替换成自己的vid
            'secretkey': 'xxxxx',  # 替换成自己的key
            'scene': 0,
            'challenge': challenge,
            'validate': validate
        }
        res = requests.get(url, params=params)
        res_data = json.loads(res.text)
        if res_data['success']:
            return JsonResponse({'msg': '验证成功', 'code': 200})
        else:
            return JsonResponse({'msg': '验证失败', 'code': 400})
``