Djangoのdjango.contrib.authを使ってAdminLTEのログイン画面にてユーザ認証

本稿はサーバサイドDjangoとクライアントサイドAdminLTEという環境でログイン画面から初期画面を表示するための設定方法を記載しています。
ログアウト機能も実装しています。
基本的に最低限の設定で済むよう、Djangoが提供している機能を最大限活用しているつもりです。
Djangoはインストール済み、AdminLTEはダウンロード済み（/path/to/AdminLTE）であることを前提としています。

バージョン

  • OS: CentOS 7.3
  • Python: 3.5.1
  • Django: 1.10.4
  • AdminLTE: 2.3.7

Djangoプロジェクト作成

$ django-admin startproject mysite

$ cd mysite/

Djangoプロジェクトファイルの編集

mysite/settings.py

ALLOWED_HOSTS = ['127.0.0.1',] # 変更
# ...(中略)...
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'templates'),], # 変更
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
# ...(中略)...
# 以下を追記
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
]

LOGIN_URL = '/login/'
LOGIN_REDIRECT_URL = '/'

mysite/views.py

# 以下を作成
from django.shortcuts import render
from django.http import HttpResponse
from django.conf import settings
from django.contrib.auth.decorators import login_required

@login_required
def index(request):
return render(request, 'index.html')

mysite/urls.py

from django.conf.urls import url
from django.contrib import admin
from . import views # 追記
from django.contrib.auth import views as auth_views # 追記

urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^$', views.index, name='index'), # 追記
url(r'^login/', auth_views.login, { 'template_name': 'login.html' }, name='login'), # 追記
url(r'^logout/', auth_views.logout_then_login, name='logout'), # 追記
]

adminユーザ作成

$ python manage.py createsuperuser
Username (leave blank to use 'username'): admin
Email address:
Password:
Password (again):
Superuser created successfully.

AdminLTEのファイル配置

$ mkdir templates
$ mkdir static
$ cp /path/to/AdminLTE/pages/examples/login.html templates/
$ cp /path/to/AdminLTE/pages/examples/blank.html templates/index.html
$ cp /path/to/AdminLTE/dist static/
$ cp /path/to/AdminLTE/bootstrap static/
$ cp /path/to/AdminLTE/plugins static/

HTMLファイルの編集

template/login.html

{% load static %} <!-- 追記 -->
<!DOCTYPE html>

<!-- 以下、変更箇所 -->
<!-- Bootstrap 3.3.6 -->
<link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
<!-- Theme style -->
<link rel="stylesheet" href="{% static 'dist/css/AdminLTE.min.css' %}">
<!-- iCheck -->
<link rel="stylesheet" href="{% static 'plugins/iCheck/square/blue.css' %}">

<div class="login-box-body">
{% if form.errors %} <!-- 追記 -->
<p class="login-box-msg bg-red">Your username and password didn't match. Please try again.</p> <!-- 追記 -->
{% else %} <!-- 追記 -->
<p class="login-box-msg">Sign in to start your session</p>
{% endif %} <!-- 追記 -->

<form action="{% url 'login' %}" method="post">
{% csrf_token %} <!-- 追記 -->
<input type="text" class="form-control" name="username" placeholder="Username">
<input type="password" class="form-control" name="password" placeholder="Password">

<!-- jQuery 2.2.3 -->
<script src="{% static 'plugins/jQuery/jquery-2.2.3.min.js' %}"></script>
<!-- Bootstrap 3.3.6 -->
<script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
<!-- iCheck -->
<script src="{% static 'plugins/iCheck/icheck.min.js' %}"></script>

template/index.html

{% load static %} <!-- 追記 -->
<!DOCTYPE html>

<!-- 以下、変更箇所 -->
<!-- Bootstrap 3.3.6 -->
<link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
<!-- Theme style -->
<link rel="stylesheet" href="{% static 'dist/css/AdminLTE.min.css' %}">
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="{% static 'dist/css/skins/_all-skins.min.css' %}">

<img src="{% static 'dist/img/user2-160x160.jpg' %}" class="img-circle" alt="User Image">
<img src="{% static 'dist/img/user2-160x160.jpg' %}" class="user-image" alt="User Image">
<img src="{% static 'dist/img/user2-160x160.jpg' %}" class="img-circle" alt="User Image">

<a href="{% url 'logout' %}" class="btn btn-default btn-flat">Sign out</a>

<img src="{% static 'dist/img/user2-160x160.jpg' %}" class="img-circle" alt="User Image">

<!-- jQuery 2.2.3 -->
<script src="{% static 'plugins/jQuery/jquery-2.2.3.min.js' %}"></script>
<!-- Bootstrap 3.3.6 -->
<script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
<!-- SlimScroll -->
<script src="{% static 'plugins/slimScroll/jquery.slimscroll.min.js' %}"></script>
<!-- FastClick -->
<script src="{% static 'plugins/fastclick/fastclick.js' %}"></script>
<!-- AdminLTE App -->
<script src="{% static 'dist/js/app.min.js' %}"></script>

ファイル構成

mysite/
| mysite/
| | __pycache__/
| | __init__.py
| | settings.py
| | urls.py
| | views.py
| | wsgi.py
| static/
| | bootstrap/
| | dist/
| | plugins/
| templates/
| | index.html
| | login.html
| manage.py
| db.sqlite3

実行と確認

$ python manage.py runserver 0.0.0.0:8000

ブラウザから「http://127.0.0.1:8000」にアクセスするとログイン画面が出てきます。
ユーザ名「admin」と設定したパスワードを入力すると初期画面が出てきます。
初期画面から「Sign out」をクリックするとログアウトしてログイン画面に戻ります。