kor-elf/service-captcha-gui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add customizable captcha verified name attribute.

Browse Source
This commit is contained in:
Leonid Nikitin 2023-12-02 21:27:06 +06:00
parent ae7e715142
commit 6363747fa1
Signed by: kor-elf
GPG Key ID: 604A019EB118CAC4
4 changed files with 17 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
README.md
View File

@ -7,7 +7,8 @@
<div class="captcha-service-kor-elf" <div class="captcha-service-kor-elf"
data-domain="Домен с http|https" data-domain="Домен с http|https"
data-static-path="Путь к статике, в данном случае к css" data-static-path="Путь к статике, в данном случае к css"
data-token="Публичный токен"></div> data-token="Публичный токен"
data-captcha-verified-name="captcha-verified"></div>
<script src="script.js" async></script> <script src="script.js" async></script>
``` ```
# data-domain # data-domain
@ -24,3 +25,7 @@
# data-token # data-token
Указываем публичный токен, который мы получаем от сервиса для проверки от робота. Указываем публичный токен, который мы получаем от сервиса для проверки от робота.
# data-captcha-verified-name
Добавляется input с name после успешной валидации.

2
exmplate/index.html
View File

@ -6,7 +6,7 @@
<title>Title</title> <title>Title</title>
</head> </head>
<body> <body>
<div class="captcha-service-kor-elf" data-domain="" data-static-path="./" data-token=""></div> <div class="captcha-service-kor-elf" data-domain="" data-static-path="./" data-token="" data-captcha-verified-name="captcha-verified"></div>
<script src="script.js" async></script> <script src="script.js" async></script>
</body> </body>
</html> </html>

17
exmplate/script.js
View File

@ -7,6 +7,7 @@
const domain = element.getAttribute('data-domain'); const domain = element.getAttribute('data-domain');
const token = element.getAttribute('data-token'); const token = element.getAttribute('data-token');
const staticPath = element.getAttribute('data-static-path'); const staticPath = element.getAttribute('data-static-path');
const captchaVerifiedName = element.getAttribute('data-captcha-verified-name');
let windowCaptcha = null; let windowCaptcha = null;
@ -21,14 +22,14 @@
shadow.appendChild(button); shadow.appendChild(button);
button.addEventListener('click', function () { button.addEventListener('click', function () {
if (windowCaptcha === null) { if (windowCaptcha === null) {
windowCaptcha = createWindowCaptcha(shadow, domain, token); windowCaptcha = createWindowCaptcha(shadow, domain, token, captchaVerifiedName);
} }
windowCaptcha.style.display = 'block'; windowCaptcha.style.display = 'block';
actionGetCaptcha(windowCaptcha, domain, token, shadow); actionGetCaptcha(windowCaptcha, domain, token, shadow, captchaVerifiedName);
}); });
}); });
function createWindowCaptcha (shadow, domain, token) { function createWindowCaptcha (shadow, domain, token, captchaVerifiedName) {
const windowCaptcha = document.createElement('div'); const windowCaptcha = document.createElement('div');
windowCaptcha.classList.add('window-captcha'); windowCaptcha.classList.add('window-captcha');
windowCaptcha.innerHTML = `<div class="window-captcha__content"> windowCaptcha.innerHTML = `<div class="window-captcha__content">
@ -49,7 +50,7 @@
}); });
windowCaptcha.querySelector('button.window-captcha__reload').addEventListener('click', function () { windowCaptcha.querySelector('button.window-captcha__reload').addEventListener('click', function () {
actionGetCaptcha(windowCaptcha, domain, token, shadow); actionGetCaptcha(windowCaptcha, domain, token, shadow, captchaVerifiedName);
}); });
return windowCaptcha; return windowCaptcha;
@ -60,7 +61,7 @@
windowCaptcha.style.display = 'none'; windowCaptcha.style.display = 'none';
} }
function actionGetCaptcha(windowCaptcha, domain, token, shadow) function actionGetCaptcha(windowCaptcha, domain, token, shadow, captchaVerifiedName)
{ {
let bodyBlock = windowCaptcha.querySelector('div.window-captcha__content__body'); let bodyBlock = windowCaptcha.querySelector('div.window-captcha__content__body');
if (bodyBlock.querySelectorAll('.loading').length > 0) { if (bodyBlock.querySelectorAll('.loading').length > 0) {
@ -116,7 +117,7 @@
}); });
bodyBlock.querySelector('.window-captcha__content__body__button').addEventListener('click', function () { bodyBlock.querySelector('.window-captcha__content__body__button').addEventListener('click', function () {
checkingCaptcha(bodyBlock, domain, token, shadow); checkingCaptcha(bodyBlock, domain, token, shadow, captchaVerifiedName);
}); });
}) })
.catch(error => { .catch(error => {
@ -124,7 +125,7 @@
}); });
} }
function checkingCaptcha (bodyBlock, domain, token, shadow) { function checkingCaptcha (bodyBlock, domain, token, shadow, captchaVerifiedName) {
let button = bodyBlock.querySelector('button.window-captcha__content__body__button'); let button = bodyBlock.querySelector('button.window-captcha__content__body__button');
if (button.querySelectorAll('.loading').length > 0) { if (button.querySelectorAll('.loading').length > 0) {
return null; return null;
@ -178,7 +179,7 @@
} }
shadow.querySelector('button.button-open-window-captcha').remove(); shadow.querySelector('button.button-open-window-captcha').remove();
let captchaVerified = document.createElement('div'); let captchaVerified = document.createElement('div');
captchaVerified.innerHTML = `<span class="captcha-verified">Ура!!! Проверку прошли!</span><input type="hidden" name="captcha-verified" value="${ data.captcha_key }">`; captchaVerified.innerHTML = `<span class="captcha-verified">Ура!!! Проверку прошли!</span><input type="hidden" name="${ captchaVerifiedName }" value="${ data.captcha_key }">`;
shadow.appendChild(captchaVerified); shadow.appendChild(captchaVerified);
shadow.querySelector('.window-captcha').remove(); shadow.querySelector('.window-captcha').remove();
}) })

2
production/script.js
View File

@ -2,4 +2,4 @@
* Copyright (C) 2023 Leonid Nikitin (kor-elf) * Copyright (C) 2023 Leonid Nikitin (kor-elf)
* https://git.kor-elf.net/kor-elf/service-captcha-gui/src/branch/main/LICENSE.md * https://git.kor-elf.net/kor-elf/service-captcha-gui/src/branch/main/LICENSE.md
*/ */
!function(e){let t=e.querySelectorAll("div.captcha-service-kor-elf");function n(e){e.style.display="none"}function c(t,n,c,a){let i=t.querySelector("div.window-captcha__content__body");if(i.querySelectorAll(".loading").length>0)return null;i.innerHTML='<div class="loading"></div>',fetch(n+"/api/v1/captcha",{headers:{"Content-Type":"application/json",Accept:"application/json","public-token":c}}).then(e=>e.json()).then(function(t){let r=t.image_body.width,l=t.image_body.height;i.innerHTML=`<form method="post"><div class="window-captcha__content__body__head"><img src="${t.image_head.base64}" width="100%"></div><p>Выберите значение в том порядке, на котором на картинке выше:</p><div class="window-captcha__content__body__coordinator"><img src="${t.image_body.base64}" width="100%" /></div><input type="hidden" name="captcha_key" class="captcha_key" value="${t.captcha_key}" /><button type="button" class="window-captcha__content__body__button">Я не робот!</button></form>`;let d=i.querySelector("div.window-captcha__content__body__coordinator"),s=d.querySelector("img");s.addEventListener("click",function(t){let n=e.createElement("div");n.style.left=t.offsetX/s.width*100+"%",n.style.top=t.offsetY/s.height*100+"%",n.classList.add("pointer");let c=t.offsetX*(r/s.width),o=t.offsetY*(l/s.height),a=d.querySelectorAll(".pointer").length+1;n.innerHTML=`<span class="pounter__number">${a}</span><input type="hidden" class="x" name="pointer[][x]" value="${Math.round(c)}" /><input type="hidden" class="y" name="pointer[][y]" value="${Math.round(o)}" />`,n.addEventListener("click",function(){n.remove(),d.querySelectorAll(".pointer").forEach(function(e,t){e.querySelector("span.pounter__number").textContent=t+1})}),d.appendChild(n)}),i.querySelector(".window-captcha__content__body__button").addEventListener("click",function(){(function t(n,c,a,i){let r=n.querySelector("button.window-captcha__content__body__button");if(r.querySelectorAll(".loading").length>0)return null;let l=e.createElement("span");l.classList.add("loading"),r.appendChild(l);let d={captcha_key:n.querySelector(".captcha_key").value,verification:[]};n.querySelectorAll(".pointer").forEach(function(e){d.verification.push({x:e.querySelector(".x").value,y:e.querySelector(".y").value})}),fetch(c+"/api/v1/captcha",{method:"POST",headers:{"Content-Type":"application/json",Accept:"application/json","public-token":a},body:JSON.stringify(d)}).then(e=>{if(429===e.status){o("Вы превысили количество попыток. Обновите каптчу.",r);return}return e.json()}).then(function(t){if(void 0!==t.errors){let n="";for(let c in t.errors)n+=t.errors[c]+"<br>";""===n&&(n=t.message),o(n,r);return}if(void 0===t.captcha_key){o("Произошла ошибка!",r);return}i.querySelector("button.button-open-window-captcha").remove();let a=e.createElement("div");a.innerHTML=`<span class="captcha-verified">Ура!!! Проверку прошли!</span><input type="hidden" name="captcha-verified" value="${t.captcha_key}">`,i.appendChild(a),i.querySelector(".window-captcha").remove()}).catch(e=>{o("Произошла ошибка!",r)}).finally(function(){l.remove()})})(i,n,c,a)})}).catch(e=>{i.innerHTML=`<div class="window-captcha__content__body__error">Произошла ошибка, сервис с каптчей не ответил. Попробуйте ещё раз!</div>`})}function o(t,n){let c=e.createElement("div");c.classList.add("error-message"),c.innerHTML=t,n.before(c),setTimeout(function(){c.remove()},3e3)}t.forEach(function(t){let o=t.attachShadow({mode:"closed"}),a=e.createElement("button"),i=e.createElement("link"),r=t.getAttribute("data-domain"),l=t.getAttribute("data-token"),d=t.getAttribute("data-static-path"),s=null;i.rel="stylesheet",i.type="text/css",i.href=d+"/style.css",o.appendChild(i),a.textContent="Я не робот!",a.type="button",a.classList.add("button-open-window-captcha"),o.appendChild(a),a.addEventListener("click",function(){null===s&&(s=function t(o,a,i){let r=e.createElement("div");return r.classList.add("window-captcha"),r.innerHTML=`<div class="window-captcha__content"><div class="window-captcha__content__header">Я не робот! <button type="button" class="window-captcha__reload"></button><button type="button" class="window-captcha__close">X</button></div><div class="window-captcha__content__body"></div></div>`,o.appendChild(r),r.addEventListener("click",function(e){if(e.target!==r)return null;n(r)}),r.querySelector("button.window-captcha__close").addEventListener("click",function(){n(r)}),r.querySelector("button.window-captcha__reload").addEventListener("click",function(){c(r,a,i,o)}),r}(o,r,l)),s.style.display="block",c(s,r,l,o)})})}(document); !function(t){let e=t.querySelectorAll("div.captcha-service-kor-elf");function n(t){t.style.display="none"}function c(e,n,c,o,i){let r=e.querySelector("div.window-captcha__content__body");if(r.querySelectorAll(".loading").length>0)return null;r.innerHTML='<div class="loading"></div>',fetch(n+"/api/v1/captcha",{headers:{"Content-Type":"application/json",Accept:"application/json","public-token":c}}).then(t=>t.json()).then(function(e){let l=e.image_body.width,d=e.image_body.height;r.innerHTML=`<form method="post"><div class="window-captcha__content__body__head"><img src="${e.image_head.base64}" width="100%"></div><p>Выберите значение в том порядке, на котором на картинке выше:</p><div class="window-captcha__content__body__coordinator"><img src="${e.image_body.base64}" width="100%" /></div><input type="hidden" name="captcha_key" class="captcha_key" value="${e.captcha_key}" /><button type="button" class="window-captcha__content__body__button">Я не робот!</button></form>`;let s=r.querySelector("div.window-captcha__content__body__coordinator"),u=s.querySelector("img");u.addEventListener("click",function(e){let n=t.createElement("div");n.style.left=e.offsetX/u.width*100+"%",n.style.top=e.offsetY/u.height*100+"%",n.classList.add("pointer");let c=e.offsetX*(l/u.width),a=e.offsetY*(d/u.height),o=s.querySelectorAll(".pointer").length+1;n.innerHTML=`<span class="pounter__number">${o}</span><input type="hidden" class="x" name="pointer[][x]" value="${Math.round(c)}" /><input type="hidden" class="y" name="pointer[][y]" value="${Math.round(a)}" />`,n.addEventListener("click",function(){n.remove(),s.querySelectorAll(".pointer").forEach(function(t,e){t.querySelector("span.pounter__number").textContent=e+1})}),s.appendChild(n)}),r.querySelector(".window-captcha__content__body__button").addEventListener("click",function(){(function e(n,c,o,i,r){let l=n.querySelector("button.window-captcha__content__body__button");if(l.querySelectorAll(".loading").length>0)return null;let d=t.createElement("span");d.classList.add("loading"),l.appendChild(d);let s={captcha_key:n.querySelector(".captcha_key").value,verification:[]};n.querySelectorAll(".pointer").forEach(function(t){s.verification.push({x:t.querySelector(".x").value,y:t.querySelector(".y").value})}),fetch(c+"/api/v1/captcha",{method:"POST",headers:{"Content-Type":"application/json",Accept:"application/json","public-token":o},body:JSON.stringify(s)}).then(t=>{if(429===t.status){a("Вы превысили количество попыток. Обновите каптчу.",l);return}return t.json()}).then(function(e){if(void 0!==e.errors){let n="";for(let c in e.errors)n+=e.errors[c]+"<br>";""===n&&(n=e.message),a(n,l);return}if(void 0===e.captcha_key){a("Произошла ошибка!",l);return}i.querySelector("button.button-open-window-captcha").remove();let o=t.createElement("div");o.innerHTML=`<span class="captcha-verified">Ура!!! Проверку прошли!</span><input type="hidden" name="${r}" value="${e.captcha_key}">`,i.appendChild(o),i.querySelector(".window-captcha").remove()}).catch(t=>{a("Произошла ошибка!",l)}).finally(function(){d.remove()})})(r,n,c,o,i)})}).catch(t=>{r.innerHTML=`<div class="window-captcha__content__body__error">Произошла ошибка, сервис с каптчей не ответил. Попробуйте ещё раз!</div>`})}function a(e,n){let c=t.createElement("div");c.classList.add("error-message"),c.innerHTML=e,n.before(c),setTimeout(function(){c.remove()},3e3)}e.forEach(function(e){let a=e.attachShadow({mode:"closed"}),o=t.createElement("button"),i=t.createElement("link"),r=e.getAttribute("data-domain"),l=e.getAttribute("data-token"),d=e.getAttribute("data-static-path"),s=e.getAttribute("data-captcha-verified-name"),u=null;i.rel="stylesheet",i.type="text/css",i.href=d+"/style.css",a.appendChild(i),o.textContent="Я не робот!",o.type="button",o.classList.add("button-open-window-captcha"),a.appendChild(o),o.addEventListener("click",function(){null===u&&(u=function e(a,o,i,r){let l=t.createElement("div");return l.classList.add("window-captcha"),l.innerHTML=`<div class="window-captcha__content"><div class="window-captcha__content__header">Я не робот! <button type="button" class="window-captcha__reload"></button><button type="button" class="window-captcha__close">X</button></div><div class="window-captcha__content__body"></div></div>`,a.appendChild(l),l.addEventListener("click",function(t){if(t.target!==l)return null;n(l)}),l.querySelector("button.window-captcha__close").addEventListener("click",function(){n(l)}),l.querySelector("button.window-captcha__reload").addEventListener("click",function(){c(l,o,i,a,r)}),l}(a,r,l,s)),u.style.display="block",c(u,r,l,a,s)})})}(document);