網(wǎng)站引入阿里云滑塊驗(yàn)證碼實(shí)現(xiàn)人機(jī)交互教程

公眾號(hào)專注于技術(shù)領(lǐng)域，歡迎關(guān)注

滑動(dòng)驗(yàn)證碼相比于傳統(tǒng)的圖片驗(yàn)證碼有了更強(qiáng)的安全性，對(duì)我們的網(wǎng)站保駕護(hù)航提供了跟好的防御措施，主要是加入了人機(jī)交互的設(shè)計(jì)模式，別看這一個(gè)小小的滑動(dòng)，可不是一般平臺(tái)能夠搞出來的喲，很多都要借助第三方，目前大家看到的網(wǎng)站很多都加入了這個(gè)滑動(dòng)驗(yàn)證碼，想給自己的網(wǎng)站搞一個(gè)么，今天就來介紹一下這個(gè)玩法。

滑塊驗(yàn)證碼樣例

關(guān)于滑塊驗(yàn)證碼

滑塊驗(yàn)證碼主要的作用是方便用戶進(jìn)行快捷驗(yàn)證操作，但是同時(shí)要合理的辨別到底是機(jī)器操作還是人工操作，這一點(diǎn)顯得難度比較大，是屬于人機(jī)識(shí)別的智能開發(fā)范疇，所以相對(duì)于之前的傳統(tǒng)4位或者6位圖片驗(yàn)證碼來說，開發(fā)起來顯得更加困難，所以一般來說都會(huì)接入一些第三方的Api來輔助開發(fā)人員進(jìn)行滑塊識(shí)別和驗(yàn)證。主要是根據(jù)用戶在頁面內(nèi)的一些鼠標(biāo)點(diǎn)擊，停留，滑動(dòng)距離等信息，綜合來斷定這個(gè)滑動(dòng)操作是否是人為發(fā)起的。本文將結(jié)合阿里云的滑塊驗(yàn)證技術(shù)來實(shí)現(xiàn)網(wǎng)站安全登錄操作。

開發(fā)準(zhǔn)備

進(jìn)入阿里云的云盾·數(shù)據(jù)風(fēng)控·人機(jī)識(shí)別，配置管理里面添加對(duì)應(yīng)的服務(wù)

可以在系統(tǒng)集成板塊找到你想要的代碼

根據(jù)語言需求下載對(duì)應(yīng)的sdk

系統(tǒng)編碼

將上面圖片中的代碼放到一個(gè)定義的html里面

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8" />
 <!-- 國內(nèi)使用 -->
 <script type="text/javascript" charset="utf-8" src="http://g.alicdn.com/sd/ncpc/nc.js?t=2015052012"></script>
 <!-- 若您的主要用戶來源于海外，請(qǐng)?zhí)鎿Q使用下面的js資源 -->
 <!-- <script type="text/javascript" charset="utf-8" src="http://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-->
 <!--構(gòu)建數(shù)據(jù)傳遞到后臺(tái)-->
 <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)
 //組裝數(shù)據(jù)到后臺(tái)
 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: "請(qǐng)按住滑塊，拖動(dòng)到最右邊",
 _yesTEXT: "驗(yàn)證通過",
 _error300: "哎呀，出錯(cuò)了，點(diǎn)擊<a href=\"javascript：__nc.reset()\">刷新</a>再來一次",
 _errorNetwork: "網(wǎng)絡(luò)不給力，請(qǐng)<a href=\"javascript：__nc.reset()\">點(diǎn)擊刷新</a>",
 })
 </script>
 </body>
</html>

以PHP語言為例獲取參數(shù)并驗(yàn)證。

<?php
include_once './aliyun-php-sdk-core/Config.php';
use afs\Request\V20180112 as Afs;
//YOUR ACCESS_KEY、YOUR ACCESS_SECRET請(qǐng)?zhí)鎿Q成您的阿里云accesskey id和secret ，這里從阿里云控制臺(tái)的個(gè)人中心下面去獲取
$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");// 必填參數(shù)，從前端獲取，不可更改，android和ios只傳這個(gè)參數(shù)即可
$request->setToken("xxx");// 必填參數(shù)，從前端獲取，不可更改
$request->setSig("xxx");// 必填參數(shù)，從前端獲取，不可更改
$request->setScene("xxx");// 必填參數(shù)，從前端獲取，不可更改
$request->setAppKey("xxx");//必填參數(shù)，后端填寫，和前端的AppKey保持一致
$request->setRemoteIp("xxx");//必填參數(shù)，后端填寫
$response=$client->getAcsResponse($request);//返回code 100表示驗(yàn)簽通過，900表示驗(yàn)簽失敗
print_r($response);

瀏覽器輸出結(jié)果，下面結(jié)果表示驗(yàn)證成功，現(xiàn)在一般來說就可以創(chuàng)建一個(gè)session標(biāo)識(shí)驗(yàn)證成功，前臺(tái)點(diǎn)擊登錄就可以放行了，這些操作就是結(jié)合我們具體的業(yè)務(wù)場景靈活實(shí)現(xiàn)了。

今天的分享就到這里，喜歡的話給個(gè)轉(zhuǎn)發(fā)關(guān)注吧！

近，我讀到了一位國外程序員的文章，他提出了一個(gè)有趣的問題：在 JavaScript 時(shí)代，我們是否又回到了 PHP 的老路上？作為一名前端開發(fā)者，我對(duì)這個(gè)話題深有感觸，今天就想和大家分享一下我的思考。

從 PHP 到 JavaScript 的輝煌歲月

說起 PHP，相信很多老開發(fā)者都有深刻的記憶。PHP 曾經(jīng)是 Web 開發(fā)的王者，幾乎所有動(dòng)態(tài)網(wǎng)站的后端都是用 PHP 構(gòu)建的。那時(shí)候，PHP 就像是一把萬能鑰匙，解決了我們很多實(shí)際問題。即使到了今天，PHP 仍然在很多大型項(xiàng)目中扮演重要角色，比如 Facebook 最初是用 PHP 構(gòu)建的，后來演變成 PHP 的變種 Hack。這說明 PHP 的影響力依然深遠(yuǎn)。

但是，隨著時(shí)間的推移，JavaScript 崛起了。特別是 Node.js 的出現(xiàn)，讓 JavaScript 不再僅僅局限于瀏覽器端，而是成為了全棧開發(fā)的利器。像 Uber 這樣的公司就用 Node.js 來處理服務(wù)器和客戶端的操作，展示了 JavaScript 的強(qiáng)大。

Next.js：連接過去與未來的橋梁

最近幾年，Next.js 成為了前端開發(fā)的新寵。它不僅繼承了 React 的靈活性，還結(jié)合了服務(wù)器端渲染的優(yōu)勢(shì)，簡化了開發(fā)流程。可以說，Next.js 就像是 PHP 和 JavaScript 之間的一座橋梁。舉個(gè)例子，Hulu 就使用 Next.js 來簡化服務(wù)器端渲染和客戶端交互，提供了現(xiàn)代化的用戶體驗(yàn)。這種體驗(yàn)讓我們不禁想起了 PHP 和 HTML 的經(jīng)典組合，但卻擁有現(xiàn)代技術(shù)的強(qiáng)大功能。

真的在倒退嗎？

有人說，JavaScript 的這些發(fā)展讓人感覺像是回到了 PHP 的時(shí)代，但我不這么認(rèn)為。JavaScript 早已不是那個(gè)只能做簡單交互的小工具，而是成為了 Web 開發(fā)的全能選手。現(xiàn)在，像 Next.js 這樣的工具不僅提供了 PHP 曾經(jīng)的簡便性，還帶來了更多功能，如緩存和服務(wù)器端渲染，大大簡化了開發(fā)流程。Netflix 就通過使用 Node.js 實(shí)現(xiàn)服務(wù)器端渲染，確保了快速響應(yīng)的用戶界面，這在過去是需要多種技術(shù)才能實(shí)現(xiàn)的。

未來的發(fā)展方向

隨著技術(shù)的不斷進(jìn)步，Web 開發(fā)的未來趨勢(shì)是功能的整合和開發(fā)過程的簡化。我們不再需要在多種語言和系統(tǒng)之間切換，現(xiàn)代框架提供了一站式解決方案。比如 Shopify 的 Hydrogen 框架，通過無縫集成后端和前端，極大地簡化了開發(fā)流程，提高了效率。

總結(jié)：進(jìn)化還是革命？

總的來說，Web 開發(fā)的演變并不是簡單地回到過去，而是通過利用 JavaScript 的強(qiáng)大功能，突破了舊的限制，為未來更統(tǒng)一和高效的 Web 應(yīng)用奠定了基礎(chǔ)。這是一種上升的螺旋，而非原地打轉(zhuǎn)。

你的看法？

你在開發(fā)過程中是否也感受到了這種變化？你對(duì)現(xiàn)代 JavaScript 中 PHP 風(fēng)格模式的回歸有什么看法？歡迎在評(píng)論區(qū)分享你的經(jīng)驗(yàn)和見解，我們一起討論 Web 開發(fā)的未來！

文深入探討如何運(yùn)用PHP高效獲取網(wǎng)頁HTML元素信息。

運(yùn)用文件讀取函數(shù)，獲取網(wǎng)頁數(shù)據(jù)。

利用PHP腳本的強(qiáng)大功能，網(wǎng)頁數(shù)據(jù)的采集中極為便捷，各類網(wǎng)頁元素亦可轉(zhuǎn)化為字符形式線上展現(xiàn)。

2.使用正則表達(dá)式匹配目標(biāo)元素

面對(duì)諸多網(wǎng)頁需求，巧妙運(yùn)用正則表達(dá)式可以精準(zhǔn)且迅速搜尋并提取所需的HTML元素。核心技術(shù)在于結(jié)合正則表達(dá)式與網(wǎng)頁數(shù)據(jù)，以實(shí)現(xiàn)精確篩選及獲取這些元素的目的。

3.使用DOMDocument類解析網(wǎng)頁

借助 DOMDocument 類，PHP 為我們提供了深入分析和處理網(wǎng)頁的途徑。該類功能強(qiáng)大且易用，尤其以其精準(zhǔn)讀取 HTML 文檔樹及其靈活操作的表現(xiàn)，在準(zhǔn)確獲取所需元素方面具有顯著優(yōu)勢(shì)。

4.使用Simple HTML DOM庫

對(duì)于正則表達(dá)式和DOMDocument類的初學(xué)者而言，可能會(huì)遭遇困難。為提升工作效率，可嘗試借助于諸如Simple HTML DOM這類第三方工具。該工具能準(zhǔn)確挖掘所需HTML元素，大幅縮減項(xiàng)目開發(fā)時(shí)間。

5.使用XPath查詢語言

憑借其卓越性能，XPath在應(yīng)對(duì)XML及HTML文檔元素抽取任務(wù)中表現(xiàn)非凡，為我們提供了對(duì)HTML元素的精準(zhǔn)與靈動(dòng)操縱。

6.使用cURL庫發(fā)送HTTP請(qǐng)求

借助PHP中cURL庫的功能優(yōu)勢(shì)，我們能夠精確滿足各種網(wǎng)絡(luò)頁面內(nèi)容獲取和模擬仿真的需求，從而突出頁面關(guān)鍵信息的精度提取。

7.處理JavaScript生成的內(nèi)容

針對(duì)個(gè)性化需求，運(yùn)用JavaScript也可實(shí)現(xiàn)網(wǎng)站內(nèi)容的動(dòng)態(tài)生產(chǎn)。為高效達(dá)成此目的，我們能依賴于PHP所提供的兩種無頭瀏覽器工具包——Selenium以及PhantomJS。

8.處理AJAX請(qǐng)求返回的數(shù)據(jù)

為了實(shí)現(xiàn)在網(wǎng)頁間的數(shù)據(jù)交互和溝通，尤其是借助AJAX技術(shù)模擬網(wǎng)絡(luò)傳輸和數(shù)據(jù)獲取過程的各項(xiàng)操作，我們會(huì)充分利用PHP中獨(dú)有的CURL模塊和眾多第三方廠商開發(fā)的高效能庫，它們將會(huì)成為你處理海量信息的強(qiáng)大后盾。

9.使用API接口獲取數(shù)據(jù)

若目標(biāo)網(wǎng)站具備API訪問許可，那么僅需根據(jù)接口文檔所指定的請(qǐng)求參數(shù)，便可自動(dòng)獲取并拆分JSON或者XML格式的回饋數(shù)據(jù)，進(jìn)而達(dá)到信息交換的目標(biāo)。

10.注意事項(xiàng)和其他方法

在獲取網(wǎng)頁中的HTML元素時(shí)，需要注意以下幾點(diǎn)：

-確保目標(biāo)網(wǎng)頁存在且可訪問；

-遵守目標(biāo)網(wǎng)站的使用規(guī)則和法律法規(guī)；

-防止對(duì)目標(biāo)網(wǎng)站造成過大的訪問壓力；

-根據(jù)具體需求選擇合適的方法和工具。

運(yùn)用此策略，能精準(zhǔn)提取所需HTML組件，為構(gòu)建多樣化應(yīng)用及特性提供強(qiáng)大后盾。盼望本文能對(duì)您在PHP開發(fā)過程中網(wǎng)頁元素搜尋有所裨益。

在線咨詢

上一篇：2023年性價(jià)比正規(guī)流量卡對(duì)比#流量卡測(cè)評(píng)
下一篇：大學(xué)英語三級(jí)考試查詢時(shí)間及入口

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商