The content of this page has been automatically translated by AI. If you encounter any problems while reading, you can view the corresponding content in Chinese.
You can connect WAF CAPTCHA to frontend-backend separated sites or app sites to dynamically send CAPTCHAs from such sites.
You can connect a frontend-backend separated site to the WAF CAPTCHA process to dynamically verify human operations for the site in various scenarios, such as a hit to custom rules, CC attacks, and bot behavior management. Both iOS and Android apps are connected through web frontend HTML5.
This feature dynamically checks whether the packets returned from the server contain the CAPTCHA fields delivered by WAF, and if so, it will render the CAPTCHA at the top floating layer to connect the frontend-backend separated site or app to WAF CAPTCHA.
Operation Steps
The following code is an example of connecting WAF CAPTCHA (using Axios as an example). Depending on the application scenario, use this as a reference to complete the connection to WAF CAPTCHA for frontend-backend separated sites.
1. Add interceptors to the Axios response.
// Regexes related to WAF CAPTCHA seqid
const sig_data = /seqid\s=\s"(\w+)"/g
const waf_id_data = /TencentCaptcha\(\'(\d+)\'/g
const service = axios.create({
baseURL: '/api',
timeout: 10000,
withCredentials: true
});
service.interceptors.response.use((response)=>{
const res = response.data;
if(res.code === 0){
return res;
}else{
// Capture the error and render the CAPTCHA
const matches = sig_data.exec(res);
if(matches){
// Display the CAPTCHA
let seqid = matches[1];
const wid_matches = waf_id_data.exec(res);
let wid = wid_matches[1]
var captcha = new TencentCaptcha(wid, function(res){
var captchaResult = []
captchaResult.push(res.ret)
if(res.ret === 0){
captchaResult.push(res.ticket)
captchaResult.push(res.randstr)
captchaResult.push(seqid)
}
var content = captchaResult.join('\n')
axios.post(
"/WafCaptcha",content
).then().catch();
});
captcha.show()
}else{
return res;
}
}
},()=>{});
export default service;
Vue.prototype.$axios = service;
2. Add the Axios response with added interceptors during API call.
getTopic:function(){ this.$axios.get("/api.php").then(res => { this.topic = res }); }
3. Globally include the Captcha script in public/index.html by adding <script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>.
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
