Criação de Imagens CAPTCHA em .NET
Experience Level - Intermediate
Isto é como criar um simples você mesmo, pode não ser o mais elaborado, mas fornecerá pelo menos uma camada extra de segurança para você e fornecerá um conjunto de resultados em constante mudança
Isso foi construído em SQL, com roteamento de página VB.NET e MVC.
Primeiro precisamos criar a Tabela SQL para abrigar todos os nossos resultados. Para sistemas de alto uso, você precisará criar um índice no GUID.
Create Table
CREATE TABLE [dbo].[captcha]([captchaGUID] [varchar](36) NOT NULL,[captchaValue] [varchar](10) NULL,[captchaDateAdded] [datetime] NULL,[captchaDateGuessed] [datetime] NULL)
Adicionar uma página de serviço
Em seguida, criaremos uma função para gerar uma letra aleatória. Se você olhar atentamente para a parte inferior, o código retornará strings vazias para alguns números, desta forma os valores gerados serão sempre de comprimento variável.
A razão pela qual usamos 40 como o valor é gerar uma chance em 5 de que a string (com um comprimento de 32) retorne um valor em branco.
Random Letter Function
CREATE FUNCTION [dbo].[GetLetter](@MyInt INT) RETURNS VARCHAR(1) AS BEGINRETURN (SELECT REPLACE(SUBSTRING('ABCDEFGHJKMNPQRTUVQXYZ0123456789', @MyInt,1),'_',''))ENDGOSELECT dbo.GetLetter(ROUND(RAND()*40,0))
Adicionar uma página de serviço
Agora vamos criar um procedimento armazenado para enviar o registro de volta ao site, também é aqui que os Captcha's que foram adivinhados serão gerados e excluídos. Neste código, eles serão excluídos após 30 minutos.
Chamamos a função acima de 10 vezes e concatenamos os valores juntos e removemos quaisquer valores adivinhados mais antigos.Stored Procedure
CREATE PROC [dbo].[NewCaptchaValue] AS BEGINWHILE (SELECT COUNT(*) FROM captcha WHERE captchaDateGuessed IS NULL)<150BEGIN
INSERT INTO captcha(captchaGUID,captchaValue,captchaDateAdded)SELECT NEWID(),dbo.GetLetter(ROUND(RAND()*40,0))+dbo.GetLetter(ROUND(RAND()*40,0))+dbo.GetLetter(ROUND(RAND()*40,0))+dbo.GetLetter(ROUND(RAND()*40,0))+dbo.GetLetter(ROUND(RAND()*40,0))+dbo.GetLetter(ROUND(RAND()*40,0))+dbo.GetLetter(ROUND(RAND()*40,0))+dbo.GetLetter(ROUND(RAND()*40,0))+dbo.GetLetter(ROUND(RAND()*40,0))+dbo.GetLetter(ROUND(RAND()*40,0)),GETDATE()ENDDELETE FROM captcha WHERE captchaDateGuessed<DATEADD(MINUTE,-30,GETDATE())DECLARE @Newcaptcha VARCHAR(36)=(SELECT TOP 1 captchaGUID FROM captcha WHERE captchaDateGuessed IS NULL)SELECT @NewcaptchaEND
Adicionar uma página de serviço
Eu decidi enviar de volta uma sequência de Pass/Fail.
Stored Procedure
CREATE PROC [dbo].[CaptchaValue](@captchaGUID VARCHAR(36),@captchaValue VARCHAR(10)) AS BEGINDECLARE @CaptchaValueDB VARCHAR(10)=(SELECT captchaValue FROM captcha WHERE captchaGUID=@captchaGUID)DECLARE @Newcaptcha VARCHAR(36)UPDATE captcha SET captchaDateGuessed=GETDATE() WHERE captchaGUID=@captchaGUIDIF @captchaValue=@CaptchaValueDBBEGINSET @Newcaptcha='Pass'ENDIF @captchaValue<>@CaptchaValueDB OR @CaptchaValueDB IS NULLBEGINSET @Newcaptcha='Fail'ENDSELECT @NewcaptchaEND
Mudar para o projeto Academy no Visual Studio
Alguns passos a seguir aqui
- Se o projeto ainda não o tiver, adicione a pasta App_Code conforme a captura de tela
- Botão direito do mouse na pasta App_Code e selecione Add>Class
- Um pop-up deve aparecer, chame essa classe de Captcha.vb
Clique com o botão direito do mouse neste novo item e selecione propriedades.
Acima da declaração de Classe Pública, adicione a seguinte referência;
Imports System.Drawing
Mudar para o projeto Academy no Visual Studio
Private Shared Function GenerateLineNumberY() As Integer Dim ret As New Integer ret = (6 * Right((Rnd() * Rnd() * Rnd()), 1)) + 2 Return ret End Function Private Shared Function GenerateLineNumberX() As Integer Dim ret As New Integer ret = (6 * Right((Rnd() * Rnd() * Rnd()), 1)) + 2 Return ret End Function
Mudar para o projeto Academy no Visual Studio
Private Shared Function GenerateLineNumberSpace() As Integer Dim ret As New Integer ret = (Right(Rnd(), 1)) + 13 Return ret End Function Private Shared Function GenerateLineNumberHeight() As Integer Dim ret As New Integer ret = (2 * Right((Rnd() * Rnd() * Rnd()), 1)) + 1 Return ret End Function
Mudar para o projeto Academy no Visual Studio
Private Shared Function GenerateRandomPenColor() As System.Drawing.Pen Dim mypen As New Pen(Brushes.Cyan) Dim ret As New Integer ret = Right((Rnd() * Rnd() * Rnd()), 1) Select Case ret Case 5, 0, 1 mypen.Color = Color.DarkGray Case 6, 2 mypen.Color = Color.DarkRed Case 7, 3, 9 mypen.Color = Color.DarkOliveGreen Case 8, 4 mypen.Color = Color.DarkOrange End Select Return mypen End Function Private Shared Function GenerateRandomBrushColor() As System.Drawing.SolidBrush Dim myBrush As New SolidBrush(Color.Aqua) Dim ret As New Integer ret = Right((Rnd() * Rnd() * Rnd()), 1) Select Case ret Case 5, 0, 1 myBrush.Color = Color.DarkGray Case 6, 2 myBrush.Color = Color.DarkRed Case 7, 3, 9 myBrush.Color = Color.DarkOliveGreen Case 8, 4 myBrush.Color = Color.DarkOrange End Select Return myBrush End Function Public Shared Function GenerateCaptcha(CaptchaString As String) As Bitmap Dim Height As Integer = 60 Dim Width As Integer = 300 Dim objBitmap As Bitmap Dim objGraphics As Graphics
Dim oPoint As New PointF objBitmap = New Bitmap(Width, Height) objGraphics = Graphics.FromImage(objBitmap) 'Draw Background objGraphics.FillRectangle(Brushes.White, 0, 0, Width, Height) objGraphics.DrawRectangle(Pens.Black, 0, 0, Width - 2, Height - 2) 'Draw Text Dim oFont As New Font("Arial", 20) Dim spac As Integer = 5 Dim stringInt As Integer = 1 While stringInt <= CaptchaString.Length spac = spac + GenerateLineNumberSpace() oPoint = New PointF(spac, GenerateLineNumberHeight) objGraphics.DrawString(Mid(CaptchaString, stringInt, 1), oFont, GenerateRandomBrushColor, oPoint) stringInt = stringInt + 1 End While 'White Lines objGraphics.DrawLine(Pens.White, GenerateLineNumberX, GenerateLineNumberY, Width - GenerateLineNumberX(), Height - GenerateLineNumberY()) objGraphics.DrawLine(Pens.White, GenerateLineNumberX, GenerateLineNumberY, Width - GenerateLineNumberX(), Height - GenerateLineNumberY()) objGraphics.DrawLine(Pens.White, GenerateLineNumberX, GenerateLineNumberY, Width - GenerateLineNumberX(), Height - GenerateLineNumberY()) objGraphics.DrawLine(Pens.White, GenerateLineNumberX, GenerateLineNumberY, Width - GenerateLineNumberX(), Height - GenerateLineNumberY()) objGraphics.DrawLine(Pens.White, GenerateLineNumberX, GenerateLineNumberY, Width - GenerateLineNumberX(), Height - GenerateLineNumberY()) objGraphics.DrawLine(Pens.White, GenerateLineNumberX, GenerateLineNumberY, Width - GenerateLineNumberX(), Height - GenerateLineNumberY()) objGraphics.DrawLine(Pens.White, GenerateLineNumberX, GenerateLineNumberY, Width - GenerateLineNumberX(), Height - GenerateLineNumberY()) objGraphics.DrawLine(Pens.White, GenerateLineNumberX, GenerateLineNumberY, Width - GenerateLineNumberX(), Height - GenerateLineNumberY()) objGraphics.DrawLine(Pens.White, GenerateLineNumberX, GenerateLineNumberY, Width - GenerateLineNumberX(), Height - GenerateLineNumberY()) 'Draw Lines objGraphics.DrawLine(GenerateRandomPenColor, GenerateLineNumberX, GenerateLineNumberY, Width - GenerateLineNumberX(), Height - GenerateLineNumberY()) objGraphics.DrawLine(GenerateRandomPenColor, GenerateLineNumberX, GenerateLineNumberY, Width - GenerateLineNumberX(), Height - GenerateLineNumberY())
objGraphics.DrawRectangle(Pens.Black, 0, 0, Width - 2, Height - 2)
Return objBitmap End Function
Encontre o sub RegisterRoutes e adicione uma nova rota (Routes.MapPageRoute) dentro.
Sub RegisterRoutes(ByVal Routes As RouteCollection) Routes.MapPageRoute("Captcha", "Captcha/{GUID}", "~/Data/Images/CaptchaService.aspx") End Sub
Adicionar uma página de serviço
Para adicionar a pasta de dados, use as seguintes opções;
- Clique com o botão direito do mouse em ClaytabaseAcademy e use a opção Add>New Folder, nomeie a pasta Data.
- Agora adicione outra pasta chamada Imagens à Pasta de Dados
- Em seguida, adicione um Webform chamado CaptchaService.aspx à pasta Imagens
Esta página será chamada pelo manipulador de rotas que criamos anteriormente.
Replace Code
Imports System.Data.SqlClientImports ClaytabaseAcademy.GlobalVariablesImports ClaytabaseAcademy.CaptchaImports System.DrawingImports System.Drawing.ImagingPublic Class CaptchaService Inherits System.Web.UI.Page Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load Dim captchaguid As String = RouteData.Values("GUID").ToString Dim con As New SqlConnection(ConStr) Dim com As New SqlCommand("SELECT captchaValue FROM captcha WHERE captchaGUID='" + captchaguid + "'", con) con.Open() Dim CaptchaBitmap As Bitmap = GenerateCaptcha(com.ExecuteScalar) con.Close() Response.ClearContent() Response.ContentType = "image/bmp" CaptchaBitmap.Save(Response.OutputStream, ImageFormat.Gif) End SubEnd Class
Adicionar uma página de serviço
Crie uma nova pasta chamada Páginas para a raiz do projeto clicando com o botão direito do mouse em Claytabase Academy e em Adicionar > Nova pasta
Adicione um novo formulário da web chamado CaptchaView
Crie uma nova página da Web e arraste um controle de imagem, caixa de texto, botão, campo oculto e um rótulo ou copie o código abaixo no corpo (Parte HTML) da página.<body> <form id="form1" runat="server" style="margin:100px auto;width:300px;padding:10px;background-color:#fff;box-shadow:0 0 3px 0 #222;border-radius: 8px;"> <div style="text-align:center;"> <asp:Image ID="CaptchaImage" runat="server" /> </div> <div style="text-align:center;"> <asp:TextBox ID="captchaEntered" runat="server"></asp:TextBox> </div> <div style="text-align:center;"> <asp:Button ID="captchaSubmit" runat="server" Text="Submit" style="margin:5px auto"/> <asp:HiddenField ID="captchaGuid" runat="server" /> </div> <div style="text-align:center;"> <asp:Label ID="captchaResult" runat="server" Text=""></asp:Label> </div> </form></body>
O último passo é testar se o código funciona. Para isso, precisamos entrar no code behind (clique com o botão direito do mouse>view code) e atualizar o code behind para o que temos abaixo.
Isso cria um sub que é executado no carregamento da página e outro que lida com o clique do botão que adicionamos.
Imports System.Data.SqlClientImports ClaytabaseAcademy.GlobalVariablesPublic Class CaptchaView Inherits System.Web.UI.Page Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load If Not IsPostBack Then Using con As New SqlConnection(ConStr) Using com As New SqlCommand("EXEC dbo.NewCaptchaValue", con) con.Open() Dim Captcha As String = com.ExecuteScalar captchaGuid.Value = Captcha CaptchaImage.ImageUrl = "/Captcha/" + Captcha End Using End Using End If End Sub Protected Sub GetCaptcha(sender As Object, e As EventArgs) Handles captchaSubmit.Click If IsPostBack Then Using con As New SqlConnection(ConStr) Dim valStr As String = Replace(captchaEntered.Text, "'", "''") Dim valGUID As String = Replace(captchaGuid.Value, "'", "''") Response.Write("valStr: " + valStr + "<br>") Response.Write("valGUID: " + valGUID + "<br>") Using com As New SqlCommand("EXEC CaptchaValue '" & valGUID & "','" & valStr & "'", con) con.Open() Dim res As String = com.ExecuteScalar() captchaResult.Text = res End Using Response.Write("EXEC CaptchaValue '" & valGUID & "','" & valStr & "'") End Using End If End SubEnd Class
Test that it has worked by select Build > Build Solution from the Top Menu
You should now be able to test this in a number of ways;- Click on Debug when on the relevant page
- Right Mouse button on the item within the project explorer and selecting View in Browser
- Right Mouse button on the page and select View in Browser
Design do site por Claytabase
Esta é uma seção de código que foi modificada do código do Ousia Content Management System, um dos sistemas mais rápidos e otimizados do mercado, parte de nossos serviços de design de sites.
Estes estão disponíveis com sites a partir de cerca de £ 500.