亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Vue3+Vue-cli4項(xiàng)目中使用騰訊滑塊驗(yàn)證碼的方法

 更新時(shí)間：2021年11月11日 08:26:41   作者：Alickx  
這篇文章主要介紹了Vue3+Vue-cli4項(xiàng)目中使用騰訊滑塊驗(yàn)證碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

簡介：

滑塊驗(yàn)證碼相比于傳統(tǒng)的圖片驗(yàn)證碼具有以下優(yōu)點(diǎn)：

  • 驗(yàn)證碼的具體驗(yàn)證不需要服務(wù)端去驗(yàn)證，服務(wù)端只需要核驗(yàn)驗(yàn)證結(jié)果即可。
  • 驗(yàn)證碼的實(shí)現(xiàn)不需要我們?nèi)チ私?，也不需要我們?nèi)ゾ唧w實(shí)現(xiàn)。
  • 滑塊驗(yàn)證碼的安全程度相比于傳統(tǒng)驗(yàn)證碼高不少。
  • ...

由于網(wǎng)絡(luò)上和騰訊api文檔中缺少關(guān)于vue3中組合式api怎么應(yīng)用騰訊的滑塊驗(yàn)證碼，所以出此教程。本人也非vue大佬，對vue的理解也不過停留在初級使用的程度上，有錯(cuò)誤之處，敬請指出。

開始：

首先，我們需要去騰訊云申請一個(gè)圖形驗(yàn)證的api，使用場景中選擇自己的使用場景。完成步驟后我們會獲得CaptchaAppId和AppSecretKey。這兩個(gè)東西就是后面我們服務(wù)端核驗(yàn)驗(yàn)證結(jié)果的參數(shù)之二。

在Vue3中使用，首先需要在public文件夾的index.html中，引入騰訊驗(yàn)證碼的js。

<script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>

在需要用到滑塊驗(yàn)證碼的組件中，為登陸的按鈕綁定方法。并且在表單對象中添加以下兩個(gè)字段ticket,randstr。

我這里示例是這樣寫的

export default {
    name: "Login",
    setup() {
        const loginForm = reactive({
            accountName: '',
            accountPassword: '',
            ticket: '',
            randstr: ''
        })
        return {
            loginForm
        }
    }
}

登陸按鈕綁定方法

export default {
    name: "Login",
    setup() {
        const loginForm = reactive({
            accountName: '',
            accountPassword: '',
            ticket: '',
            randstr: ''
        })
 
        const loginPost = () => {
 
            let captcha = new window.TencentCaptcha(config.app_id, res => {
                loginForm.randstr = res.randstr;
                loginForm.ticket = res.ticket;
 
                userLogin(loginForm).then(resp => {
 
                    if (resp.code === 200) {
                        //登陸成功后的邏輯
                    } else {
                        //登陸失敗后的邏輯
                    }
                }).catch(() => {
                    ElMessage.error({
                        message: '系統(tǒng)發(fā)生錯(cuò)誤！請稍后重試！'
                    })
                })
            })
            captcha.show();
        }
 
        return {
            loginPost,
            loginForm
        }
    }
}

以上是在vue中寫的代碼，但是這里只實(shí)現(xiàn)了用戶完成驗(yàn)證碼的操作，具體的最終判斷邏輯必須要在我們后端實(shí)現(xiàn)。我們后端就用Springboot來實(shí)現(xiàn)核驗(yàn)操作。

首先要引入騰訊sdk的maven依賴

<!--        騰訊SDK-滑塊驗(yàn)證碼依賴-->
<dependency>
  <groupId>com.tencentcloudapi</groupId>
  <artifactId>tencentcloud-sdk-java</artifactId>
  <version>4.0.11</version>
</dependency>

我們在utils包中新建一個(gè)類。

public class DescribeCaptchaResult {
    @Value("${Tencent.SecretId}")
    private String secretId;
 
    @Value("${Tencent.SecretKey}")
    private String secretKey;
 
    @Value("${Tencent.CaptchaAppId}")
    private int captchaAppId;
 
    @Value("${Tencent.AppSecretKey}")
    private String appSecretKey;
 
    public JSONObject getTencentCaptchaResult(String ticket, String randstr, String userIp) {
        try {
            // 實(shí)例化一個(gè)認(rèn)證對象，入?yún)⑿枰獋魅腧v訊云賬戶secretId，secretKey,此處還需注意密鑰對的保密
            // 密鑰可前往https://console.cloud.tencent.com/cam/capi網(wǎng)站進(jìn)行獲取
            Credential cred = new Credential(secretId, secretKey);
            // 實(shí)例化一個(gè)http選項(xiàng)，可選的，沒有特殊需求可以跳過
            HttpProfile httpProfile = new HttpProfile();
            httpProfile.setEndpoint("captcha.tencentcloudapi.com");
            // 實(shí)例化一個(gè)client選項(xiàng)，可選的，沒有特殊需求可以跳過
            ClientProfile clientProfile = new ClientProfile();
            clientProfile.setHttpProfile(httpProfile);
            // 實(shí)例化要請求產(chǎn)品的client對象,clientProfile是可選的
            CaptchaClient client = new CaptchaClient(cred, "", clientProfile);
            // 實(shí)例化一個(gè)請求對象,每個(gè)接口都會對應(yīng)一個(gè)request對象
            DescribeCaptchaResultRequest req = new DescribeCaptchaResultRequest();
            req.setCaptchaType(9L);
            req.setTicket(ticket);
            req.setRandstr(randstr);
            req.setUserIp(userIp);
            req.setCaptchaAppId((long) captchaAppId);
            req.setAppSecretKey(appSecretKey);
            // 返回的resp是一個(gè)DescribeCaptchaResultResponse的實(shí)例，與請求對象對應(yīng)
            DescribeCaptchaResultResponse resp = client.DescribeCaptchaResult(req);
            // 輸出json格式的字符串回包
            return JSONObject.parseObject(DescribeCaptchaResultResponse.toJsonString(resp));
        } catch (TencentCloudSDKException e) {
            throw new ServiceException(e.getMessage());
        }
    }
}

下面解析一下該類需要的參數(shù)。

參數(shù) 解析
secretId SecretId為你騰訊云賬號的Api密鑰ID(推薦使用子賬號，授權(quán))
secretKey SecretKey為你騰訊云賬號的Api密鑰Key(推薦使用子賬號，授權(quán))
captchaAppId captchaAppId為你申請的騰訊驗(yàn)證碼api密鑰
appSecretKey appSecretKey為你申請的騰訊驗(yàn)證碼api密鑰
ticket ticket為你前端滑塊驗(yàn)證碼驗(yàn)證后返回的參數(shù)
randstr randstr你前端滑塊驗(yàn)證碼驗(yàn)證后返回的參數(shù)
userIp userIp為你業(yè)務(wù)層獲取的Ip
提供參數(shù)發(fā)送之后，會返回一個(gè)DescribeCaptchaResultResponse類型的數(shù)據(jù)，我們將他轉(zhuǎn)為FastJson的JSONObject類型進(jìn)行解析。返回?cái)?shù)據(jù)結(jié)構(gòu)如下：

{
"Response": {
  "RequestId": "3b61a17b-cb38-470e-802c-b6242faf81ac",
  "CaptchaCode": 1,
  "CaptchaMsg": "OK",
  "EvilLevel": 0,
  "GetCaptchaTime": 1583749870
},
"retcode": 0,
"retmsg": "success"
}

具體其他參數(shù)可以參考騰訊api文檔：https://cloud.tencent.com/document/product/1110/36926

我這里讀取CaptchaCode的值，如果值為1則是驗(yàn)證碼驗(yàn)證成功，不為1則是驗(yàn)證失敗。

//核驗(yàn)驗(yàn)證碼
JSONObject tencentCaptchaResult = captchaResult.getTencentCaptchaResult(ticket, randstr, clientIp);
 
int captchaCode = Integer.parseInt(tencentCaptchaResult.getString("CaptchaCode"));
 
 
if (captchaCode != 1) {
    throw new ServiceException("驗(yàn)證碼錯(cuò)誤！");
}
//...后續(xù)業(yè)務(wù)邏輯

后續(xù)

在騰訊云中還能為驗(yàn)證碼設(shè)置更多的東西，如驗(yàn)證碼的主題，驗(yàn)證碼的場景配置，驗(yàn)證碼惡意攔截的等級等等。。

在后臺也能看到驗(yàn)證碼的請求量

我感覺后端和前端還可以再封裝一下，讓代碼更加簡潔。阿里云還有其他的新型驗(yàn)證碼還沒有嘗試，我個(gè)人是感覺騰訊驗(yàn)證碼使用起來是挺好的，但是api文檔什么的有點(diǎn)差了，資料也很少。

到此這篇關(guān)于Vue3+Vue-cli4項(xiàng)目中使用騰訊滑塊驗(yàn)證碼的方法的文章就介紹到這了,更多相關(guān)vue騰訊滑塊驗(yàn)證碼內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論