Django之路 - 实现登录随机验证码

发布时间：2020-12-17 00:07:13 所属栏目：Python 来源：网络整理

导读：登录验证码是每个网站登录时的基本标配，网上也有很多相应的文章，但是从生成验证码到应用到自己的网站上的全步骤，并没有看到很多，为了节约大家的时间，我把整体步骤写下来，即拿即用哈 ?1. 生成随机验证码 PIL font_path = number = 4 size = (100,30

登录验证码是每个网站登录时的基本标配，网上也有很多相应的文章，但是从生成验证码到应用到自己的网站上的全步骤，并没有看到很多，为了节约大家的时间，我把整体步骤写下来，即拿即用哈

?1. 生成随机验证码

PIL font_path = number = 4 size = (100,30 bgcolor = (255,255,255 fontcolor = (0,255 linecolor = (255 draw_line = line_number = (1,5 source = index range(0,10 .join(random.sample(source,number)) begin = end = draw.line([begin,end],fill = width,height = size image = Image.new(,(width,height),bgcolor) font = ImageFont.truetype(font_path,25) draw = ImageDraw.Draw(image) text = gen_text() font_width,font_height = draw.text(((width - font_width) / number,(height - font_height) / font= font,fill=fontcolor) image = image.transform((width + 20,height +10),Image.AFFINE,(1,-0.3,-0.1,1,0),Image.BILINEAR) image = image.filter(ImageFilter.EDGE_ENHANCE_MORE) image.save( %(save_path,filename)) ( == gene_code(,)

2. 如何应用到你的django项目中

整个验证码的流程如下?

用户访问登录页面，你的后台程序在给用户返回登录页面时，同时生成了验证码图片
用户输入账户信息和验证码数字，提交表单
后台判断用户输入的验证码和你生成的图片信息是否一致，如果一致，就代表验证码是没有问题的

问题就卡在第3步，你在第1步生成验证码并返回给用户后，由于一会用户还需要把这个验证码提交过来，你在后台就需要拿用户输入的和你之前生成的验证码进行对比是否相等，

所以你必须在生成验证码的同时，把验证码存下来，存到哪？必然是缓存，这样直接在存的同时加个超时时间，就可以限定验证码有效期了。?

那存入缓存时的key是设置成什么呢？为了保证验证码的安全，我采取了以下设计

3.代码实现

login视图

== datetime.date.today().strftime(= % =( random_filename = .join(random.sample(string.ascii_lowercase,4=30

</span><span style="color: #0000ff;"&gt;if</span> request.method == <span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;POST</span><span style="color: #800000;"&gt;"</span><span style="color: #000000;"&gt;:

    username </span>= request.POST.get(<span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;username</span><span style="color: #800000;"&gt;'</span><span style="color: #000000;"&gt;)
    password </span>= request.POST.get(<span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;password</span><span style="color: #800000;"&gt;'</span><span style="color: #000000;"&gt;)
    _verify_code </span>= request.POST.get(<span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;verify_code</span><span style="color: #800000;"&gt;'</span><span style="color: #000000;"&gt;)
    _verify_code_key  </span>= request.POST.get(<span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;verify_code_key</span><span style="color: #800000;"&gt;'</span><span style="color: #000000;"&gt;)

    </span><span style="color: #0000ff;"&gt;print</span>(<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;verify_code_key:</span><span style="color: #800000;"&gt;"</span><span style="color: #000000;"&gt;,_verify_code_key)
    </span><span style="color: #0000ff;"&gt;print</span>(<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;verify_code:</span><span style="color: #800000;"&gt;"</span><span style="color: #000000;"&gt;,_verify_code)
    </span><span style="color: #0000ff;"&gt;if</span> cache.get(_verify_code_key) ==<span style="color: #000000;"&gt; _verify_code:
        </span><span style="color: #0000ff;"&gt;print</span>(<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;code verification pass!</span><span style="color: #800000;"&gt;"</span><span style="color: #000000;"&gt;)

        user </span>= authenticate(username=username,password=<span style="color: #000000;"&gt;password)
        </span><span style="color: #0000ff;"&gt;if</span> user <span style="color: #0000ff;"&gt;is</span> <span style="color: #0000ff;"&gt;not</span><span style="color: #000000;"&gt; None:
            login(request,user)
            request.session.set_expiry(</span>60*60<span style="color: #000000;"&gt;)
            </span><span style="color: #0000ff;"&gt;return</span> HttpResponseRedirect(request.GET.get(<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;next</span><span style="color: #800000;"&gt;"</span>) <span style="color: #0000ff;"&gt;if</span> request.GET.get(<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;next</span><span style="color: #800000;"&gt;"</span>) <span style="color: #0000ff;"&gt;else</span> <span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;/</span><span style="color: #800000;"&gt;"</span><span style="color: #000000;"&gt;)

        </span><span style="color: #0000ff;"&gt;else</span><span style="color: #000000;"&gt;:
            err_msg[</span><span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;error</span><span style="color: #800000;"&gt;"</span>] = <span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;Wrong username or password!</span><span style="color: #800000;"&gt;'</span>

    <span style="color: #0000ff;"&gt;else</span><span style="color: #000000;"&gt;:
        err_msg[</span><span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;error</span><span style="color: #800000;"&gt;'</span>] = <span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;验证码错误!</span><span style="color: #800000;"&gt;"</span>

<span style="color: #0000ff;"&gt;return</span> render(request,<span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;login.html</span><span style="color: #800000;"&gt;'</span>,{<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;filename</span><span style="color: #800000;"&gt;"</span>:random_filename,<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;today_str</span><span style="color: #800000;"&gt;"</span>:today_str,<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;error</span><span style="color: #800000;"&gt;"</span>:err_msg})</pre>

template文件?

{% block body %}
<div id="container" class="cls-container">

    <!-- BACKGROUND IMAGE -->
    <!--===================================================-->
    <div id="bg-overlay" class="bg-img img-balloon"&gt;</div>


    <!-- HEADER -->
    <!--===================================================-->
    <div class="cls-header cls-header-lg"&gt;
        <div class="cls-brand"&gt;
            <a class="box-inline" href="index.html"&gt;
                <!-- <img alt="Nifty Admin" src="img/logo.png" class="brand-icon"&gt; -->
                <span class="brand-title"&gt;PerfectCRM <span class="text-thin"&gt;老男孩教育</span></span>
            </a>
        </div>
    </div>
    <!--===================================================-->


    <!-- LOGIN FORM -->
    <!--===================================================-->
    <div class="cls-content"&gt;
        <div class="cls-content-sm panel"&gt;
            <div class="panel-body"&gt;
                <p class="pad-btm"&gt;Sign In to your account</p>
                <form method="post"&gt;{% csrf_token %}
                    <div class="form-group"&gt;
                        <div class="input-group"&gt;
                            <div class="input-group-addon"&gt;<i class="fa fa-user"&gt;</i></div>
                            <input type="text" name="username" class="form-control" placeholder="Username"&gt;
                        </div>
                    </div>
                    <div class="form-group"&gt;
                        <div class="input-group"&gt;
                            <div class="input-group-addon"&gt;<i class="fa fa-asterisk"&gt;</i></div>
                            <input type="password" name="password" class="form-control" placeholder="Password"&gt;
                        </div>
                    </div>
                    <div class="form-group"&gt;
                        <div class="input-group"&gt;
                            <div class="input-group-addon"&gt;
                                <img height="30px" src="/static/verify_code_imgs/{{ today_str }}/{{ filename }}.png"&gt;
                            </div>
                            <input style="height: 50px" type="text" name="verify_code" class="form-control" placeholder="验证码"&gt;
                            <input  type="hidden" name="verify_code_key" value="{{ filename }}" >
                        </div>
                    </div>
                    <div class="row"&gt;
                        <div class="col-xs-8 text-left checkbox"&gt;
                            <label class="form-checkbox form-icon"&gt;
                            <input type="checkbox"&gt; Remember me
                            </label>
                        </div>
                        <div class="col-xs-4"&gt;
                            <div class="form-group text-right"&gt;
                            <button class="btn btn-success text-uppercase" type="submit"&gt;Sign In</button>
                            </div>
                        </div>
                    </div>
                    {% if error %}
                        <span style="color: red"&gt;{{ error.error }}</span>
                    {% endif %}

                </form>
            </div>
        </div>
        <div class="pad-ver"&gt;
            <a href="pages-password-reminder.html" class="btn-link mar-rgt"&gt;Forgot password ?</a>
            <a href="pages-register.html" class="btn-link mar-lft"&gt;Create a new account</a>
        </div>
    </div>
    <!--===================================================-->



</div>
<!--===================================================-->
<!-- END OF CONTAINER -->

{% endblock %}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!