Vue3+Vue-cli4 プロジェクトで Tencent スライダー検証コードを使用する方法

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

エクスポートデフォルト{
    名前: "ログイン",
    設定（） {
        const loginForm = リアクティブ({
            アカウント名： ''、
            アカウントパスワード: ''、
            チケット: ''、
            文字列: ''
        })
        戻る {
            ログインフォーム
        }
    }
}

エクスポートデフォルト{
    名前: "ログイン",
    設定（） {
        const loginForm = リアクティブ({
            アカウント名： ''、
            アカウントパスワード: ''、
            チケット: ''、
            文字列: ''
        })
 
        const loginPost = () => {
 
            captcha = new window.TencentCaptcha(config.app_id, res => { を設定します。
                loginForm.randstr = res.randstr;
                loginForm.ticket = res.ticket;
 
                userLogin(loginForm).then(resp => {
 
                    （応答コード === 200）の場合{
                        //ログイン成功後のロジック} else {
                        //ログイン失敗後のロジック}
                }).catch(() => {
                    ElMessage.error({
                        メッセージ: 'システムエラー!後でもう一度お試しください。 '
                    })
                })
            })
            キャプチャを表示します。
        }
 
        戻る {
            ログイン投稿、
            ログインフォーム
        }
    }
}

<!-- Tencent SDK スライダー検証コードの依存関係 -->
<依存関係>
  <グループ ID>com.tencentcloudapi</グループ ID>
  <artifactId>テンセントクラウド SDK-Java</artifactId>
  <バージョン>4.0.11</バージョン>
</依存関係>

パブリッククラス DescribeCaptchaResult {
    @Value("${Tencent.SecretId}")
    プライベート文字列 secretId;
 
    @Value("${Tencent.SecretKey}")
    プライベート文字列 secretKey;
 
    @Value("${Tencent.CaptchaAppId}")
    プライベート int captchaAppId;
 
    @Value("${Tencent.AppSecretKey}")
    プライベート文字列 appSecretKey;
 
    パブリックJSONObject getTencentCaptchaResult(文字列チケット、文字列randstr、文字列userIp) {
        試す {
            // 認証オブジェクトをインスタンス化します。パラメータは、Tencent Cloud アカウントの secretId と secretKey で渡す必要があります。ここでは、キー ペアの機密性にも注意する必要があります。// キーは https://console.cloud.tencent.com/cam/capi で取得できます。Credential cred = new Credential(secretId, secretKey);
            // http オプションをインスタンス化します (オプション)。特別な要件がない場合は HttpProfile をスキップできます。httpProfile = new HttpProfile();
            エンドポイントを設定します。
            // クライアント オプションをインスタンス化します (オプション)。特別な要件がない場合は ClientProfile をスキップできます。clientProfile = new ClientProfile();
            クライアント プロファイル。httpProfile を設定します。
            // 製品をリクエストするためにクライアント オブジェクトをインスタンス化します。clientProfile はオプションです。CaptchaClient client = new CaptchaClient(cred, "", clientProfile);
            //リクエスト オブジェクトをインスタンス化します。各インターフェイスはリクエスト オブジェクトに対応します。DescribeCaptchaResultRequest req = new DescribeCaptchaResultRequest();
            キャプチャタイプを設定する必要があります(9L);
            チケットを要求します。
            必須:
            ユーザーIPを設定します。
            キャプチャアプリIDを設定します。
            appSecretKey を要求します。
            // 返される resp は、リクエスト オブジェクトに対応する DescribeCaptchaResultResponse のインスタンスです。DescribeCaptchaResultResponse resp = client.DescribeCaptchaResult(req);
            // 文字列をJSON形式で出力します。 return JSONObject.parseObject(DescribeCaptchaResultResponse.toJsonString(resp));
        } キャッチ (TencentCloudSDKException e) {
            新しい ServiceException をスローします (e.getMessage());
        }
    }
}