Help us understand the problem. What is going on with this article?

Djangoでアプリのログインページを作る方法

More than 1 year has passed since last update.

こんにちは、未来電子テクノロジーでインターンをしている者です。
今回は、Djangoでログインページを作る方法を書いていきたいと思います。

開発環境

まずは開発環境を整えておきます。

  • Python3.7.3
  • Django2.4

構成

今回は、以下のような構成で作っていきます。

  • ログイン:トップページ→ログインページ→(ログイン)→トップページ
  • ログアウト:トップページ→(ログアウト)→ログアウト確認ページ→トップページ

設定

今回の説明は、以下の設定で進めていきます。

  • プロジェクトディレクトリ:projects
  • アプリディレクトリ:apps
  • テンプレートファイル(全てapps/templates/apps/内):
    • トップページ:index.html
    • ログインページ:login.html
    • ログアウト確認ページ:logout.html

また、トップページは作れていることを前提に進めていきます。

コード

新しく作成するファイルや、既存のファイルに追加するコードを紹介していきます。

settings.py

projects/settings.py
#ファイルの末尾に下の2行を追加
LOGIN_URL = 'apps:login'
LOGIN_REDIRECT_URL = 'apps:index'

1行目は、login/がログインページのURLであることを表します。
2行目は、ログインすると、index/(トップページ)のURLにリダイレクトすることを表します。

urls.py

apps/urls.py
#以下のインポート文を追加
from django.contrib.auth import views as auth_views

#urlpatternsに以下の2行を追加
urlpatterns = [
    path('login/', auth_views.LoginView.as_View(template_name='apps/login.html'), name='login'),
    path('logout/', auth_views.LogoutView.as_view(templates_name='apps/logout.html'), name='logout'),
]

django.contrib.authからviewsをインポートします。
すでにapps/views.pyをインポートしているので、それと区別するために、auth_viewsという名前を定義してインポートします。

index.html

apps/templates/apps/index.html
<!DOCTYPE html>
<html>
  <head>
    ...
  </head>
  <body>
    ...
    {% if request.user.is_authenticated %}
    <a href="{% url 'apps:logout' %}">ログアウト</a>
    {% else %}
    <a href="{% url 'apps:login' %}">ログイン</a>
    {% endif %}
    ...
  </body>
</html>

トップページの、ログイン/ログアウトボタンを付けたい場所に上の5行を追加します。
ユーザー認証済であれば(1行目)、ログアウトボタンを表示し(2行目)、認証未済であれば(3行目)、ログインボタンを表示します(4行目)。

login.html

apps/templates/apps/login.html
<!DOCTYPE html>
<html>
  <head>
    <title>ログインページ</title>
  </head>
  <body>
    <form method="post">{% csrf_token %}
      {% if form.errors %}
      <p>ログインエラー。もう一度入力してください</p>
      {% endif %}
      <h2>ログイン</h2>
      <label>ユーザー名</label>
      <input name="username">
      <br>
      <label>パスワード</label>
      <input type="password" name="password">
      <br>
      <input type="submit" value="ログイン">
    </form>
    <hr>
    <a href="{% url 'apps:index' %}">トップページに戻る</a>
  </body>
</html>

ログインページには、ユーザー名とパスワードを入力するフォームが表示されます。
正しいユーザー名とパスワードを入力すると、トップページに戻ります。
もしユーザー名とパスワードの組み合わせを間違えて入力した場合、ログインエラーと表示され、再度フォームが表示されます。

logout.html

apps/templates/apps/logout.html
<!DOCTYPE html>
<html>
  <head>
    <title>ログアウトしました</title>
  </head>
  <body>
    <p>ログアウトしました。</p>
    <a href="{% url 'apps:index' %}">トップページに戻る</a>
  </body>
</html>

ログアウトしたことを確認するページです。
トップページに戻るボタンをクリックすると、ログアウトした状態でトップページに戻ります。

まとめ

今回は、Djangoでログインページを作成する方法を紹介しました。
今回紹介した方法はあくまで一例であり、ログインページの作成の仕方はいくらでもあります。
もし「こんな作り方もあるよ」とか「こっちの方がいいよ」という作り方があれば、ぜひコメントをお願いします。
また、今回紹介した内容に間違いがありましたら、修正しますので、ご指摘お願いいたします。

参考URL

DjangoBrothers(非常に分かりやすいチュートリアルで、僕のおすすめです。):
https://djangobrothers.com/tutorials/photo_app/authentication/

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away