![[tutorial] criar captucha js e html5 canvas Tumblryy](https://2img.net/r/ihimg/scaled/large/854/tumblryy.png)
Início
![[tutorial] criar captucha js e html5 canvas QdhdIA2](https://i.imgur.com/qdhdIA2.png)
e ae galera nesse tutorial vou ensinar como criar captucha em javascript e html5 com canvas, embora o uso de captucha irrite alguns usuarios ele e extremamente importante para evitar bots, para começar criamos uma pagina basica
colocamos a tag canvas definimos um tamanho com o atributo width e height tambem colocamos um id para manipular, tambem usamos o css border para colocar uma bordar
embaixo criamos um input text e dois input button, o text vamos escrever o o captucha e um button vai ser para mudar o captucha e outro sera para checar (isso poderia ser o submit de um form ou botao com o evento final)
agora criamos a tag script e tambem criamos uma função e objeto Array, na array colocamos varias palavras
agora criamos uma variavel e atribuimos a ela o atributo length do objeto array isso serve para dizer quantas string tem la dentro
agora instanciamos o objeto para manipular o canvas para isso usamos document.getElementById e passamos como argumento o id do canvas
usamos o metodo getContext do objeto canvas passamos como argumento para ele a string "2d", e atribuimos o mesmo a outra variavel
agora criamos uma variavel atriubuimos para ela duas strings da array randomicamente, para isso usamos Math.floor para tornar um numero inteiro, usamos Math.random para pegar um numero randomico, fazemos isso duas vezes e concatenamos para gerar duas palavras (no final vamos retornar essa variavel para poder comparar)
agora usamos o metodo fillText do objeto getContext passamos como argumento a variavel que esta as duas strings concatenada, e tambem passamos duas posições do canvas, e retornamos a variavel
agora criamos outra tag script porem essa deve ficar embaixo da tag canvas, dentro dessa tag criamos uma variavel e atribuimos a ela a função
voce deve ter percebido que canvas ja ta gerando palavras (nao é uma palavra exatamente e sim uma imagem), colocamos um evento onclick no botao para mudar, ai vem o grande erro q eu esqueci (quando gera uma nova palavra ele desenha junto com a outra gerando uma suruba de palavras, para corrigir isso vamos desenhar uma quadrado branco em cima para isso usamos o atributo fillStyle para mudar a cor e o motodo fillRect passamos como argumento para ele o valor 0,0 e valor maximo de height e width do canva, depois usamos fillStyle para voltar a cor original antes do fillText, ta ta eu poderia ter apagado o tutorial e reescrito novamente mais to com preguiça entao vai ter q ser na base da gambiarra aq)
agora criamos outra função essa vai comparar o retorno da variavel com o texto dentro do input text, nao vou ensinar essa parte pq e a mais ne mais vou deixar o codigo ai pra vcs, na duvida so perguntar ^^
tipo esse nao é um dos melhores captucha pq da para conseguir a string entao e facil burlar esse, porem se vc encriptar as string ou usar hash isso deixaria mais seguro e pouco mais dificil de burlar ou usar uma linguagem como php para manipular as variaveis sem o usuario final tenha acesso a elas
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
by kodo no kami
- Código:
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
</body>
</html>
colocamos a tag canvas definimos um tamanho com o atributo width e height tambem colocamos um id para manipular, tambem usamos o css border para colocar uma bordar
- Código:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<canvas id="fts_captucha" width="100" height="100"></canvas>
</body>
</html>
embaixo criamos um input text e dois input button, o text vamos escrever o o captucha e um button vai ser para mudar o captucha e outro sera para checar (isso poderia ser o submit de um form ou botao com o evento final)
- Código:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<canvas id="fts_captucha" width="100" height="50" style="border: 1px solid"></canvas><br>
<input type="text" id="fts_texto">
<input type="button" value="mudar">
<input type="button" value="captucha">
</body>
</html>
agora criamos a tag script e tambem criamos uma função e objeto Array, na array colocamos varias palavras
- Código:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function fts_cap()
{
kodo = new Array();
kodo.push("fts");
kodo.push("315");
kodo.push("kodo");
kodo.push("no");
kodo.push("kami");
}
</script>
</head>
<body>
<canvas id="fts_captucha" width="100" height="50" style="border: 1px solid"></canvas><br>
<input type="text" id="fts_texto">
<input type="button" value="mudar">
<input type="button" value="captucha">
</body>
</html>
agora criamos uma variavel e atribuimos a ela o atributo length do objeto array isso serve para dizer quantas string tem la dentro
- Código:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function fts_cap()
{
kodo = new Array();
kodo.push("fts");
kodo.push("315");
kodo.push("kodo");
kodo.push("no");
kodo.push("kami");
tam = kodo.length;
}
</script>
</head>
<body>
<canvas id="fts_captucha" width="100" height="50" style="border: 1px solid"></canvas><br>
<input type="text" id="fts_texto">
<input type="button" value="mudar">
<input type="button" value="captucha">
</body>
</html>
agora instanciamos o objeto para manipular o canvas para isso usamos document.getElementById e passamos como argumento o id do canvas
- Código:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function fts_cap()
{
kodo = new Array();
kodo.push("fts");
kodo.push("315");
kodo.push("kodo");
kodo.push("no");
kodo.push("kami");
tam = kodo.length;
fts = document.getElementById("fts_captucha");
}
</script>
</head>
<body>
<canvas id="fts_captucha" width="100" height="50" style="border: 1px solid"></canvas><br>
<input type="text" id="fts_texto">
<input type="button" value="mudar">
<input type="button" value="captucha">
</body>
</html>
usamos o metodo getContext do objeto canvas passamos como argumento para ele a string "2d", e atribuimos o mesmo a outra variavel
- Código:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function fts_cap()
{
kodo = new Array();
kodo.push("fts");
kodo.push("315");
kodo.push("kodo");
kodo.push("no");
kodo.push("kami");
tam = kodo.length;
fts = document.getElementById("fts_captucha");
hack = fts.getContext("2d");
}
</script>
</head>
<body>
<canvas id="fts_captucha" width="100" height="50" style="border: 1px solid"></canvas><br>
<input type="text" id="fts_texto">
<input type="button" value="mudar">
<input type="button" value="captucha">
</body>
</html>
agora criamos uma variavel atriubuimos para ela duas strings da array randomicamente, para isso usamos Math.floor para tornar um numero inteiro, usamos Math.random para pegar um numero randomico, fazemos isso duas vezes e concatenamos para gerar duas palavras (no final vamos retornar essa variavel para poder comparar)
- Código:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function fts_cap()
{
kodo = new Array();
kodo.push("fts");
kodo.push("315");
kodo.push("kodo");
kodo.push("no");
kodo.push("kami");
tam = kodo.length;
fts = document.getElementById("fts_captucha");
hack = fts.getContext("2d");
lol = kodo[Math.floor(Math.random() * tam)] + " " + kodo[Math.floor(Math.random() * tam)];
}
</script>
</head>
<body>
<canvas id="fts_captucha" width="100" height="50" style="border: 1px solid"></canvas><br>
<input type="text" id="fts_texto">
<input type="button" value="mudar">
<input type="button" value="captucha">
</body>
</html>
agora usamos o metodo fillText do objeto getContext passamos como argumento a variavel que esta as duas strings concatenada, e tambem passamos duas posições do canvas, e retornamos a variavel
- Código:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function fts_cap()
{
kodo = new Array();
kodo.push("fts");
kodo.push("315");
kodo.push("kodo");
kodo.push("no");
kodo.push("kami");
tam = kodo.length;
fts = document.getElementById("fts_captucha");
hack = fts.getContext("2d");
lol = kodo[Math.floor(Math.random() * tam)] + " " + kodo[Math.floor(Math.random() * tam)];
hack.fillText(lol,20,25);
return lol;
}
</script>
</head>
<body>
<canvas id="fts_captucha" width="100" height="50" style="border: 1px solid"></canvas><br>
<input type="text" id="fts_texto">
<input type="button" value="mudar">
<input type="button" value="captucha">
</body>
</html>
agora criamos outra tag script porem essa deve ficar embaixo da tag canvas, dentro dessa tag criamos uma variavel e atribuimos a ela a função
- Código:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function fts_cap()
{
kodo = new Array();
kodo.push("fts");
kodo.push("315");
kodo.push("kodo");
kodo.push("no");
kodo.push("kami");
tam = kodo.length;
fts = document.getElementById("fts_captucha");
hack = fts.getContext("2d");
lol = kodo[Math.floor(Math.random() * tam)] + " " + kodo[Math.floor(Math.random() * tam)];
hack.fillText(lol,20,25);
return lol;
}
</script>
</head>
<body>
<canvas id="fts_captucha" width="100" height="50" style="border: 1px solid"></canvas><br>
<input type="text" id="fts_texto">
<input type="button" value="mudar">
<input type="button" value="captucha">
<script type="text/javascript">
xd = fts_cap();
</script>
</body>
</html>
voce deve ter percebido que canvas ja ta gerando palavras (nao é uma palavra exatamente e sim uma imagem), colocamos um evento onclick no botao para mudar, ai vem o grande erro q eu esqueci (quando gera uma nova palavra ele desenha junto com a outra gerando uma suruba de palavras, para corrigir isso vamos desenhar uma quadrado branco em cima para isso usamos o atributo fillStyle para mudar a cor e o motodo fillRect passamos como argumento para ele o valor 0,0 e valor maximo de height e width do canva, depois usamos fillStyle para voltar a cor original antes do fillText, ta ta eu poderia ter apagado o tutorial e reescrito novamente mais to com preguiça entao vai ter q ser na base da gambiarra aq)
- Código:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function fts_cap()
{
kodo = new Array();
kodo.push("fts");
kodo.push("315");
kodo.push("kodo");
kodo.push("no");
kodo.push("kami");
tam = kodo.length;
fts = document.getElementById("fts_captucha");
hack = fts.getContext("2d");
lol = kodo[Math.floor(Math.random() * tam)] + " " + kodo[Math.floor(Math.random() * tam)];
hack.fillStyle = "#ffffff";
hack.fillRect(0,0,100,50);
hack.fillStyle = "#000000";
hack.fillText(lol,20,25);
return lol;
}
</script>
</head>
<body>
<canvas id="fts_captucha" width="100" height="50" style="border: 1px solid"></canvas><br>
<input type="text" id="fts_texto">
<input type="button" value="mudar" onclick="xd = fts_cap()">
<input type="button" value="captucha">
<script type="text/javascript">
xd = fts_cap();
</script>
</body>
</html>
agora criamos outra função essa vai comparar o retorno da variavel com o texto dentro do input text, nao vou ensinar essa parte pq e a mais ne mais vou deixar o codigo ai pra vcs, na duvida so perguntar ^^
- Código:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function fts_cap()
{
kodo = new Array();
kodo.push("fts");
kodo.push("315");
kodo.push("kodo");
kodo.push("no");
kodo.push("kami");
tam = kodo.length;
fts = document.getElementById("fts_captucha");
hack = fts.getContext("2d");
lol = kodo[Math.floor(Math.random() * tam)] + " " + kodo[Math.floor(Math.random() * tam)];
hack.fillStyle = "#ffffff";
hack.fillRect(0,0,100,50);
hack.fillStyle = "#000000";
hack.fillText(lol,20,25);
return lol;
}
function fts_cmp(c)
{
if(document.getElementById("fts_texto").value == c)
{
alert("captucha foi digitado com sucesso -kodo no kami");
xd = fts_cap();
}
else
{
alert("captucha errado -kodo no kami");
xd = fts_cap();
}
}
</script>
</head>
<body>
<canvas id="fts_captucha" width="100" height="50" style="border: 1px solid"></canvas><br>
<input type="text" id="fts_texto">
<input type="button" value="mudar" onclick="xd = fts_cap()">
<input type="button" value="captucha" onclick="fts_cmp(xd)">
<script type="text/javascript">
xd = fts_cap();
</script>
</body>
</html>
tipo esse nao é um dos melhores captucha pq da para conseguir a string entao e facil burlar esse, porem se vc encriptar as string ou usar hash isso deixaria mais seguro e pouco mais dificil de burlar ou usar uma linguagem como php para manipular as variaveis sem o usuario final tenha acesso a elas
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
by kodo no kami
