## **背景**

關於驗證碼的使用場景還是非常多的，很多網站上的驗證碼可謂是五花八門，下面是我使用Vue.js實現滑動拼圖驗證碼做的一個筆記。

![](http://img.blog.itpub.net/blog/2023/05/06/dffb1e529664b648.png?x-oss-process=style/bb)

## **準備工作**

- 訪問KgCaptcha網站，註冊賬號後登入控制檯，訪問“無感驗證”模組，申請開通後系統會分配給應用一個AppId和AppSecret。
- 提供後端SDK來校驗token(即安全憑據)是否合法 ，目前支援PHP版、Python版、Java/JSP版、.Net C#版。
- 訪問Vue.js中文官網，複製Vue.js外掛連結。
- 注意：先HTML頭部初始化行為驗證碼，然後HTML底部初始化Vue.js，否則KgCaptcha的js部分函式與被Vue.js發生衝突，導致失效。

## **HTML、JS程式碼**

```html

<div id="app">
        
        token: <input name="token" id="token">
        
        <div id="captchaBox"></div> 
        
        <button type="button">提交</button>
        <a id="captchaButton" rel="nofollow">點選彈出驗證視窗</a> 
        
    </div>

```

## **最後**
SDK開源地址：[https://github.com/KgCaptcha](https://github.com/KgCaptcha)，順便做了一個演示：[https://www.kgcaptcha.com/demo/](https://www.kgcaptcha.com/demo/)

Vue.js實現圖形驗證碼

相關文章