So verwenden Sie den Tencent-Schieberegler-Verifizierungscode im Vue3+Vue-cli4-Projekt

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

Standard exportieren {
    Name: "Login",
    aufstellen() {
        const loginForm = reaktiv({
            Kontoname: '',
            KontoPasswort: '',
            Ticket: '',
            randstr: ''
        })
        zurückkehren {
            Anmeldeformular
        }
    }
}

Standard exportieren {
    Name: "Login",
    aufstellen() {
        const loginForm = reaktiv({
            Kontoname: '',
            KontoPasswort: '',
            Ticket: '',
            randstr: ''
        })
 
        const loginPost = () => {
 
            let captcha = neues Fenster.TencentCaptcha(config.app_id, res => {
                loginForm.randstr = res.randstr;
                loginForm.ticket = res.ticket;
 
                BenutzerAnmeldung(Anmeldeformular).dann(resp => {
 
                    wenn (bzw.Code === 200) {
                        //Logik nach erfolgreichem Login} else {
                        //Logik nach Login-Fehler}
                }).catch(() => {
                    ElMessage.error({
                        Meldung: ,Systemfehler! Bitte versuchen Sie es später noch einmal! '
                    })
                })
            })
            captcha.show();
        }
 
        zurückkehren {
            anmeldenPost,
            Anmeldeformular
        }
    }
}

<!-- Abhängigkeit vom Tencent SDK-Schieberegler-Verifizierungscode-->
<Abhängigkeit>
  <groupId>com.tencentcloudapi</groupId>
  <artifactId>tencentcloud-sdk-java</artifactId>
  <version>4.0.11</version>
</Abhängigkeit>

öffentliche Klasse DescribeCaptchaResult {
    @Value("${Tencent.SecretId}")
    privater String secretId;
 
    @Value("${Tencent.SecretKey}")
    privater String geheimer Schlüssel;
 
    @Value("${Tencent.CaptchaAppId}")
    private int captchaAppId;
 
    @Value("${Tencent.AppSecretKey}")
    privater String appSecretKey;
 
    öffentliches JSONObject getTencentCaptchaResult(String ticket, String randstr, String userIp) {
        versuchen {
            // Instanziieren Sie ein Authentifizierungsobjekt. Die Parameter müssen im Tencent Cloud-Konto secretId und secretKey übergeben werden. Dabei ist auch auf die Vertraulichkeit des Schlüsselpaares zu achten. // Den Schlüssel erhalten Sie unter https://console.cloud.tencent.com/cam/capi. Credential cred = new Credential(secretId, secretKey);
            // Instanziieren Sie eine HTTP-Option, optional, Sie können HttpProfile überspringen, wenn keine besondere Anforderung besteht httpProfile = new HttpProfile();
            httpProfile.setEndpoint("captcha.tencentcloudapi.com");
            // Instanziieren Sie eine Client-Option, optional, Sie können ClientProfile überspringen, wenn keine besondere Anforderung besteht clientProfile = new ClientProfile();
            clientProfile.setHttpProfile(httpProfile);
            // Instanziieren Sie das Client-Objekt, um das Produkt anzufordern, clientProfile ist optional CaptchaClient client = new CaptchaClient(cred, "", clientProfile);
            //Instanziieren Sie ein Anforderungsobjekt. Jede Schnittstelle entspricht einem Anforderungsobjekt DescribeCaptchaResultRequest req = new DescribeCaptchaResultRequest();
            erfordert.setCaptchaType(9L);
            req.setTicket(Ticket);
            req.setRandstr(randstr);
            req.setUserIp(Benutzer-IP);
            req.setCaptchaAppId((lang) captchaAppId);
            req.setAppSecretKey(appSecretKey);
            // Die zurückgegebene Antwort ist eine Instanz von DescribeCaptchaResultResponse, die dem Anforderungsobjekt DescribeCaptchaResultResponse resp = client.DescribeCaptchaResult(req); entspricht.
            // Gib die Zeichenfolge im JSON-Format aus. return JSONObject.parseObject(DescribeCaptchaResultResponse.toJsonString(resp));
        } Fang (TencentCloudSDKException e) {
            neue ServiceException auslösen (z. B. getMessage());
        }
    }
}