【源碼分析】極驗驗證官方SDK源碼分析和實作思路前言源碼來源源碼分析項目核心不足引用資料

2016年就這麼來了，新的一年，繼續努力~

最近，除了12306的驗證碼火起來以後，還有一個在界面上拖拽的驗證碼，也火了起來，就是這次要說的<code>極驗驗證</code>，在這個萬衆創新的時代，工具類産品能做到這樣，也是很不錯的~

來自于官網提供的PHP SDK

<a href="https://github.com/GeeTeam/gt-php-sdk">https://github.com/GeeTeam/gt-php-sdk</a>

本次下載下傳的送出版本為 commit fd4b1d8cc6aa30f9c2dc5671ebfddc18e39e892e

基本的展示界面，檔案位置 <code>/static/login.html</code>

下面是截取的驗證碼對于div和内嵌的js代碼

js思路比較簡單

引入js

ajax擷取展示驗證碼的對象參數

如果沒有載入完成就再次載入

通過ajax傳回的參數，再用js建立驗證碼對象

展示在頁面上

url : “../web/StartCaptchaServlet.php?rand=”+Math.round(Math.random()*100)

這裡對應的位址，是ajax本地的位址，後面接了一個随機的位址

檔案位置 <code>/web/StartCaptchaServlet.php</code>

js進行ajax，到最後和伺服器進行通訊的類

檔案位置 <code>lib/class.geetestlib.php</code>

從檔案名和引用配置檔案來看，做SDK并沒有考慮到命名空間 = =

直接通路位址 <code>"http://api.geetest.com/register.php?gt=" . CAPTCHA_ID</code> ,可以得到每次不一樣的32位字元串，是以這個加密字元串就是每次驗證碼顯示的内容，經過js解析之後，進行展示

每次展示驗證碼，都會從伺服器擷取驗證碼對于的參數，經過動态加載的js檔案，展示出對應的驗證碼。

對應的驗證操作，它會根據表單的送出方式，送出使用者滑動後的結果，從伺服器端進行校驗。

表單送出的結果

再通過背景進行校驗

本地伺服器進行對使用者拖拽驗證碼進行校驗。

檔案對應位置 <code>/web/VerifyLoginServlet.php</code>

就這樣，完成了下圖的流程

前端展示機制，通過js動态生成拖拽頁面元素進行本地拖拽展示

後端檢驗，要求和前端的算法進行解密，比對是否驗證準确

本地驗證隻是能進行本地校驗結果，如果沒有對官方伺服器的通信，還是不能展示出驗證碼的，同時也将網站的所有驗證資訊暴露給了極驗官方

<a href="http://www.geetest.com/install/sections/idx-basic-introduction.html#id7">http://www.geetest.com/install/sections/idx-basic-introduction.html#id7</a>