syakoo's Lab

技術ブログやちょっと気合の入った記事を残すブログ

数学を勉強するWebサイトの開発日記(3: ログインの処理)

はじめに

そこまで大きな事をするつもりはないです。ただの個人開発の勉強を含めたサービス作りの過程を残すブログです。

ログイン等の処理

今回はログインの処理を実装してみるのだが、一番最初にも言っているようにアカウント登録はしない方向で進めている。よって、アカウント登録に関する処理は一切いれず、ログインのみ実装する。今回はまだ投稿の機能やコメント機能が付いていないので、以下の二つを達成することを目的とする。

  • ログインの実装
  • ログイン中か、またユーザ名は何かを取得する。

もちろん、これらの処理はクライアントサイドで実装してはまずいので、サーバー側(つまりPython)で実装していく。

ログインの実装

まずはログインの実装をしていく。手順はどれから始めればいいかわからないが、これらを書いていく。

  • urls.pylogin/と呼び出された際、どの関数を呼ぶか設定する。
  • forms.pyでlogin画面のフォーム(何を記入させるか)を実装する。
  • views.pyでloginの処理の関数(入力前のフォーム出力と入力後の認証)を実装する。
  • templates/でフロントエンドの画面を作る。

本当は、models.pyでデータベースのオブジェクトを作る必要があるが、ユーザ認証はDjangoが提供しているモデルがあるのでそれを使用する。

それぞれのファイルを以下に示していく。

urls.py

from django.urls import path
from . import views


app_name = "webapp"
urlpatterns = [
    path('', views.index, name="index"),
    path('login/', views.login, name="login"),
]

forms.py

from django import forms


class LoginForm(forms.Form):
    username = forms.CharField(
        label="User Name", max_length=16, required=True, widget=forms.TextInput)
    password = forms.CharField(
        label="Password", max_length=32, required=True, widget=forms.PasswordInput)

views.py

from django.shortcuts import render
from django.contrib.auth.models import User
from django.contrib.auth import authenticate, login as django_login
from django.http import HttpResponseRedirect

from . import forms


def login(request):
    if request.method=='POST':
        login_form = forms.LoginForm(request.POST)
        username = request.POST["username"]
        password = request.POST["password"]
        user = authenticate(request, username=username, password=password)
        if user is not None:
            django_login(request, user)
            return HttpResponseRedirect('/')
        else:
            login_form.add_error(None, "The login attempt failed. Either the username or password is invalid.")
    else :
        login_form = forms.LoginForm()
    
    return render(request, 'webapp/login.html', {'login_form': login_form})

templates/webapp/login.html

<form action="{% url 'webapp:login' %}" method="post">
    {% csrf_token %}
    {{ login_form.as_p }}
    <input type="submit">
</form>

説明はすると長くなると感じたため、省略する。views.pyこちらのサイトを参考にした。説明も丁寧に書かれているので、説明はそちらを参考にしてください。

動作確認

ログインの実装も済んだので、実際にログインできるか試してみ...ようとしたが、そもそもユーザが存在していないからログインできない。そこで、djangoのスーパーユーザを作成して動作確認する。スーパーユーザの作成方法は別のサイトを参考にしてください。

スーパーユーザが作成できたら、localhost:8000/loginをurlを叩いて、作成したアカウントを入力してみる。

f:id:syakoo:20190713210542p:plain

そのまま画面遷移したので動作確認終了!!ドヤ顔でコミットをする

ログインしているかの処理

ログイン中かどうかは簡単に処理することができる。templates/index.htmlに以下の分岐を付けた。

{% if user.is_authenticated %}
    <p>You have been already logined.</p>
{% else %}
    <p>You must login.</p>
{% endif %}

このuser.is_authenticatedでクライアントがログイン中かどうかを判断できる。便利すぎる。

ログインしているアカウントを出力

これも難しくはなく、サーバへのrequestにユーザ情報があるので、それを出力するだけになる。

/templates/webapp/index.html

<h1> Hello Django </h1>
{% if user.is_authenticated %}
    <p>You have been already logined.</p>
    <!-- 出力 -->
    <p>You are {{ user }}</p>
{% else %}
    <p>You must login.</p>
{% endif %}

動作確認

このように表示されたからオッケー! f:id:syakoo:20190713210618p:plain

さいごに

ログインのパスワードの暗号化等もDjangoがしてくれるので非常に素早くログインの処理を実装できた。