2. 程式人生 > >PHP結合阿里雲實現網站滑塊驗證碼的具體例項

PHP結合阿里雲實現網站滑塊驗證碼的具體例項

阿新 • • 發佈：2018-12-10

目錄

滑塊驗證碼樣例

在這裡插入圖片描述

關於滑塊驗證碼

滑塊驗證碼主要的作用是方便使用者進行快捷驗證操作，但是同時要合理的辨別到底是機器操作還是人工操作，這一點顯得難度比較大，是屬於人機識別的智慧開發範疇，所以相對於之前的傳統4位或者6點陣圖片驗證碼來說，開發起來顯得更加困難，所以一般來說都會接入一些第三方的Api來輔助開發人員進行滑塊識別和驗證。主要是根據使用者在頁面內的一些滑鼠點選，停留，滑動距離等資訊，綜合來斷定這個滑動操作是否是人為發起的。本文將結合阿里雲的滑塊驗證技術來實現網站安全登入操作。

開發準備

  1. 進入阿里雲的雲盾·資料風控·人機識別，配置管理裡面新增對應的服務
    在這裡插入圖片描述
  2. 可以在系統整合板塊找到你想要的程式碼
    在這裡插入圖片描述
  3. 根據語言需求下載對應的sdk
    在這裡插入圖片描述

系統編碼

  1. 將上面圖片中的程式碼放到一個定義的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>
  1. 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);
  1. 瀏覽器輸出結果，下面結果表示驗證成功，現在一般來說就可以建立一個session標識驗證成功，前臺點選登入就可以放行了。
    在這裡插入圖片描述

附錄

  1. https://help.aliyun.com/document_detail/66317.html 阿里雲關於滑動驗證碼的說明
  2. https://promotion.aliyun.com/ntms/act/captchaIntroAndDemo.html 阿里雲關於滑動驗證碼例項

相關推薦

PHP結合阿里雲實現網站滑塊驗證碼的具體例項

目錄 滑塊驗證碼樣例 關於滑塊驗證碼 開發準備 系統編碼 附錄 滑塊驗證碼樣例 關於滑塊驗證碼 滑塊驗證碼主要的作用是方便使用者進行快捷驗證操作，但是同時要合理的辨別到底是機器操作還是

PHP結合阿里雲實現網站滑塊驗證碼的具體例項（精華

滑塊驗證碼樣例 關於滑塊驗證碼 滑塊驗證碼主要的作用是方便使用者進行快捷驗證操作，但是同時要合理的辨別到底是機器操作還是人工操作，這一點顯得難度比較大，是屬於人機識別的智慧開發範疇，所以相對於之前的傳統4位或者6點陣圖片驗證碼來說，開發起來顯得更加困難，所以

自定義的可拖動滑塊驗證碼的實現方式（SlideView）

概述： 最近專案中需要在密碼輸入一定次數後盡心拖動滑塊進行驗證，防止惡意程式程式碼一直測試登入，用了GitHub的一個開源庫SlideView，但是直接依賴原始碼是改不了樣式的，下邊給出自定

破解滑塊驗證碼

一.介紹  一些網站會在正常的賬號密碼認證之外加一些驗證碼，以此來明確地區分人/機行為，從一定程度上達到反爬的效果，對於簡單的校驗碼Tesserocr就可以搞定，如下 但一些網站加入了滑動驗證碼，最典型的要屬於極驗滑動認證了，極驗官網：http://www.geetest.c

Java專案整合阿里雲SMS簡訊介面傳送驗證碼

public static Map MessageExecuteMethod(String mobile) throws ClientException { //設定超時時間-可自行調整 System.setProperty(“sun.net.client.defaultConnectTim

極驗滑塊驗證碼破解

嗶哩嗶哩(極驗)滑塊驗證碼破解 使用selenium+PIL來獲取圖片以及模擬滑鼠拖動效果 from selenium import webdriver import requests import time from selenium.webdriver.c

Android拼圖滑塊驗證碼控制元件

轉自：https://blog.csdn.net/sdfsdfdfa/article/details/79120665 概述       驗證碼是可以區分使用者是人還是計算機。可以防止破解密碼、刷票等惡意行為。客戶端上多數用在關鍵操

滑塊驗證碼識別 java版本

好久沒有更新技術文章了，很久之前研究過滑塊驗證碼的破解，照著別人的程式碼改，將其他版本的程式碼改成java的，加上自己的一些研究，湊合湊合出了第一個java版本的，此版本不是控制瀏覽器進行驗證，純java控制（包含java js引擎執行js），目前都完成了，只是

滑塊驗證碼識別原始碼

本帖最後由 canfeng11 於 2015-4-26 21:30 編輯 最近做的一個網站的登陸，驗證碼改成了極驗的滑塊的驗證碼，以前都是用代答來解決驗證碼，本人對驗證碼識別這一塊也是一知半解，廢了一番周折總算是解決了識別問題，這個帖子主要給大家說下圖片識別的思路，由於JS加密檔案好像會隨時更新，所以JS加

Java工具--滑塊驗證碼生成

1概述 針對當前網際網路流行的滑塊驗證碼，這裡做了一個工具，適用於前後端分離的專案。工具將摳圖和摳圖後的原圖以位元組碼的形式輸出。 2工具原始碼 package com.liutao.util; import javax.imageio.ImageIO; import

聊聊滑塊驗證碼的識別

很長一段時間沒寫文章了，今天來一篇，聊聊滑塊驗證碼。之前一段時間在研究下滑塊驗證碼相關的東西，拿騰訊的驗證碼來玩，使用Selenium來模擬滑動，這裡也就先不介紹Selenium 的基本用法來，主要來聊聊怎麼實現滑塊驗證碼的識別問題。 滑塊驗證碼可以說是目前使用

前端h5整合阿里雲滑塊驗證

<html> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1

EasyNVR結合阿里雲/騰訊雲CDN實現微信/小程式直播的方案

背景需求： 許多客戶有這樣的需求：微信公眾號做為平臺來對攝像機進行直播；可以讓使用者隨時隨地開啟公共號就可以觀看；保證畫面的流暢性；保證視訊的併發訪問量等。 問題分析： 雖然需求看似很簡單，其實真正實現起來還是有相當多的阻礙。 首先：如何讓攝像機

php 利用阿里雲oss實現託管檔案

首先需要下載阿里雲的php版sdk，然後引入載入檔案autoload.php 以下是我在使用時封裝的class <?php include IA_ROOT . 'autoload.php'; use OSS\OssClient; //引入名稱空間 use OSS

原生js實現拖動滑塊驗證

cnblogs tcc mvt wms 網站 hnu 按鈕 itl rip 拖動滑塊驗證是現在的網站隨處可見的，各式各樣的拖動法都有。 下面實現的是某寶的拖動滑塊驗證： <!DOCTYPE html> <html lang="en"> <he

阿里雲 配置網站 安裝nginx 訪問不了公網ip

轉載自：https://blog.csdn.net/LJFPHP/article/details/78670459 一、開始找原因 在瀏覽器輸入：http://ip，正常的話，會有頁面，welcome to nginx  我這裡是瀏覽器訪問失敗，  查詢原因： 1、在

關於selenium實現滑塊驗證

關於selenium實現滑塊驗證 python2.7+selenium2實現淘寶滑塊自動認證參考連結：https://blog.csdn.net/ldg513783697/article/details/51583641 selenium、python模擬登陸淘寶 參考連結：https://blog.cs

個人筆記005--原生JS實現簡單的拖動滑塊驗證

早上起來後瀏覽網站時看到別人的拖動滑塊驗證，就想著做一個demo，等到有時間把這個優化到到現在的專案（用的是圖片驗證碼）。以下程式碼就是百度之後再修改一下的： <!DOCTYPE html> <html> <head> <meta charset

h5 range實現slider滑塊功能及樣式自定義

公司最近人手不足，於是，又開始折騰起Html來了 本文主要講slider滑塊的實現、樣式自定義、刻度繪製、與輸入框的聯動 ######我們先來看看效果圖 上圖中，我們需要實現的難點就是那個綠色的滑塊，其它都是輸入框及文字框，容易實現。 ###滑塊的實現 其實，只要設定input

PHP對接阿里大魚實現簡訊的傳送

背景知識： 手機驗證碼這個功能幾乎哪裡都可以看到，那麼PHP如何實現手機驗證碼的傳送呢？下面介紹PHP對接阿里大魚實現簡訊驗證碼傳送。 1.首先登陸阿里雲，點選控制檯： 2.選擇簡訊服務： 3.由於阿里雲的簡訊服務，需要簽名和模板，因此需要先申請： 4.申