整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
公眾號專注于技術領域，歡迎關注
滑動驗證碼相比于傳統的圖片驗證碼有了更強的安全性，對我們的網站保駕護航提供了跟好的防御措施，主要是加入了人機交互的設計模式，別看這一個小小的滑動，可不是一般平臺能夠搞出來的喲，很多都要借助第三方，目前大家看到的網站很多都加入了這個滑動驗證碼，想給自己的網站搞一個么，今天就來介紹一下這個玩法。
滑塊驗證碼主要的作用是方便用戶進行快捷驗證操作，但是同時要合理的辨別到底是機器操作還是人工操作，這一點顯得難度比較大，是屬于人機識別的智能開發范疇，所以相對于之前的傳統4位或者6位圖片驗證碼來說，開發起來顯得更加困難，所以一般來說都會接入一些第三方的Api來輔助開發人員進行滑塊識別和驗證。主要是根據用戶在頁面內的一些鼠標點擊，停留，滑動距離等信息，綜合來斷定這個滑動操作是否是人為發起的。本文將結合阿里云的滑塊驗證技術來實現網站安全登錄操作。
進入阿里云的云盾·數據風控·人機識別，配置管理里面添加對應的服務
可以在系統集成板塊找到你想要的代碼
根據語言需求下載對應的sdk
將上面圖片中的代碼放到一個定義的html里面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- 國內使用 -->
<script type="text/javascript" charset="utf-8" src="http://g.alicdn.com/sd/ncpc/nc.js?t=2015052012"></script>
<!-- 若您的主要用戶來源于海外，請替換使用下面的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-->
<!--構建數據傳遞到后臺-->
<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標識驗證成功，前臺點擊登錄就可以放行了，這些操作就是結合我們具體的業務場景靈活實現了。
今天的分享就到這里，喜歡的話給個轉發關注吧！
近，我讀到了一位國外程序員的文章，他提出了一個有趣的問題：在 JavaScript 時代，我們是否又回到了 PHP 的老路上？作為一名前端開發者，我對這個話題深有感觸，今天就想和大家分享一下我的思考。
說起 PHP，相信很多老開發者都有深刻的記憶。PHP 曾經是 Web 開發的王者，幾乎所有動態網站的后端都是用 PHP 構建的。那時候，PHP 就像是一把萬能鑰匙，解決了我們很多實際問題。即使到了今天，PHP 仍然在很多大型項目中扮演重要角色，比如 Facebook 最初是用 PHP 構建的，后來演變成 PHP 的變種 Hack。這說明 PHP 的影響力依然深遠。
但是，隨著時間的推移，JavaScript 崛起了。特別是 Node.js 的出現，讓 JavaScript 不再僅僅局限于瀏覽器端，而是成為了全棧開發的利器。像 Uber 這樣的公司就用 Node.js 來處理服務器和客戶端的操作，展示了 JavaScript 的強大。
最近幾年，Next.js 成為了前端開發的新寵。它不僅繼承了 React 的靈活性，還結合了服務器端渲染的優勢，簡化了開發流程。可以說，Next.js 就像是 PHP 和 JavaScript 之間的一座橋梁。舉個例子，Hulu 就使用 Next.js 來簡化服務器端渲染和客戶端交互，提供了現代化的用戶體驗。這種體驗讓我們不禁想起了 PHP 和 HTML 的經典組合，但卻擁有現代技術的強大功能。
有人說，JavaScript 的這些發展讓人感覺像是回到了 PHP 的時代，但我不這么認為。JavaScript 早已不是那個只能做簡單交互的小工具，而是成為了 Web 開發的全能選手。現在，像 Next.js 這樣的工具不僅提供了 PHP 曾經的簡便性，還帶來了更多功能，如緩存和服務器端渲染，大大簡化了開發流程。Netflix 就通過使用 Node.js 實現服務器端渲染，確保了快速響應的用戶界面，這在過去是需要多種技術才能實現的。
隨著技術的不斷進步，Web 開發的未來趨勢是功能的整合和開發過程的簡化。我們不再需要在多種語言和系統之間切換，現代框架提供了一站式解決方案。比如 Shopify 的 Hydrogen 框架，通過無縫集成后端和前端，極大地簡化了開發流程，提高了效率。
總的來說，Web 開發的演變并不是簡單地回到過去，而是通過利用 JavaScript 的強大功能，突破了舊的限制，為未來更統一和高效的 Web 應用奠定了基礎。這是一種上升的螺旋，而非原地打轉。
你在開發過程中是否也感受到了這種變化？你對現代 JavaScript 中 PHP 風格模式的回歸有什么看法？歡迎在評論區分享你的經驗和見解，我們一起討論 Web 開發的未來！
文深入探討如何運用PHP高效獲取網頁HTML元素信息。
運用文件讀取函數，獲取網頁數據。
利用PHP腳本的強大功能，網頁數據的采集中極為便捷，各類網頁元素亦可轉化為字符形式線上展現。
2.使用正則表達式匹配目標元素
面對諸多網頁需求，巧妙運用正則表達式可以精準且迅速搜尋并提取所需的HTML元素。核心技術在于結合正則表達式與網頁數據，以實現精確篩選及獲取這些元素的目的。
3.使用DOMDocument類解析網頁
借助 DOMDocument 類，PHP 為我們提供了深入分析和處理網頁的途徑。該類功能強大且易用，尤其以其精準讀取 HTML 文檔樹及其靈活操作的表現，在準確獲取所需元素方面具有顯著優勢。
4.使用Simple HTML DOM庫
對于正則表達式和DOMDocument類的初學者而言，可能會遭遇困難。為提升工作效率，可嘗試借助于諸如Simple HTML DOM這類第三方工具。該工具能準確挖掘所需HTML元素，大幅縮減項目開發時間。
5.使用XPath查詢語言
憑借其卓越性能，XPath在應對XML及HTML文檔元素抽取任務中表現非凡，為我們提供了對HTML元素的精準與靈動操縱。
6.使用cURL庫發送HTTP請求
借助PHP中cURL庫的功能優勢，我們能夠精確滿足各種網絡頁面內容獲取和模擬仿真的需求，從而突出頁面關鍵信息的精度提取。
7.處理JavaScript生成的內容
針對個性化需求，運用JavaScript也可實現網站內容的動態生產。為高效達成此目的，我們能依賴于PHP所提供的兩種無頭瀏覽器工具包——Selenium以及PhantomJS。
8.處理AJAX請求返回的數據
為了實現在網頁間的數據交互和溝通，尤其是借助AJAX技術模擬網絡傳輸和數據獲取過程的各項操作，我們會充分利用PHP中獨有的CURL模塊和眾多第三方廠商開發的高效能庫，它們將會成為你處理海量信息的強大后盾。
9.使用API接口獲取數據
若目標網站具備API訪問許可，那么僅需根據接口文檔所指定的請求參數，便可自動獲取并拆分JSON或者XML格式的回饋數據，進而達到信息交換的目標。
10.注意事項和其他方法
在獲取網頁中的HTML元素時，需要注意以下幾點：
-確保目標網頁存在且可訪問；
-遵守目標網站的使用規則和法律法規；
-防止對目標網站造成過大的訪問壓力；
-根據具體需求選擇合適的方法和工具。
運用此策略，能精準提取所需HTML組件，為構建多樣化應用及特性提供強大后盾。盼望本文能對您在PHP開發過程中網頁元素搜尋有所裨益。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
