ホーム >  Python >  自作のログインページ(Django)


Posted:2017/09/01 9:00:20 AM|Category : Python

自作のログインページ(Django)

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

ログインページ

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 "app1/base.html" %}
{% block content %}
ログイン後のマイページ
{% endblock %}

④redilect.htmlを作成します。

vi pj1/app1/templates/redilect.html

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

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

⑤logout.htmlを作成します。

vi pj1/app1/templates/logout.html

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

{% extends "app1/redilect.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 %}

次回

ユーザ登録機能を作成します。

ユーザ登録(Django)


トラックバック用のURL
プロフィール

名前:イワサキ ユウタ 職業:システムエンジニア、ウェブマスター 誕生:1986年生まれ 出身:静岡県 特技:ウッドベース 略歴 2008年04月 金融機関系I

最近の投稿
人気記事
カテゴリー
広告