投稿日：2017年9月1日｜最終更新日: 2018年3月26日

自作のログインページ（Django）

Python

Vagrantで作ったCentOS7のAnaconda・Django環境に、ログインページを作成します。

ログインページ
仕様
準備
Vagrantへログイン
プロジェクトの設定
アプリケーションの設定
次回

ログインページ

Djangoの管理画面にログインするには、「/admin」にアクセスします。今回は、管理画面の「/admin」ではなく、自作でログインページを作ります。

ユーザ情報について

ログイン・ログアウト・マイページ機能を作ります。新しくmodel（ユーザテーブル)を用意してその情報を元に認証してログイン処理をするイメージですが、今回はページ遷移のみを作ります。ログインユーザのidとパスワードは管理画面(admin)にログインするときのユーザ情報を使います。

※Djangoの管理画面のアカウント情報は、auth_userテーブルに存在します。

仕様

①「/mypage」にアクセスします。ログインしていない場合、自動でログインページに遷移します。

ログインに成功すると「/mypage」へアクセスできます。

②「/login」に直接アクセスします。

ここからログインした場合は「/redilect」へ遷移します。

③「/logout」にアクセスするとログアウトします。

準備

Vagrantでゲスト環境（仮想環境）を作ります。

①Virtualboxをインストールします。Virtualboxのインストールまでで結構です。

→VirtualBoxをインストールする for Ubuntu

②Vagrantをインストールします。centos7環境を作りますので、Vagrantのインストールのみ済ませてください。

→Vagrantをインストールしてテスト環境を作る for Ubuntu

Vagrantのcentos7環境の詳細を調べる場合は以下のように確認します。

→VagrantのCentOS7の環境を確認（lsb_releaseコマンドなど）

③バージョン管理ツールのpyenvインストールします。Anacondaインストールに使います。

→VagrantのCentOS7にバージョン管理ツールをインストール（pyenv）

④Anaconda・Djangoインストールします。

→Vgrant（CentOS7）にAnaconda+Django+Apache環境を作る（Anaconda・Djangoインストール）

⑤mariadb、mod_wsgiをインストールし、apacheで動作するように設定します。

→Vgrant（CentOS7）にAnaconda+Django+Apache環境を作る（MariaDBのインストール・設定）

⑥管理画面（admin）にCSSを適用します。

→Vgrant（CentOS7）にAnaconda+Django+Apache環境を作る（管理画面のCSS）

ホスト環境

OS	Ubuntu 16.04.1 LTS　64bit
Virtualbox	5.1
Vagrant	1.9.5

ゲスト環境

OS	CentOS 7.1.1503
pyenv	1.1.3-5-g7dae197
Anaconda	3-4.3.0
MariaDB	5.5.52-1.el7
Apache	2.4.6
mod_wsgi	4.5.14

Vagrantへログイン

①【ホスト環境】端末を開き、前回構築したVagrantのディレクトリまで移動します。

cd vagrant/django_apps/

②【ホスト環境】仮想マシンを起動します。

vagrant up

③【ホスト環境】ログインします。

vagrant ssh

プロジェクトの設定

プロジェクトディレクトリを「pj」、アプリケーションディレクトリを「app1」とします。

①rootにログインします。

su -
パスワード:vagrant

②settings.pyに設定を追記します。

cd /home/django/
vi pj1/pj1/settings.py

以下のように編集します。

LOGIN_URL = '/login/'  # ログイン画面のURL
LOGIN_REDIRECT_URL = '/redilect/'  # /loginに直接アクセスした場合のリダイレクト

③urls.pyに、URLの設定をします。

vi pj1/pj1/urls.py

以下のように編集します。

from django.conf.urls import include, url
from django.contrib import admin

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^', include('app1.urls', namespace = 'app1'))
]

アプリケーションの設定

①アプリケーションディレクトリのurls.pyを編集します。

vi pj1/app1/urls.py

以下のように編集します。

from django.conf.urls import include, url
from django.contrib.auth import views as auth_views
from . import views

app_name = 'app1'

urlpatterns = [
    url(r'^$', views.index, name='index'),
    url(r'^mypage/$', views.mypage, name='mypage'),
    url(r'^redilect/$', views.redilect, name='redilect'),
    url(
        r'^login/$',
        auth_views.login,
        {'template_name': 'login.html'},
        name='login'
    ),
    url(
        r'^logout/$',
        auth_views.logout,
        {'template_name': 'logout.html'},
        name='logout'
    ),
]

「/login」と「/logout」は、django.contrib.auth.viewsにあるログイン・ログアウト用の関数ビューを利用します。(django.contrib.auth.viewsは、今後クラスベースビューのLoginView、LogoutViewに置き換わる予定です。)

②アプリケーションディレクトリのviews.pyを編集します。

vi pj1/app1/views.py

以下のように編集します。

from django.shortcuts import render
from django.contrib.auth.decorators import login_required

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

＠login_required
def mypage(request):
    return render(request, 'mypage.html')

＠login_required
def redilect(request):
    return render(request, 'redilect.html')

以下ののデコレータをつけるだけで、ログインしていないユーザをログインページへ飛ばすことができます。

from django.contrib.auth.decorators import login_required
＠login_required

テンプレートの作成

アプリケーションディレクトリ配下のtemplatesディレクトリへhtmlテンプレートを作成します。

①base.htmlを作成します。base.htmlは、テンプレート共通で使用したいhtmlを記述します。

vi pj1/app1/templates/base.html

以下のように記述します。

{% load staticfiles %}
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>ログイン画面をつくる</title>
  </head>
  <body>
    {% block content %}
    {% endblock %}
  </body>
</html>

②index.htmlを作成します。

vi pj1/app1/templates/base.html

以下のように記述します。

{% extends "app1/base.html" %}
{% block content %}
インデックスです
{% endblock %}

③mypage.htmlを作成します。

vi pj1/app1/templates/mypage.html

以下のように記述します。

{% extends "base.html" %}
{% block content %}
ログイン後のマイページ
{% endblock %}

④redilect.htmlを作成します。

vi pj1/app1/templates/redilect.html

以下のように記述します。

{% extends "base.html" %}
{% block content %}
ログイン後のマイページ
{% endblock %}

⑤logout.htmlを作成します。

vi pj1/app1/templates/logout.html

以下のように記述します。

{% extends "base.html" %}
{% block content %}
ログイン後のマイページ
{% endblock %}

⑥logout.htmlを作成します。

vi pj1/app1/templates/login.html

以下のように記述します。

{% extends 'base.html' %}
{% block content %}
<form method='post' action='{% url 'app1:login' %}'>
{% csrf_token %}
<table>
<tr>
    <td>{{ form.username.label_tag }}</td>
    <td>{{ form.username }}</td>
</tr>
<tr>
    <td>{{ form.password.label_tag }}</td>
    <td>{{ form.password }}</td>
</tr>
</table>

<input type='submit' value='login' />
<input type='hidden' name='next' value='{{ next }}' />
</form>
{% endblock %}