こんにちは、未来電子テクノロジーでインターンをしている者です。
今回は、Djangoでログインページを作る方法を書いていきたいと思います。
開発環境
まずは開発環境を整えておきます。
- Python3.7.3
- Django2.4
構成
今回は、以下のような構成で作っていきます。
- ログイン:トップページ→ログインページ→(ログイン)→トップページ
- ログアウト:トップページ→(ログアウト)→ログアウト確認ページ→トップページ
設定
今回の説明は、以下の設定で進めていきます。
- プロジェクトディレクトリ:
projects
- アプリディレクトリ:
apps
- テンプレートファイル(全て
apps/templates/apps/
内):- トップページ:
index.html
- ログインページ:
login.html
- ログアウト確認ページ:
logout.html
- トップページ:
また、トップページは作れていることを前提に進めていきます。
コード
新しく作成するファイルや、既存のファイルに追加するコードを紹介していきます。
settings.py
# ファイルの末尾に下の2行を追加
LOGIN_URL = 'apps:login'
LOGIN_REDIRECT_URL = 'apps:index'
1行目は、login/
がログインページのURLであることを表します。
2行目は、ログインすると、index/
(トップページ)のURLにリダイレクトすることを表します。
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
<!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
<!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
<!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/