Partage de technologie

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Idées pour générer des codes de vérification avant que mvc n'apparaisse

Sur une page HTML, générez un code de vérification et intégrez cette page dans la page qui nécessite le code de vérification.

JS génère un code de vérification

<script type="text/javascript">
     jQuery(function ($) {

         /**生成一个随机数**/
         function randomNum(min, max) {
             return Math.floor(Math.random() * (max - min) + min);
         }
         /**生成一个随机色**/
         function randomColor(min, max) {
             var r = randomNum(min, max);
             var g = randomNum(min, max);
             var b = randomNum(min, max);
             return "rgb(" + r + "," + g + "," + b + ")";
         }
         var code = drawPic();
         document.getElementById("changeImg").onclick = function (e) {
             e.preventDefault();
             code = drawPic();
         }
         /**绘制验证码图片**/
         function drawPic() {
             var canvas = document.getElementById("canvas");
             var width = canvas.width;
             var height = canvas.height;
             //获取该canvas的2D绘图环境 
             var ctx = canvas.getContext('2d');
             ctx.textBaseline = 'bottom';
             /**绘制背景色**/
             ctx.fillStyle = randomColor(180, 240);
             //颜色若太深可能导致看不清
             ctx.fillRect(0, 0, width, height);
             /**绘制文字**/
             var str = 'ABCEFGHJKLMNPQRSTWXY123456789';

             var code = "";
             //生成四个验证码
             for (var i = 1; i <= 4; i++) {
                 var txt = str[randomNum(0, str.length)];
                 code = code + txt;
                 ctx.fillStyle = randomColor(50, 160);
                 //随机生成字体颜色
                 ctx.font = randomNum(15, 40) + 'px SimHei';
                 //随机生成字体大小
                 var x = 10 + i * 25;
                 var y = randomNum(25, 35);
                 var deg = randomNum(-45, 45);
                 //修改坐标原点和旋转角度
                 ctx.translate(x, y);
                 ctx.rotate(deg * Math.PI / 180);
                 ctx.fillText(txt, 0, 0);
                 //恢复坐标原点和旋转角度
                 ctx.rotate(-deg * Math.PI / 180);
                 ctx.translate(-x, -y);
             }

             /**绘制干扰线**/
             for (var i = 0; i < 3; i++) {
                 ctx.strokeStyle = randomColor(40, 180);
                 ctx.beginPath();
                 ctx.moveTo(randomNum(0, width / 2), randomNum(0, height / 2));
                 ctx.lineTo(randomNum(0, width / 2), randomNum(0, height));
                 ctx.stroke();
             }
             /**绘制干扰点**/
             for (var i = 0; i < 50; i++) {
                 ctx.fillStyle = randomColor(255);
                 ctx.beginPath();
                 ctx.arc(randomNum(0, width), randomNum(0, height), 1, 0, 2 * Math.PI);
                 ctx.fill();
             }
             $("#code").val(code);
             return code;
         }
     });
    
 </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

Code de vérification dans MVC

》》》Définir une classe qui génère des codes de vérification

public class VerifyCodeHelper
    {
        public static Bitmap CreateVerifyCode(out string code)
        {
            //建立Bitmap对象，绘图
            Bitmap bitmap = new Bitmap(200, 60);
            Graphics graph = Graphics.FromImage(bitmap);
            graph.FillRectangle(new SolidBrush(Color.White), 0, 0, 200, 60);
            Font font = new Font(FontFamily.GenericSerif, 48, FontStyle.Bold, GraphicsUnit.Pixel);
            Random r = new Random();
            string letters = "ABCDEFGHIJKLMNPQRSTUVWXYZ0123456789";

            StringBuilder sb = new StringBuilder();

            //添加随机的五个字母
            for (int x = 0; x < 5; x++)
            {
                string letter = letters.Substring(r.Next(0, letters.Length - 1), 1);
                sb.Append(letter);
                graph.DrawString(letter, font, new SolidBrush(Color.Black), x * 38, r.Next(0, 15));
            }
            code = sb.ToString();

            //混淆背景
            Pen linePen = new Pen(new SolidBrush(Color.Black), 2);
            for (int x = 0; x < 6; x++)
                graph.DrawLine(linePen, new Point(r.Next(0, 199), r.Next(0, 59)), new Point(r.Next(0, 199), r.Next(0, 59)));
            return bitmap;
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

""""Action

        /// <summary>
        /// 验证码 FileContentResult
        /// </summary>
        /// <returns></returns>
        [AllowAnonymous]
        public ActionResult VerifyCode()
        {
            string code = "";
            Bitmap bitmap = VerifyCodeHelper.CreateVerifyCode(out code);   
            //声明一个内存流      
            MemoryStream stream = new MemoryStream();
            //把bitmap存入这个  流中
            bitmap.Save(stream, ImageFormat.Gif);
            // Controller中File方法  返回  FileContentResult， 
            // FileContentResult继承FileResult，FileResult又继承    ActionResult
            return File(stream.ToArray(), "image/gif");//返回FileContentResult图片
        }
        /// <summary>
        /// 验证码  直接写入Response
        /// </summary>
        [AllowAnonymous]
        public void Verify()
        {
            string code = "";
            Bitmap bitmap = VerifyCodeHelper.CreateVerifyCode(out code);
         
            bitmap.Save(base.Response.OutputStream, ImageFormat.Gif);
            base.Response.ContentType = "image/gif";
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

dans la page HTML