啥?你说Django-admin的安全级别太低了?要不咱试试Django-opt?

作者:Abraverman 1070 浏览 2 评论 发布时间:2020-05-16 15:53:54

用Django开发网页有一大优势,Django框架自带一个完美的后台管理系统,但是界面不是特别友好,安全级别不是特别高,怎么办了?

界面:当然是用simpleui啦。界面美观符合国人早做习惯,完美兼容Django-admin,零步骤开发,冲冲冲...

安全:Django-opt

一、效果图

继承Django-opt之后Django的安全性能提升一个梯度,OPT密码需要手机端app实时获取,手机端密码每隔十秒发生一次变化,特别安全。下面介绍继承方法。

二、开发指南

1、环境准备

用pip下载下面两个包

pip install django-opt
pip install qrcode

将 django-otp 添加到 setting.py 和中间件中:

INSTALLED_APPS = [
    # simpleui插件  后台管理更漂亮
    'simplepro',
    'simpleui',
    'import_export',
    '''
    # 安全认证opt
    'django_otp',
    'django_otp.plugins.otp_totp'
    '''
]

MIDDLEWARE = [
    '''
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    # 用户认证 注意上下关系哟
    'django_otp.middleware.OTPMiddleware',
    '''
]

# opt加密配置  这是当前程序的名字  算是标识符
OTP_TOTP_ISSUER = "四元数解码器"

在urls.py中添加如下配置:

from django_otp.admin import OTPAdminSite
from django.contrib import admin

admin.site.__class__ = OTPAdminSite

配置完成,打开页面,如下.......很丑

下面两个问题要解决:

  • 界面丑
  • OPT Token 是啥?我怎么登录?似乎在注册超级管理员的时候没有这一项???

2、解决问题

先解决第二个问题:

进入到这一步,说明配置没问题,恭喜你,现在你需要注销掉url中的这段话

# admin.site.__class__ = OTPAdminSite

然后再次打开django-admin,这样恢复刀了原始状态,用自己创建的账号密码登录进去,此时目录上多了一个app打开

点击增加,然后点击放大镜选择用户,填写名字,再点击保存,返回到列表界面

此时列表中边有一个我们刚刚创建的用户,点击

QR code会弹出一个二维码,用手机APP(文末附上手机APP下载方式。)扫码,扫码之后就会获取到APP,点击APP就会显示6位数密码。

此时,再去urls.py把我们刚刚注销的代码,还原,在打开admin界面,输入密码,大功告成,收官!!!


【群众】:喂喂喂喂.....别走啊,美观问题没解决呀!!!

【作者】:哦吼,这个嘛……这个嘛……我只能提供一点点解决办法。就像上面效果图一样,也不是特别好看,但比原来的好看,方法如下。

我是修改了Django-opt中login.html的源码。下面我贴出源码,小伙伴们需要自提吧。【注意,是基于simpleui的哟!】

{% extends "admin/base_site.html" %}
{% load i18n static %}

{% block extrastyle %}
    {{ block.super }}
    <link rel="stylesheet" href="{% static '/admin/simplepro/css/login.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'admin/css/login.css' %}" />
    {{ form.media }}

    <style type="text/css">
        body.login {
            background: #f0f2f5;
            background-image: url('{% static '/admin/simplepro/images/bg.svg' %}');
            min-height: 100%;
            background-repeat: no-repeat;
            background-position: 50%;
            background-size: 100%;
            padding: 20px 0;
            position: relative;
        }
        #content {
            padding: 20px;
            background-color: white;
            margin: 0px;
            box-shadow: 0 0px 0px 0 rgba(0,0,0,.1);
        }
        input#id_otp_token,
        select#id_otp_device
        {
            clear: both;
            padding: 6px;
            width: 100%;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
                    box-sizing: border-box;
        }

    </style>
{% endblock %}

{% block bodyclass %}{{ block.super }} login{% endblock %}

{% block usertools %}{% endblock %}

{% block nav-global %}
    <div>123</div>
{% endblock %}

{% block content_title %}
    <div>
        <img src="{% static 'admin/simplepro/images/banner.png' %}" style="width: 100%">
    </div>
{% endblock %}

{% block breadcrumbs %}{% endblock %}

{% block content %}
{% if form.errors and not form.non_field_errors %}
<p class="errornote">
{% if form.errors.items|length == 1 %}{% trans "Please correct the error below." %}{% else %}{% trans "Please correct the errors below." %}{% endif %}
</p>
{% endif %}

{% if form.non_field_errors %}
{% for error in form.non_field_errors %}
<p class="errornote">
    {{ error }}
</p>
{% endfor %}
{% endif %}

<div id="content-main">

{% if user.is_authenticated %}
<p class="errornote">
{% blocktrans with username=request.user.username trimmed %}
    You are authenticated as {{ username }}, but are not authorized to
    access this page. Would you like to login to a different account?
{% endblocktrans %}
</p>
{% endif %}

<form class="simpleui-form" action="{{ app_path }}" method="post" id="login-form">{% csrf_token %}
  <div class="form-row">
    {{ form.username.errors }}
    {{ form.username.label_tag }} {{ form.username }}
  </div>
  <div class="form-row">
    {{ form.password.errors }}
    {{ form.password.label_tag }} {{ form.password }}
    <input type="hidden" name="next" value="{{ next }}" />
  </div>
  {% if form.get_user %}
  <div class="form-row">
    {{ form.otp_device.errors }}
    <label for="id_otp_device">{% trans 'OTP类型:' %}</label> {{ form.otp_device }}
  </div>
  {% endif %}
  <div class="form-row">
    {{ form.otp_token.errors }}
    <label for="id_otp_token" class="required">{% trans 'OTP密码:' %}</label> {{ form.otp_token }}
  </div>
  {% url 'admin_password_reset' as password_reset_url %}
  {% if password_reset_url %}
  <div class="password-reset-link">
    <a href="{{ password_reset_url }}">{% trans 'Forgotten your password or username?' %}</a>
  </div>
  {% endif %}
  <div class="simpleui-input-inline">
    <input style="width: 100%;background-color: orangered;margin-top: 20px" type="submit" value="{% trans 'Log in' %}" />
    {% if form.get_user %}
    <input style="width: 100%" type="submit" name="otp_challenge" value="{% trans 'Get OTP Challenge' %}" />
    {% endif %}
  </div>
</form>

<script type="text/javascript">
document.getElementById('id_username').focus()
</script>
</div>
{% endblock %}

我是文末:---------------【鬼知道你是不是文末】

软件连接:

链接:https://pan.baidu.com/s/1n-Xt3ISPWVyJB7ndfTWcYQ 提取码:q3do

PS:如果连接挂了就联系我把,或者去我的博客看看吧

https://abraverman.gitee.io/

Loading...
评论列表 2条评论
社区小助手
2020-07-29 18:03:34

老铁 6666

社区小助手
2020-05-22 19:55:20

写的不错