# 1 在線體驗

#### ? 1.1 電腦在線體驗:[https://mirror.anji-plus.com/captcha-web/](https://mirror.anji-plus.com/captcha-web/ "鏈接")

#### ? 1.2 微信小程序和H5在線體驗(基于uni-app實現)

?? 如果圖片未能正常展示，可查看碼云，和github同步 [碼云]( https://gitee.com/anji-plus/captcha "碼云")

?? ??????

?????微信小程序Demo???????????????uni-app H5 demo

# 2 功能概述

#### ? 2.1 組件介紹

?? 行為驗證碼采用嵌入式集成方式，接入方便，安全，高效。拋棄了傳統字符型驗證碼展示-填寫字符-比對答案的流程，采用驗證碼展示-采集用戶行為-分析用戶行為流程，用戶只需要產生指定的行為軌跡，不需要鍵盤手動輸入，極大優化了傳統驗證碼用戶體驗不佳的問題；同時，快速、準確的返回人機判定結果。目前對外提供兩種類型的驗證碼，其中包含滑動拼圖、文字點選。如圖1-1、1-2所示。若希望不影響原UI布局，可采用彈出式交互。

?? ?????

?????? 圖1-1 滑動拼圖(水印自定義)???????????????圖1-2 文字點選(水印自定義)

#### ? 2.2 概念術語描述

| 術語 | 描述 |

| ------------ | ------------ |

| 驗證碼類型 | 1)滑動拼圖 blockPuzzle 2)文字點選 clickWord|

| 驗證 | 用戶拖動/點擊一次驗證碼拼圖即視為一次“驗證”，不論拼圖/點擊是否正確 |

| 二次校驗 | 驗證數據隨表單提交到后臺后，后臺需要調用captchaService.verification做二次校驗。目的是核實驗證數據的有效性。 |

# 3 交互流程

①用戶訪問應用頁面，請求顯示行為驗證碼

②用戶按照提示要求完成驗證碼拼圖/點擊

③用戶提交表單，前端將第二步的輸出一同提交到后臺

④驗證數據隨表單提交到后臺后，后臺需要調用captchaService.verification做二次校驗。

⑤第4步返回校驗通過/失敗到產品應用后端，再返回到前端。如下圖所示。


# 4 目錄結構

├─core

│?├─captcha ?? java核心源碼

│?└─captcha-spring-boot-starter ?? springboot快速啟動

├─images ????? 效果圖

├─service

│?├─springboot ?? 后端為springboot項目示例

│?└─springmvc ?? 后端為springmvc非springboot項目示例

└─view ????? 多語言客戶端示例

?├─android ?? 原生android實現示例

?├─flutter ?? flutter實現示例

?├─html ?? 原生html實現示例

?├─ios ?? 原生ios實現示例

?├─uni-app ?? uni-app實現示例

?└─vue ?? vue實現示例

# 5 接入文檔

#### ? 5.1 本地啟動

? 第一步，啟動后端，導入Eclipse或者Intellij,啟動service/springboot的StartApplication。[社區底圖庫](https://gitee.com/anji-plus/AJ-Captcha-Images)

? 第二步，啟動前端，使用visual code打開文件夾view/vue，npm install后npm run dev，瀏覽器登錄

```js

npm install

npm run dev

DONE Compiled successfully in 29587ms 12:06:38

I Your application is running here: http://localhost:8081

```

?詳細的前后端接入文檔，后端示例代碼service目錄下，前端示例代碼view目錄下。

#### ? 5.2 [碼云wiki接入文檔(國內較快)](https://gitee.com/anji-plus/captcha/wikis/Home "碼云")

#### ? 5.3 [github wiki接入文檔](https://github.com/anji-plus/captcha/wiki "github")

# 6 近期計劃

#### ? 6.1 增加weex示例

#### ? 6.2 增加ReactNative示例

# 6 技術支持微信群

#### 開源不易，勞煩各位star ?

一鍵復制

編輯

Web IDE

原始數據

按行查看

歷史

總結

以上是生活随笔為你收集整理的android项目wehpu,README.md的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。