[tutorial] criar captucha js e html5 canvas

Postagem de conteúdo sobre programação javascript
Post Reply
User avatar
Kodo no Kami
Admin
Admin
Posts: 739
Joined: Fri Jan 02, 2015 1:56 pm
Contact:

[tutorial] criar captucha js e html5 canvas

Post by Kodo no Kami » Sun May 03, 2015 9:23 am

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

Code: Select all

<!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

Code: Select all

<!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)

Code: Select all

<!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

Code: Select all

<!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

Code: Select all

<!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

Code: Select all

<!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

Code: Select all

<!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)

Code: Select all

<!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

Code: Select all

<!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

Code: Select all

<!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)

Code: Select all

<!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 ^^

Code: Select all

<!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

exemplo online

by kodo no kami
Image

que desagradavel ~ mirai kuriyama

Post Reply

Return to “Javascript”