vue+drf+第三方滑動驗證碼接入的實現

Posted on by

1、背景

近期在項目開發練習中用到瞭登錄功能 + 驗證碼的需求，驗證碼一般分為三種類型：圖片驗證碼、短信驗證碼、滑動驗證碼，相關實現思路如下

圖片驗證碼

對於圖片驗證碼的實現可以借助python中的第三方模塊pillow的相關方法進行實現（有時間會寫文章）

短信驗證碼

短信驗證碼的主要思路是通過調用第三方短信接口向手機發送短信，接收用戶輸入並與系統生成的隨機數串比對

滑動驗證碼

滑動驗證碼一般是利用第三方的驗證碼服務提供商，例如騰訊防水墻、極驗驗證等。和我們自己實現驗證碼的思路相比較，第三方驗證碼更為安全可靠

本文以騰訊防水墻為例，記錄在vue和drf組合的前後端分離項目中接入第三方滑動驗證碼服務

2、驗證流程

驗證的前後端調用時序圖如下（圖片來源於騰訊驗證碼官方文檔）

3、創建驗證

首先登陸到騰訊雲控制臺創建一個雲 API 密鑰，在左側導航欄選擇【訪問管理】>【API 密鑰管理】，進入 API 密鑰管理頁面，單擊【新建密鑰】創建密鑰。

然後進入驗證碼控制臺，單擊【新建驗證】，根據需求輸入驗證名稱、驗證所屬域名、驗證渠道（Web 端或小程序插件）及驗證場景，填寫完成後，單擊【確定】完成驗證創建。

最後，查看申請到的資源信息

4、前端代碼

4.1 添加核心js文件

把防水墻的前端核心js文件在項目根目錄下index.html中使用script標簽引入

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>
    <title>opsweb</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

或者在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部分

<template>
<!--登錄內容開始-->
<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 class="rember">
    <p>
      <input v-model="remember_me" type="checkbox" class="no" name="a"/>
      <span>記住密碼</span>
    </p>
  </div>
  <button class="login_btn" @click="show_captcha">登錄</button>
<!--登錄內容結束-->
</div>
</template>

script部分

<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"  # 驗證碼的APPID
        randstr: "@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) => {
          // 存儲token
          if (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,5xx
          this.$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 APIView
from rest_framework.response import Response
from rest_framework import status
from django.conf import settings
from urllib.parse import urlencode
from urllib.request import urlopen
import json
import ssl


# Create your views here.
class CaptchaAPIView(APIView):
    """驗證碼"""
    ssl._create_default_https_context = ssl._create_unverified_context

    def 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&xxxxx
        params = 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 path
from rest_framework_jwt.views import obtain_jwt_token
from . import views

urlpatterns = [
    path('login/', obtain_jwt_token),
    path('captcha/', views.CaptchaAPIView.as_view()),  # 驗證碼校驗
]

6、運行測試

最終效果如下

在騰訊驗證碼的後臺可以看到詳細的請求信息圖表

到此這篇關於vue+drf+第三方滑動驗證碼接入的實現的文章就介紹到這瞭,更多相關vue+drf+第三方滑動驗證碼接入內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：