.NET . में कैप्चा छवियों का निर्माण

पूर्वाभ्यास: अवांछित मेहमानों को बाहर रखने के अनुरोधों को संसाधित करने के लिए SQL डेटाबेस का उपयोग करके ASP.NET में कैप्चा छवियों का निर्माण

If you want to run through this walkthrough, please follow the guide on setting up our test environment.

Experience Level - Intermediate

Captcha Image

यह सुनिश्चित करने के लिए कैप्चा की आवश्यकता है कि आपकी वेबसाइट पर अवांछित मेहमानों या बॉट्स की भीड़ नहीं पहुंच रही है?

अपने आप को एक सरल बनाने का तरीका यह है, यह सबसे विस्तृत नहीं हो सकता है, लेकिन यह आपको कम से कम सुरक्षा की एक अतिरिक्त परत प्रदान करेगा, और एक हमेशा बदलते परिणाम सेट प्रदान करेगा

इसे VB.NET और MVC पेज रूटिंग के साथ SQL में बनाया गया है।

सबसे पहले हमें अपने सभी परिणामों को रखने के लिए SQL तालिका बनाने की आवश्यकता है। उच्च उपयोग प्रणालियों के लिए, आपको GUID पर एक अनुक्रमणिका बनाने की आवश्यकता होगी।

Create Table

CREATE TABLE [dbo].[captcha]([captchaGUID] [varchar](36) NOT NULL,[captchaValue] [varchar](10) NULL,[captchaDateAdded] [datetime] NULL,[captchaDateGuessed] [datetime] NULL)

एक सेवा पृष्ठ जोड़ें

आगे हम एक रैंडम लेटर जेनरेट करने के लिए एक फंक्शन बनाएंगे। यदि आप नीचे की ओर बारीकी से देखते हैं, तो कोड कुछ संख्याओं के लिए खाली स्ट्रिंग्स को पास कर देगा, इस तरह से उत्पन्न मान हमेशा अलग-अलग लंबाई के होंगे।

हम मान के रूप में 40 का उपयोग करने का कारण यह है कि 5 में से एक मौका उत्पन्न करना है कि स्ट्रिंग (32 की लंबाई के साथ) एक खाली मान लौटाती है।

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

एक सेवा पृष्ठ जोड़ें

अब हम रिकॉर्ड को वेब साइट पर वापस भेजने के लिए एक संग्रहीत कार्यविधि बनाएंगे, यह वह जगह भी है जहां कैप्चा का अनुमान लगाया गया है और हटा दिया जाएगा। इस कोड में उन्हें 30 मिनट के बाद डिलीट कर दिया जाएगा।

हम फ़ंक्शन को 10 बार से ऊपर कॉल करते हैं और मानों को एक साथ जोड़ते हैं, और पुराने अनुमानित मानों को हटा देते हैं।

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

एक सेवा पृष्ठ जोड़ें

अब हमें एक संग्रहीत कार्यविधि बनाने की आवश्यकता है जो हमें प्रदान किए गए मानों को वापस भेजती है, और मान सही हैं या नहीं।

मैंने पास/फेल की एक स्ट्रिंग वापस भेजने का फैसला किया।

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

विजुअल स्टूडियो में अकादमी प्रोजेक्ट पर स्विच करें

यहां अनुसरण करने के लिए कुछ कदम

यदि प्रोजेक्ट में यह पहले से नहीं है, तो स्क्रीनशॉट के अनुसार App_Code फ़ोल्डर जोड़ें
App_Code फ़ोल्डर पर दायाँ माउस बटन और Add>Class . चुनें
एक पॉप-अप दिखाई देना चाहिए, इस वर्ग को Captcha.vb पर कॉल करें

इस नए आइटम पर राइट क्लिक करें और गुण चुनें।

सार्वजनिक वर्ग घोषणा के ऊपर निम्नलिखित संदर्भ जोड़ें;

Imports System.Drawing

विजुअल स्टूडियो में अकादमी प्रोजेक्ट पर स्विच करें

हमारे द्वारा बनाया गया पहला कोड छवि बॉक्स के किनारों से खींची गई रेखाओं की दूरी उत्पन्न करने के लिए दो कार्य हैं। इसे कक्षा में जोड़ें।

    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

विजुअल स्टूडियो में अकादमी प्रोजेक्ट पर स्विच करें

अब पाठ के लिए दो कार्य हैं, पहला अक्षरों के बीच रिक्ति सेट करता है, और दूसरा ऊपर से ऊँचाई सेट करता है जो अक्षर खींचेगा।

    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

विजुअल स्टूडियो में अकादमी प्रोजेक्ट पर स्विच करें

इसके बाद, हम यादृच्छिक पेन और ब्रश रंग उत्पन्न करने के लिए दो फ़ंक्शन बनाते हैं, और प्रतिक्रिया के लिए एक छवि वापस करने के लिए एक अंतिम फ़ंक्शन बनाते हैं।

    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

आइए अब इस सेवा को प्रारंभिक परियोजना चरण में Global.asax फ़ाइल में बनाई गई रूट तालिका में जोड़ें, ऐसा करने के लिए नीचे के अनुसार नया मार्ग जोड़ें।

उप RegisterRoutes खोजें और अंदर एक नया मार्ग (Routes.MapPageRoute) जोड़ें।

    Sub RegisterRoutes(ByVal Routes As RouteCollection)        Routes.MapPageRoute("Captcha", "Captcha/{GUID}", "~/Data/Images/CaptchaService.aspx")    End Sub

एक सेवा पृष्ठ जोड़ें

अब एक फ़ंक्शन बनाते हैं जो उपयोगकर्ता को लौटाई गई छवि को आउटपुट करता है। आइए डेटा और पृष्ठों को अलग करने के लिए कुछ फ़ोल्डर बनाकर शुरू करें।

डेटा फ़ोल्डर जोड़ने के लिए, निम्न विकल्पों का उपयोग करें;

ClaytabaseAcademy पर राइट क्लिक करें और Add>New Folder विकल्प का उपयोग करें, फोल्डर को डेटा नाम दें।
अब इमेजेज नामक एक अन्य फोल्डर को डेटा फोल्डर में जोड़ें
इसके बाद, इमेज फोल्डर में CaptchaService.aspx नामक वेबफॉर्म जोड़ें

यह पेज हमारे द्वारा पहले बनाए गए रूट हैंडलर द्वारा कॉल किया जाएगा।

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

एक सेवा पृष्ठ जोड़ें

क्लेटाबेस अकादमी पर राइट क्लिक करके प्रोजेक्ट की जड़ में पेज नामक एक नया फ़ोल्डर बनाएं और> नया फ़ोल्डर जोड़ें

CaptchaView नामक एक नया वेब फॉर्म जोड़ें

एक नया वेब पेज बनाएं, और एक इमेज कंट्रोल, टेक्स्टबॉक्स, बटन, हिडनफील्ड और एक लेबल में खींचें या पेज के बॉडी (एचटीएमएल पार्ट) में नीचे दिए गए कोड को कॉपी करें।

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

अंतिम चरण यह परीक्षण करना है कि कोड काम करता है। इसके लिए हमें पीछे दिए गए कोड में जाना होगा (राइट क्लिक> कोड देखें) और पीछे के कोड को अपडेट करें जो हमारे पास नीचे है।

यह एक उप बनाता है जो पेज लोड पर चलता है, और दूसरा जो हमारे द्वारा जोड़े गए बटन के क्लिक को संभालता है।

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

क्लेटाबेस द्वारा वेबसाइट डिजाइन

यह कोड का एक भाग है जिसे Ousia सामग्री प्रबंधन प्रणाली कोड से संशोधित किया गया है, जो बाजार पर सबसे तेज और सबसे अनुकूलित प्रणालियों में से एक है, जो हमारी वेबसाइट डिजाइन सेवाओं का हिस्सा है।

ये लगभग £500 से शुरू होने वाली साइटों के साथ उपलब्ध हैं।

अधिक: उत्तरदायी और तेज। सामग्री प्रबंधन प्रणाली के साथ वेब विकास, डिजाइन और होस्टिंग