This article is a Private article. Only a writer and users who know the URL can access it.
Please change open range to public in publish setting if you want to share this article with other users.

More than 3 years have passed since last update.

⑤Django　ログイン機能の実装

Last updated at 2020-04-05Posted at 2020-03-30

#はじめに
本記事は、Djnagoで、ログイン機能を実装した際の備忘録として書いたものである。

#前提条件

OS環境は、Virtualboxで稼働中のCentOS8.1です。以下、OS詳細情報となります。

# cat /etc/centos-release
CentOS Linux release 8.1.1911 (Core)

Virtualboxのネットワーク設定は、「NAT」「ホストオンリーアダプター」で構成。
Django環境が構築済みであること。
※Django環境の構築は、以下を参照してください。
①Django　環境構築
 ②Django　環境設定&管理者サイト表示
 ③Django　アプリケーション設定
 ④Django　デザイン設定

#(1)ログイン認証環境を設定

▼アプリケーション「accounts」を生成

#  python manage.py startapp accounts

▼ディレクトリ階層を確認

#  tree  --charset=C -L 2
↓以下出力結果
.
|-- accounts
|   |-- __init__.py
|   |-- admin.py
|   |-- apps.py
|   |-- migrations
|   |-- models.py
|   |-- tests.py
|   `-- views.py
|-- app
|   |-- __init__.py
|   |-- __pycache__
|   |-- admin.py
|   |-- apps.py
|   |-- migrations
|   |-- models.py
|   |-- tests.py
|   |-- urls.py
|   `-- views.py
|-- manage.py
|-- qiita
|   |-- __init__.py
|   |-- __pycache__
|   |-- settings.py
|   |-- urls.py
|   `-- wsgi.py
|-- static
|   |-- LICENSE
|   |-- README.md
|   |-- build
|   |-- composer.json
|   |-- dist
|   |-- docs
|   |-- package-lock.json
|   |-- package.json
|   |-- pages
|   `-- plugins
`-- templates
    |-- app
    `-- base.html

15 directories, 24 files

▼Djangoプロジェクト全体の設定値を修正

qiita/settings.py


#変更点①(「accounts」アプリケーションを追加)
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'bootstrap4',
]
↓
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'bootstrap4',
    'accounts.apps.AccountsConfig',#NEW
]
#変更点②(ログイン後のリダイレクト先を指定) ※１
LOGIN_REDIRECT_URL = '/'

※１：ログイン後、「/」にリダイレクトするように設定(デフォルトだとログイン後は「accounts/profile/」にリダイレクトされる)

▼Django全体のルーティングを修正

qiita/urls.py


urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('app.urls')),
    path('accounts/', include('django.contrib.auth.urls')),#NEW
]

#(2)デザイン環境を設定

▼ログイン・ログアウト用のHTML格納ディレクトリを作成

# mkdir templates/registration

▼ログイン用のHTMLファイルを生成

templates/registration/login.html


{% load static %}
<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1,shrink-to-fit=no'>
    <link rel="stylesheet" href="{% static 'plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css' %}">
    <style>body {padding-top: 80px;}</style>
    <title>Lunchmap</title>
  </head>
  <body>
    <div class='container'>
      <h1>Login</h1>
      <section class='common-form'>
        {% if form.errors %}
          <p class='error-msg'>ユーザ名もしくはパスワードが間違っています。もう一度やり直してください。</p>
        {% endif %}

        {% if next %}
          {% if user.is_authenticated %}
            <p class='error-msg'>あなたのアカウントでは、このページにアクセスできません。アクセス権のあるユーザでログインしてください。</p>
          {% else %}
            <p class='error-msg'>このページを表示するには、ログインしてください。</p>
          {% endif %}
        {% endif %}

        <form action='{% url "login" %}' method='post'>
          {% csrf_token %}
          <input type='hidden' name='next' value='{{ next }}'/>
          {{ form.as_p }}
          <button type='submit'>Login</button>
        </form>
      </section>
    </div>
  </body>
</html>

▼ログアウト用のHTMLファイルを生成

templates/registration/logged_out.html


{% extends '../base.html' %}

{% block content %}
<h1>Logged Out</h1>
<p>ログアウトしました。</p>
<p>再度ログインする場合は、<a href='{% url "login" %}'>こちら</a>から</p>
{% endblock %}

#####補足
Djangoで用意されているユーザ認証機能を使用する際は、ログイン画面/ログアウト画面は、それぞれ「templates/registration」以下に作成しなくてはならない。
また、ファイル名もそれぞれ指定されているので、それに従う必要がある。
以下、参照。

ログインHTML：templates/registration/login.html
ログアウトHTML：templates/registration/logged_out.html
パスワード再設定HTML：templates/registration/password_reset_form.html

詳細については、これを参照。

▼base.htmlに、ログイン機能を追加

templates/base.html


    <ul class="navbar-nav ml-auto">
      <!-- Messages Dropdown Menu -->
      <li class="nav-item dropdown">
        <ul class="navbar-nav">
          <li>
            <a class="nav-link">ユーザ名：</a>
          </li>
          <li>
            <a class="nav-link" href="">
              <i class="fa fa-fw fa-sign-out"></i>ログアウト</a>
            </a>
          </li>
        </ul>
      </li>
    </ul>
↓
    <ul class="navbar-nav ml-auto">
      <!-- Messages Dropdown Menu -->
      <li class="nav-item dropdown">
        <ul class="navbar-nav">
          <li class="nav-item">
            <span class="navbar-text">ユーザ名：{{ user }}</span>
          </li>
          <li class="nav-item">
            <a href="{% url 'logout' %}" class="logout nav-link">ログアウト</a>
          </li>
        </ul>
      </li>
    </ul>

▼views.pyを修正

app/views.py

from django.shortcuts import render
from django.http import HttpResponse
from django.contrib.auth.decorators import login_required #※１


@login_required #※１
def index(request):
    return render(request, 'app/index.html')

※１：ログインユーザのみにページを表示する場合は、「@login_required」をインポートし、
対象の関数の前に定義するだけでアクセス制限をすることができる。
(ログインしていない状態で、対象のページにアクセスした場合は、強制的にログイン画面に遷移させる)

#(3)動作確認

###(3.1)ログインユーザを作成

今回は、ユーザ作成フォームは作成せずに、Djangoの管理画面からユーザ作成をおこなう想定で実施します。

▼Django管理画面へアクセス

#  python manage.py runserver 192.168.56.201:8000

▼http://192.168.56.201:8000/adminにアクセスし、ユーザ作成をおこなう。
※キャプチャを参照

###(3.2)動作確認

#  python manage.py runserver 192.168.56.201:8000

以下のURLにアクセスする。
http://192.168.56.201:8000/
★以下の想定通りであればOK！！

「/」(トップページ)にアクセスした際は、ログイン画面にリダイレクトされる。
ログイン後、「/」(トップページ)にリダイレクトする。
ヘッダー部分にログインユーザ名が表示される。

これでおけまるです(・ω・)ノ

#最後に

私自身、HTMLの知見がないので、基本コピペで書きました。
なので、ところどころ正しくない内容が含まれている可能性があります。
今後、HTMLを勉強する予定なので、時間をみつけてはいろいろ修正していくので悪しからず(=_=)

#参考URL一覧
Djangoメモ(25) : login_requiredデコレータでビューをログイン済みユーザーのみに制限

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

⑤Django ログイン機能の実装

⑤Django　ログイン機能の実装