PHP結合阿里雲實現網站滑塊驗證碼的具體例項(精華
阿新 • • 發佈:2018-12-17
滑塊驗證碼樣例
關於滑塊驗證碼
滑塊驗證碼主要的作用是方便使用者進行快捷驗證操作,但是同時要合理的辨別到底是機器操作還是人工操作,這一點顯得難度比較大,是屬於人機識別的智慧開發範疇,所以相對於之前的傳統4位或者6點陣圖片驗證碼來說,開發起來顯得更加困難,所以一般來說都會接入一些第三方的Api來輔助開發人員進行滑塊識別和驗證。主要是根據使用者在頁面內的一些滑鼠點選,停留,滑動距離等資訊,綜合來斷定這個滑動操作是否是人為發起的。本文將結合阿里雲的滑塊驗證技術來實現網站安全登入操作。
開發準備
- 進入阿里雲的雲盾·資料風控·人機識別,配置管理裡面新增對應的服務
- 可以在系統整合板塊找到你想要的程式碼
- 根據語言需求下載對應的sdk
系統編碼
- 將上面圖片中的程式碼放到一個定義的html裡面
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <!-- 國內使用 --> <script type="text/javascript" charset="utf-8" src="//g.alicdn.com/sd/ncpc/nc.js?t=2015052012"></script> <!-- 若您的主要使用者來源於海外,請替換使用下面的js資源 --> <!-- <script type="text/javascript" charset="utf-8" src="//aeis.alicdn.com/sd/ncpc/nc.js?t=2015052012"></script> --> </head> <body> <div id="your-dom-id" class="nc-container"></div> <!--No-Captcha渲染的位置,其中 class 中必須包含 nc-container--> <!--構建資料傳遞到後臺--> <div class="container"> <form action="html.php" method="post"> <input type='hidden' id='nc_token' name='nc_token'/> <input type='hidden' id='csessionid' name='csessionid'/> <input type='hidden' id='scene' name='scene'/> <input type='hidden' id='sig' name='sig'/> <div class="ln"> <input type="submit" value="提交"> </div> </form> </div> <script type="text/javascript"> var nc_token = ["CF_APP_1", (new Date()).getTime(), Math.random()].join(':'); var NC_Opt = { renderTo: "#your-dom-id", appkey: "CF_APP_1", scene: "register", token: nc_token, customWidth: 300, trans:{"key1":"code0"}, elementID: ["usernameID"], is_Opt: 0, language: "cn", isEnabled: true, timeout: 3000, times:5, apimap: { // 'analyze': '//a.com/nocaptcha/analyze.jsonp', // 'get_captcha': '//b.com/get_captcha/ver3', // 'get_captcha': '//pin3.aliyun.com/get_captcha/ver3' // 'get_img': '//c.com/get_img', // 'checkcode': '//d.com/captcha/checkcode.jsonp', // 'umid_Url': '//e.com/security/umscript/3.2.1/um.js', // 'uab_Url': '//aeu.alicdn.com/js/uac/909.js', // 'umid_serUrl': 'https://g.com/service/um.json' }, callback: function (data) { window.console && console.log(nc_token) window.console && console.log(data.csessionid) window.console && console.log(data.sig) //組裝資料到後臺 document.getElementById('nc_token').value = nc_token; document.getElementById('csessionid').value = data.csessionid; document.getElementById('sig').value = data.sig; } } var nc = new noCaptcha(NC_Opt) nc.upLang('cn', { _startTEXT: "請按住滑塊,拖動到最右邊", _yesTEXT: "驗證通過", _error300: "哎呀,出錯了,點選<a href=\"javascript:__nc.reset()\">重新整理</a>再來一次", _errorNetwork: "網路不給力,請<a href=\"javascript:__nc.reset()\">點選重新整理</a>", }) </script> </body> </html>
- PHP獲取引數並驗證。
<?php include_once './aliyun-php-sdk-core/Config.php'; use afs\Request\V20180112 as Afs; //YOUR ACCESS_KEY、YOUR ACCESS_SECRET請替換成您的阿里雲accesskey id和secret ,這裡從阿里雲控制檯的個人中心下面去獲取 $iClientProfile = DefaultProfile::getProfile("cn-hangzhou", "YOUR ACCESSKEY", "YOUR ACCESS_SECRET"); $client = new DefaultAcsClient($iClientProfile); DefaultProfile::addEndpoint("cn-hangzhou", "cn-hangzhou", "afs", "afs.aliyuncs.com"); $request = new Afs\AuthenticateSigRequest(); $request->setSessionId("xxx");// 必填引數,從前端獲取,不可更改,android和ios只傳這個引數即可 $request->setToken("xxx");// 必填引數,從前端獲取,不可更改 $request->setSig("xxx");// 必填引數,從前端獲取,不可更改 $request->setScene("xxx");// 必填引數,從前端獲取,不可更改 $request->setAppKey("xxx");//必填引數,後端填寫,和前端的AppKey保持一致 $request->setRemoteIp("xxx");//必填引數,後端填寫 $response = $client->getAcsResponse($request);//返回code 100表示驗籤通過,900表示驗籤失敗 print_r($response);
- 瀏覽器輸出結果,下面結果表示驗證成功,現在一般來說就可以建立一個session標識驗證成功,前臺點選登入就可以放行了。