關於登陸隨機驗證碼的實現

1、驗證碼相關知識

Python生成隨機驗證碼，須要使用PIL模塊.

安裝：

pip3 install pillow

基本使用

1. 建立圖片

from PIL import Image
img = Image.new(mode='RGB', size=(120, 30), color=(255, 255, 255))
  
# 在圖片查看器中打開
# img.show()
  
# 保存在本地
with open('code.png','wb') as f:
    img.save(f,format='png')

2. 建立畫筆，用於在圖片上畫任意內容

img = Image.new(mode='RGB', size=(120, 30), color=(255, 255, 255))
draw = ImageDraw.Draw(img, mode='RGB')

3. 畫點

1 img = Image.new(mode='RGB', size=(120, 30), color=(255, 255, 255))
2 draw = ImageDraw.Draw(img, mode='RGB')
3 # 第一個參數：表示座標
4 # 第二個參數：表示顏色
5 draw.point([100, 100], fill="red")
6 draw.point([300, 300], fill=(255, 255, 255))

4. 畫線

1 img = Image.new(mode='RGB', size=(120, 30), color=(255, 255, 255))
2 draw = ImageDraw.Draw(img, mode='RGB')
3 # 第一個參數：表示起始座標和結束座標
4 # 第二個參數：表示顏色
5 draw.line((100,100,100,300), fill='red')
6 draw.line((100,100,300,100), fill=(255, 255, 255))

5. 畫圓

img = Image.new(mode='RGB', size=(120, 30), color=(255, 255, 255))
draw = ImageDraw.Draw(img, mode='RGB')
# 第一個參數：表示起始座標和結束座標（圓要畫在其中間）
# 第二個參數：表示開始角度
# 第三個參數：表示結束角度
# 第四個參數：表示顏色
draw.arc((100,100,300,300),0,90,fill="red")

6. 寫文本

1 img = Image.new(mode='RGB', size=(120, 30), color=(255, 255, 255))
2 draw = ImageDraw.Draw(img, mode='RGB')
3 # 第一個參數：表示起始座標
4 # 第二個參數：表示寫入內容
5 # 第三個參數：表示顏色
6 draw.text([0,0],'python',"red")

7. 特殊字體文字

 1 img = Image.new(mode='RGB', size=(120, 30), color=(255, 255, 255))
 2 draw = ImageDraw.Draw(img, mode='RGB')
 3 # 第一個參數：表示字體文件路徑
 4 # 第二個參數：表示字體大小
 5 font = ImageFont.truetype("kumo.ttf", 28)
 6 # 第一個參數：表示起始座標
 7 # 第二個參數：表示寫入內容
 8 # 第三個參數：表示顏色
 9 # 第四個參數：表示顏色
10 draw.text([0, 0], 'python', "red", font=font)

圖片驗證碼

 1 import random
 2   
 3 def check_code(width=120, height=30, char_length=5, font_file='kumo.ttf', font_size=28):
 4     code = []
 5     img = Image.new(mode='RGB', size=(width, height), color=(255, 255, 255))
 6     draw = ImageDraw.Draw(img, mode='RGB')
 7   
 8     def rndChar():
 9         """
10         生成隨機字母  
11         :return:
12         """
13         return chr(random.randint(65, 90))
14   
15     def rndColor():
16         """
17         生成隨機顏色
18         :return:
19         """
20         return (random.randint(0, 255), random.randint(10, 255), random.randint(64, 255))
21   
22     # 寫文字
23     font = ImageFont.truetype(font_file, font_size)
24     for i in range(char_length):
25         char = rndChar()
26         code.append(char)
27         h = random.randint(0, 4)
28         draw.text([i * width / char_length, h], char, font=font, fill=rndColor())
29   
30     # 寫干擾點
31     for i in range(40):
32         draw.point([random.randint(0, width), random.randint(0, height)], fill=rndColor())
33   
34     # 寫干擾圓圈
35     for i in range(40):
36         draw.point([random.randint(0, width), random.randint(0, height)], fill=rndColor())
37         x = random.randint(0, width)
38         y = random.randint(0, height)
39         draw.arc((x, y, x + 4, y + 4), 0, 90, fill=rndColor())
40   
41     # 畫干擾線
42     for i in range(5):
43         x1 = random.randint(0, width)
44         y1 = random.randint(0, height)
45         x2 = random.randint(0, width)
46         y2 = random.randint(0, height)
47   
48         draw.line((x1, y1, x2, y2), fill=rndColor())
49   
50     img = img.filter(ImageFilter.EDGE_ENHANCE_MORE)
51     return img,''.join(code)
52   
53   
54 if __name__ == '__main__':
55     # 1. 直接打開
56     # img,code = check_code()
57     # img.show()
58   
59     # 2. 寫入文件
60     # img,code = check_code()
61     # with open('code.png','wb') as f:
62     #     img.save(f,format='png')
63   
64     # 3. 寫入內存(Python3)
65     # from io import BytesIO
66     # stream = BytesIO()
67     # img.save(stream, 'png')
68     # stream.getvalue()
69   
70     # 4. 寫入內存（Python2）
71     # import StringIO
72     # stream = StringIO.StringIO()
73     # img.save(stream, 'png')
74     # stream.getvalue()
75   
76     pass

2、圖片驗證碼應用

四種實現方式，愈來愈趨於完美

方式一：

 # 方式一：這樣的方式吧路徑寫死了，只能是那一張圖片
    import os
    path = os.path.join(settings.BASE_DIR,"static","image","3.jpg")  #路徑拼接
    with open(path,"rb") as f:
        data = f.read()
    return HttpResponse(data)

方式二：

# 方式二：每次都顯示不一樣的圖片，利用pillow模塊，安裝一個pillow模塊
    from PIL import Image
    img = Image.new(mode="RGB",size=(120,40),color="green") #首先本身建立一個圖片,參數size=(120,40) 表明長和高
    f = open("validcode.png","wb")#而後把圖片放在一個指定的位置
    img.save(f,"png")  #保存圖片
    f.close()
    with open("validcode.png","rb") as f:
        data = f.read()
    return HttpResponse(data)

方式三：

 # 方式三：
    # 方式二也不怎麼好，由於每次都要建立一個保存圖片的文件，咱們能夠不讓吧圖片保存到硬盤上，
    # 在內存中保存，完了自動清除，那麼就引入了方式三：利用BytesIO模塊
    from io import BytesIO
    from PIL import Image
    img = Image.new(mode="RGB",size=(120,40),color="blue")
    f = BytesIO()  #內存文件句柄
    img.save(f,"png")  #保存文件
    data = f.getvalue()#打開文件(至關於python中的f.read())
    return HttpResponse(data)

方式四：

 # 方式四：一、添加畫筆，也就是在圖片上寫上一些文字
    #         二、而且字體隨機，背景顏色隨機
    from io import BytesIO
    from PIL import Image,ImageDraw,ImageFont
    import random
    #隨機建立圖片
    img = Image.new(mode="RGB",size=(120,40),color=(random.randint(0,255),random.randint(0,255),random.randint(0,255)))
    draw = ImageDraw.Draw(img,"RGB")
    # 畫干擾線
    for i in range(5):
        x1 = random.randint(0, 120)
        y1 = random.randint(0, 40)
        x2 = random.randint(0, 120)
        y2 = random.randint(0, 40)

        draw.line((x1, y1, x2, y2), fill=(random.randint(0,255),random.randint(0,255),random.randint(0,255)))

    font = ImageFont.truetype("static/font/kumo.ttf",20)  #20表示20像素

    str_list = []  #吧每次生成的驗證碼保存起來
    # 隨機生成五個字符
    for i in range(5):
        random_num = str(random.randint(0, 9))  # 隨機數字
        random_lower = chr(random.randint(65, 90))  # 隨機小寫字母
        random_upper = chr(random.randint(97, 122))  # 隨機大寫字母
        random_char = random.choice([random_num, random_lower, random_upper])
        print(random_char,"random_char")
        str_list.append(random_char)
        # (5 + i * 24, 10)表示座標，字體的位置
        draw.text((5+i*24,10),random_char,(random.randint(0,255),random.randint(0,255),random.randint(0,255)),font=font)
    print(str_list,"str_list")
    f = BytesIO()#內存文件句柄
    img.save(f,"png")   #img是一個對象
    data = f.getvalue()  #讀取數據並返回至HTML
    valid_str = "".join(str_list)
    print(valid_str,"valid_str")
    request.session["keep_valid_code"] = valid_str   #吧保存到列表的東西存放至session中
    return HttpResponse(data)

3、滑動驗證碼應用

 咱們能夠藉助插件來作

一、打開插件，找到本身須要的驗證碼

二、篩選有用的路徑

三、把對應的視圖函數也拿過來,注意還須要一個geetest.py的文件

具體實現

1 #滑動驗證碼
2     url(r'^pc-geetest/register', pcgetcaptcha, name='pcgetcaptcha'),
3     url(r'^pc-geetest/ajax_validate', pcajax_validate, name='pcajax_validate'),

urls

 1 # ================
 2 from app01.geetest import GeetestLib
 3 pc_geetest_id = "b46d1900d0a894591916ea94ea91bd2c"
 4 pc_geetest_key = "36fc3fe98530eea08dfc6ce76e3d24c4"
 5 mobile_geetest_id = "7c25da6fe21944cfe507d2f9876775a9"
 6 mobile_geetest_key = "f5883f4ee3bd4fa8caec67941de1b903"
 7 # 滑動驗證碼
 8 def pcgetcaptcha(request):
 9     user_id = 'test'
10     gt = GeetestLib(pc_geetest_id, pc_geetest_key)
11     status = gt.pre_process(user_id)
12     request.session[gt.GT_STATUS_SESSION_KEY] = status
13     request.session["user_id"] = user_id
14     response_str = gt.get_response_str()
15     return HttpResponse(response_str)
16 # 滑動驗證碼
17 def pcajax_validate(request):
18 
19     if request.method == "POST":
20         # 驗證的驗證碼
21         ret = {"flag": False, "error_msg": None}
22         gt = GeetestLib(pc_geetest_id, pc_geetest_key)
23         challenge = request.POST.get(gt.FN_CHALLENGE, '')
24         validate = request.POST.get(gt.FN_VALIDATE, '')
25         seccode = request.POST.get(gt.FN_SECCODE, '')
26         status = request.session[gt.GT_STATUS_SESSION_KEY]
27         user_id = request.session["user_id"]
28         print("status",status)
29         if status:
30             result = gt.success_validate(challenge, validate, seccode, user_id)
31         else:
32             result = gt.failback_validate(challenge, validate, seccode)
33         if result:  #若是驗證驗證碼正確，就驗證用戶名是否正確
34             username = request.POST.get("username")
35             password = request.POST.get("password")
36 
37            # 驗證用戶名和密碼
38             user = auth.authenticate(username=username, password=password)
39             if user:
40                 # 若是驗證成功就讓登陸
41                 ret["flag"] = True
42                 auth.login(request, user)
43             else:
44                 ret["error_msg"] = "用戶名和密碼錯誤"
45         else:
46             ret["error_msg"] = "驗證碼錯誤"
47         return HttpResponse(json.dumps(ret))
48     else:
49         return render(request, "login.html")

views

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6     <meta name="viewport" content="width=device-width">
  7     <title>Title</title>
  8     <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">
  9     <link rel="stylesheet" href="/static/css/login.css">
 10     <script src="/static/jquery-3.2.1.min.js"></script>
 11    滑動驗證碼的時候導入
 12     <script src="http://static.geetest.com/static/tools/gt.js"></script>
 13     <script src="/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
 14     <script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
 15 
 16 </head>
 17 <body>
 18 <div class="container">
 19     <div class="row">
 20         <div class="col-md-1=10">
 21             <form class="form-horizontal" id="form_data" action="/login/" method="post">
 22                 {% csrf_token %}
 23                 <div class="form-group">
 24                     <label for="username" class="col-sm-2 control-label">用戶名</label>
 25                     <div class="col-sm-5">
 26                         <input type="text" class="form-control" id="username" placeholder="username" name="username">
 27                     </div>
 28                 </div>
 29                 <div class="form-group">
 30                     <label for="password" class="col-sm-2 control-label">密碼</label>
 31                     <div class="col-sm-5">
 32                         <input type="password" class="form-control" id="password" placeholder="password" name="password">
 33                     </div>
 34                 </div>
 35                 <div class="form-group">
 36                     <div class="row">
 37                         <div class="col-md-6 col-md-offset-1">
 38 {#                            文字部分#}
 39                             <label for="vialdCode" class="col-sm-2 control-label">驗證碼</label>
 40                              <div class="col-sm-5">
 41                                 <input type="text" class="form-control vialdCode_text" id="vialdCode" placeholder="驗證碼" name="vialdCode">
 42                             </div>
 43 {#                            圖片部分#}
 44                              <div class="col-md-5">
 45                             <img class="vialdCode_img" src="/get_vaildCode_img/" alt="" width="200px" height="100px">
 46 {#                                 <a href=""></a>     #}
 47                         </div>
 48                         </div>
 49 
 50                     </div>
 51                 </div>
 52                 <div class="form-group">
 53                     <div class="col-sm-offset-2 col-sm-10">
 54                         <div class="checkbox">
 55                             <label>
 56                                 <input type="checkbox"> 下次自動登陸
 57                             </label>
 58                         </div>
 59                     </div>
 60                 </div>
 61                 <div class="form-group">
 62                     <div class="col-sm-offset-2 col-sm-10">
 63                         <p>
 64                             <button type="button" class="btn btn-success login" id="submit">登陸</button>
 65                             <span class="error has-error"></span></p>
 66                         <p>
 67                             <button type="button" class="btn btn-primary register">註冊</button>
 68                         </p>
 69                     </div>
 70                     <div id="popup-captcha"></div>
 71                 </div>
 72             </form>
 73         </div>
 74     </div>
 75 </div>
 76 {#滑動驗證碼#}
 77 <script>
 78     var handlerPopup = function (captchaObj) {
 79         $("#submit").click(function () {
 80             captchaObj.show();
 81         });
 82         //定時函數
 83          $(".login").click(function () {
 84              function foo() {
 85                  $(".error").html("")
 86              }
 87 
 88              // 成功的回調
 89              captchaObj.onSuccess(function () {
 90                  var validate = captchaObj.getValidate();
 91                  $.ajax({
 92                      url: "/pc-geetest/ajax_validate", // 進行二次驗證
 93                      type: "post",
 94                      dataType: "json",
 95                      headers: {"X-CSRFToken": $.cookie('csrftoken')},
 96                      data: {
 97                          username: $('#username').val(),
 98                          password: $('#password').val(),
 99                          geetest_challenge: validate.geetest_challenge,
100                          geetest_validate: validate.geetest_validate,
101                          geetest_seccode: validate.geetest_seccode
102                      },
103                      success: function (data) {
104                          console.log(data);
105                          if (data["flag"]) {
106 {#                             alert(location.search);#}
107 {#                             alert(location.search.slice(6));#}
108 {#                             方式一#}
109 {#                             if (location.search.slice(6)) {#}
110                                  {#                            若是用戶沒有登陸點讚的時候，當用戶後來又登陸了，就直接讓跳轉到當前點讚的那個路徑#}
111 {#                                 location.href = location.search.slice(6)#}
112 {#                             }#}
113 {#                             else {#}
114 {#                                 window.location.href = '/index/'#}
115 {#                             }#}
116 {#                             方式二：#}
117                              alert($.cookie("next_path"));
118                              if ($.cookie("next_path")){
119                                  location.href = $.cookie("next_path")
120                              }
121                              else{
122                                  location.href = "/index/"
123                              }
124                          }
125                          else {
126                              $(".error").html(data["error_msg"]);
127                              setTimeout(foo, 3000)
128                          }
129                      }
130                  });
131              });
132 
133          });
134              // 將驗證碼加到id爲captcha的元素裏
135              captchaObj.appendTo("#popup-captcha");
136              // 更多接口參考：http://www.geetest.com/install/sections/idx-client-sdk.html
137          };
138     // 驗證開始須要向網站主後臺獲取id，challenge，success（是否啓用failback）
139     $.ajax({
140         url: "/pc-geetest/register?t=" + (new Date()).getTime(), // 加隨機數防止緩存
141         type: "get",
142         dataType: "json",
143         success: function (data) {
144             // 使用initGeetest接口
145             // 參數1：配置參數
146             // 參數2：回調，回調的第一個參數驗證碼對象，以後能夠使用它作appendTo之類的事件
147             initGeetest({
148                 gt: data.gt,
149                 challenge: data.challenge,
150                 product: "popup", // 產品形式，包括：float，embed，popup。注意只對PC版驗證碼有效
151                 offline: !data.success // 表示用戶後臺檢測極驗服務器是否宕機，通常不須要關注
152                 // 更多配置參數請參見：http://www.geetest.com/install/sections/idx-client-sdk.html#config
153             }, handlerPopup);
154         }
155     });
156 </script>

login.html