先上效果圖

極驗的流程

簡單說明一下極驗的驗證流程

引用官方的圖片

• 向伺服器傳送請求獲取驗證引數
• 客戶端sdk完成驗證
• 由客戶端sdk驗證資料提交伺服器二次驗證

在netcore中使用極驗

在我檢視官方的sdk過後,發現不是特別好用，根據極驗的流程寫了一套適用於netcore的極驗sdk 開源地址 已經發了nuget包 搜尋sharpplug.geetest即可

使用方式很簡單，下面通過一個例子來進行講解

使用命令dotnet new mvc建立一個mvc專案

下一步使用命令dotnet add package sharpplug.geetest安裝nuget包

開啟startup檔案在ConfigureServices中配置geetest服務 我在極驗申請了一個測試用的id和key 大家可以直接測試使用

public void ConfigureServices(IServiceCollection services)
{
    services.Configure<CookiePolicyOptions>(options =>
    {
        // This lambda determines whether user consent for non-essential cookies is needed for a given request.
        options.CheckConsentNeeded = context => true;
        options.MinimumSameSitePolicy = SameSiteMode.None;
    });

    // GeetestOptions中配置id 與 key
    services.AddGeetest(opt=>{
               opt.Id = "e2697c763685a34be93a7d255ee06b59";
               opt.Key = "7882a2d954106041a731f5e10038982a";
            });

    services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);
}
 

完成獲取驗證引數與二次驗證的類是GeetestManager,它主要有兩個方法

獲取驗證引數方法是Register,它主要有三個引數 userid（使用者標識） clientType(客戶端型別) 與 ipaddress(客戶端ip) 關於引數的細節大家可以去參閱極驗文件

Task<GeeTestRegisterResult> Register(string userId = null, string clientType = "unknown", string ipAddress = "unknown")

二次驗證方法 Validate 引數為

• offline 是否離線驗證（獲取驗證引數失敗時）
• UserId 使用者標識
• Challenge
• Seccode
• Validate

Task<bool> Validate(GeetestValidateInput input)

下面開啟HomeController新增獲取驗證引數方法,記得注入GeetestManager

private readonly GeetestManager _geetestManager;

public HomeController(GeetestManager geetestManager)
{
    _geetestManager = geetestManager;
}

public async Task<GeeTestRegisterResult> GeetestRegister()
{
    return await _geetestManager.Register(clientType: "web", ipAddress: "127.0.0.1");
}

下面在HomeController中加入二次驗證

public async Task<bool> GeetestValidate(GeetestValidateInput input)
{
    return await _geetestManager.Validate(input);
}

服務端部分已經完成,下面開啟index.cshtml先引用gt.js

<script type="text/javascript" src="https://static.geetest.com/static/tools/gt.js"></script>

然後新增html元素

<h2>Getest</h2>
<div id="geetestform">
    <input type="hidden" name="geetest_challenge" id="geetest_challenge">
    <input type="hidden" name="geetest_validate" id="geetest_validate">
    <input type="hidden" name="geetest_seccode" id="geetest_seccode">
</div>
<button class="form-control btn-default" id="validate">點我驗證</button>

極驗有一個初始化的過程,先呼叫獲取驗證引數api進行初始化極驗

$(function() {
    $.ajax({
        url: "/home/GeetestRegister",
        type: "get",
        dataType: "json",
        success: function(data) {
            // 使用offline判斷是否是離線驗證
            offline = !data.success;
            initGeetest({
                // 以下配置引數來自服務端 SDK
                gt: data.gt,
                challenge: data.challenge,
                offline: !data.success,
                new_captcha: true,
                product: "float",
                width: "100%"
            },function(){
                // 初始化元素
                captchaObj.appendTo(document.getElementById('geetestform'));
            })
        }
    });

});

這時執行專案已經可以看到極驗的驗證表單了並且已經可以進行驗證,但是還需要新增點選按鈕事件進行二次驗證

$("#validate").click(() => {
    var validate = captchaObj.getValidate();
    if (validate === undefined || !validate) {
        alert("請進行驗證");
        return;
    }

    $.ajax({
        url: "/home/GeetestValidate",
        method:"post",
        data: {
            offline: offline,
            challenge: validate.geetest_challenge,
            validate: validate.geetest_validate,
            seccode: validate.geetest_seccode
        },
        success: function(res) {
            if (res) {
                alert("二次校驗狀態成功! 重置驗證狀態");
                captchaObj.reset();
            } else {
                alert("二次校驗狀態返回失敗! 重置驗證狀態");
                captchaObj.reset();
            }
        }
    });
});

這時功能已經全部完成了,大家可以執行專案檢視效果了,關於gt.js的更多用法可以參閱極驗的官方文件