ساخت تصاویر امنیتی یا Verification image در Asp.net

[Security]

در خیلی از سایت ها و قتی دارید عضو اون سایت میشید یا میخواهید سرویس خاصی ( مثل ایمیل) از اون سایت دریافت کنید شاهد تصویری هستید که شامل ترکیباتی از کلمه و حروف و یا اعداد تصادفی است و شما باید اون رو داخل یک تکس باکس وارد کنید تا اجازه ورود یا ثبت نام را دریافت نمایید .

این کار در حقیقت برای جلوگیری از هک شدن سایت بوسیله اکسپلویت بکار میره و اگر میبینید نوشته ها یکم کج و ماوج هستند برای اینه که هکر نتونه توسط نرم افزاری اونارو تشخیص بده خوب از این بحث بگذریم و بریم سراغ اصل مطلب

خوب میخوام ساخت این نوع تصاویر که Image verification یا Verification Picture هم بهش میگن رو توضیح بدم :

این عکس ها معمولا یک رشته از حروف به صورت تصادفی می باشند که در حقیقت به عکس تبدیل شدند و یکم کج و معوج میشند که نشه دوباره به رشته حرف تبدیلشون کرد ...
نحوه کار به این صورت هست که ابتدا یک رشته از حروف تصادفی ایجاد می کنیم این کار در دات نت بوسیله کتابخانه System.Security.Cryptography صورت می گیره
خوب حالا پس از ساخته شدن رشته حروف اونو به عکس تبدیل می کنیم برای اینکار به کتابخانه های زیر نیاز داریم :

Imports System.Drawing.Text 'for font

Imports System.Drawing.Imaging 'for saving the gif

Imports System.Security.Cryptography 'for creating random String

خوب حالا یه تابع تعریف می کنیم برای ساختن رشته حروف تصادفی :

Public Function CreateSalt(ByVal size As Integer) As String

        ' Generate a cryptographic random number using the cryptographic

        ' service provider

        Dim rng As New RNGCryptoServiceProvider

        Dim buff(size) As Byte

        rng.GetBytes(buff)

        ' Return a Base64 string representation of the random number

        Return Convert.ToBase64String(buff)

    End Function

البته باسه اینکه کارتون راحت بشه میتونید از اعداد تصادفی هم استفاده کنید:

Public Function CreateSalt(ByVal size As Integer) As String

dim rnd as new rand

return rnd.next(size)

    End Function

حالا باید عکس مورد نظرمون رو تولید کنیم یه تابع برای تولید عکس ...
ابتدا رشته تولید میشه سپس بوسیله drawstring و کمی چرخش دادن به نوشته ها اون رشته رو به یک تصویر تبدیل میکنیم
شما می تونید فونت و سایز مورد علاقه تون رو بگذارید حتی رنگ نوشته ها رو هم تغیر بدید من از فوتا comic با سایز 10 استفاده کردم ...

Public Function CreateImage(ByVal path As String, ByVal height As Integer, ByVal width As Integer) As String

        'Creates a Random Gif file of provided width and height

        'the string on the gif file is rotated randomly

        'returns the random string painted

        Dim r As New Random 'to generate a random angle

        Dim salt As String = CreateSalt(4) 'generates a random string

        Dim bmp As New Bitmap(width, height, PixelFormat.Format24bppRgb) 'creates a24bit bitmap in memory

        Dim g As Graphics = Graphics.FromImage(bmp)

        g.TextRenderingHint = TextRenderingHint.AntiAlias 'this will smoothen the Font

        g.Clear(Color.Black) 'this clears the background and paints specified color

        g.DrawRectangle(Pens.White, 1, 1, width - 3, height - 3)

        g.DrawRectangle(Pens.Black, 0, 0, width, height)

        Dim mymat As New System.Drawing.Drawing2D.Matrix 'matrix used for rotation transformation()

        Dim i As Integer

        For i = 0 To Len(salt) - 1 'we will rotate each literal at a specified angle

            mymat.Reset()    ' matrix should be initialized to identity matrix

            mymat.RotateAt(r.Next(-30, 0), New PointF(width * (0.12 * i), height * 0.5))

            'rotate at any angle b/w -30 and 0

            g.Transform = mymat 'apply the transform

            g.DrawString(salt.Chars(i), New Font("Comic Sans MS", 10, FontStyle.Italic), SystemBrushes.ActiveCaptionText, width * (0.12 * i), height * 0.5) 'draw the text onour(image)

            g.ResetTransform()

        Next

        bmp.Save(path, ImageFormat.Gif) 'save the gif at specified path and name

        g.Dispose() 'clean up

        bmp.Dispose() 'ok the mess is over

        g.Dispose() 'clean up

        bmp.Dispose() 'ok the mess is over

        Return salt 'return the string painted for verification

    End Function

خوب تقریبا کار تمومه عکس رو توی اون PATH که بالا توی ورودی تابع وارد کریم ذخیره کردیم
میمونه نمایش و مقایسه...

برای نمایش عکس ابتدا یک کنترل از نوع iMAGE به اندازه 100 در 200 پیکسل و من آی دی اونو Imag1 گذاشتم داخل صفحه بگذارید
یک textbox با آی دی پیشفرض textbox1 و باتنی با آی دی پیشفرض button1 داخل صفحه میگذاریم
خوب توی ساب روتین لود صفحه عکس و رشته تصادفی رو می سازیم ....

  Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs)Handles MyBase.Load

        If Not Page.IsPostBack Then

            Dim salt As String = CreateImage(Server.MapPath("Random.gif"), 100, 200)

            Image1.ImageUrl = Server.MapPath("Random.gif")

            Session.Add("salt", salt)

        End If

    End Sub

مقدار رشته تصادفی رو توی یک session میریزیم که دوباره باهاش کار داریم البته شما هر جا دوست داشتید بریزدش...

خوب تموم شد حالا میتونید هر بلایی سرش بیارید
مثلات وقتی باتن کلیک میشه اگه مقدار داخل textbox با مقدار session برابر بود کاربر رجستر شه اگه نه پیغام خطا بده...

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click

        If Not TextBox1.Text.Equals(Session.Item("salt")) Then

            'continue registration 
        Else

            ' Error 

        End If
    End Sub

منبع : یادبگیر . . .