验证流程

image.png

业务前端

vim index.html

<html>

<body>
    <button id="RequestAPI">请求</button>
    <button id="TencentCaptcha" data-appid="2067792950" data-cbfn="callback" type="button">验证</button>
    <h1 id="Ticket"></h1>
    <h1 id="RandStr"></h1>
    <script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script>
        var ticket = ''
        var randstr = ''
        $("#RequestAPI").click(function () {
            $.ajax({
                type: "POST",
                url: "http://localhost:8080/validate",
                contentType: "application/json",
                data: JSON.stringify({ ticket, randstr }),
                success: function (data) {
                    alert('res: ' + data);
                }
            });
        });
        window.callback = function (res) {
            if (res.ret === 0) {
                ticket = res.ticket
                randstr = res.randstr
                $("#Ticket").text(ticket)
                $("#RandStr").text(randstr)
            }
        }
    </script>
</body>

</html>

业务后端

vim package.json

{
    "dependencies": {
        "body-parser": "^1.19.0",
        "cors": "^2.8.5",
        "express": "^4.17.1",
        "tencentcloud-sdk-nodejs": "^3.0.185"
    }
}

vim app.js

const express = require('express');
const app = express();
const cors = require('cors');
const bodyParser = require('body-parser');
const tencentcloud = require('tencentcloud-sdk-nodejs');
const config = require('./config');
console.log(config);

app.use(cors({
    origin: ['*', 'null'],
    methods: ['GET', 'POST'],
    alloweHeaders: ['Content-Type']
}));

app.use(bodyParser.json());

app.post('/validate', (req, res) => {
    const CaptchaClient = tencentcloud.captcha.v20190722.Client;
    const models = tencentcloud.captcha.v20190722.Models;

    const Credential = tencentcloud.common.Credential;
    const ClientProfile = tencentcloud.common.ClientProfile;
    const HttpProfile = tencentcloud.common.HttpProfile;

    let cred = new Credential(config["SecretId"], config["SecretKey"]);
    let httpProfile = new HttpProfile();
    httpProfile.endpoint = "captcha.tencentcloudapi.com";
    let clientProfile = new ClientProfile();
    clientProfile.httpProfile = httpProfile;
    let client = new CaptchaClient(cred, "", clientProfile);

    let txReq = new models.DescribeCaptchaResultRequest();
    txReq.Action = 'DescribeCaptchaResult'
    txReq.Version = '2019-07-22'
    txReq.CaptchaType = 9
    txReq.Ticket = req.body.ticket
    txReq.UserIp = '127.0.0.1'
    txReq.Randstr = req.body.randstr
    txReq.CaptchaAppId = config["AppId"]
    txReq.AppSecretKey = config["AppSecret"]

    client.DescribeCaptchaResult(txReq, function (errMsg, response) {
        if (response.CaptchaCode !== 1) {
            console.log(response);
            res.send(JSON.stringify({ code: -1 }));
        }

        console.log(response);
        res.send(JSON.stringify({ code: 0 }));
    });
});

app.listen(8080, () => {
    console.log('Example app listening on port 8080!');
});