MENU

Djangoの独自ログイン画面を実装してみる

2020 2/24
Djangoの独自ログイン画面を実装してみる

いままで,FlaskやDjangoでログイン画面を実装する際には,入力された値(ユーザー名やパスワード)をデータベースに問い合わせし,一致したらログイン成功,不一致の場合ログイン失敗という処理をわざわざベタベタにコードで書いていたのだが,実はDjangoではログイン処理をAPI一発で呼び出せるらしい。

今回はそんなお話。覚えれば非常に便利,楽です。

目次

ログインアプリケーションの作成

まずは,ログイン用のアプリケーションを作成しておきます。

$ python3 manage.py startapp accounts

ログイン/ログアウトの処理はこちらのアプリーケーション内に記述します。
(どのサイトもアプリ名がaccountsだったのでそれに合わせ込み,アプリ名はaccountsとして作成。)

ディレクトリ構成

今回の構成を以下のようにします。


├── TestSite
│   ├── __init__.py 
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── accounts
│   ├── __init__.py
│   ├── admin.py
│   ├── apps.py
│   ├── migrations
│   ├── models.py
│   ├── templates #追加①
│   │   └── accounts
│   │       ├── home.html
│   │       └── login.html
│   ├── tests.py
│   ├── urls.py #追加②
│   └── views.py
├── その他のアプリケーション...
├── db.sqlite3
└── manage.py
  1. templatesディレクトリの追加
    • その下にaccountsディレクトリを作成し,ログイン関係のhtmlファイルをここに格納しておきます。
  2. urls.pyの作成
    • レンダリング情報を記述します。(後ほど説明します。)

URLレンダリングの設定

毎度のことながら,settings.pyurls.py(プロジェクト内の方)の記述/追記を行っていきます。

settings.pyにはINSTALLED_APPSaccounts.apps.AccountsConfigを追加です。

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'myapp.apps.MyappConfig',
    'accounts.apps.AccountsConfig', #追加
]

プロジェクト配下のurls.pyにはaccountsのpathを通しておきます。

urlpatterns = [
    path('admin/', admin.site.urls),
    path('accounts/', include('accounts.urls')),  #追加
]

アプリ配下のurls.pyにはログイン/ログアウトそして,ログイン成功時のホーム画面へののレンダリングを記述します。

from django.conf.urls import url
from django.contrib.auth import views as auth_views
from . import views
from django.urls import path, include

app_name = 'accounts'

urlpatterns = [
    path('login/', auth_views.LoginView.as_view(template_name='accounts/login.html'), name='login'),
    path('logout/', auth_views.LogoutView.as_view(), name='logout'),
    path('home/', views.home, name="home"),
]

auth_views.LoginView.as_view()としてDjangoのログイン用APIを使っていきます。ログアウトも同じです。

引数のtemplate_nameでログインURL時に返すHTMLファイルを指定します。これで,独自のHTMLを用いたログイン画面の開発が可能となります。

views.pyの記述

本来urls.pyで記述したURLレンダリング時の処理をviews.pyに記述を行うのですが,ログイン/ログアウトのAPIを用いた場合はこの記述が必要ありません。

ここでは,ログイン成功時に遷移するHOME画面の設定だけしておきます。
(home.htmlを返すだけにしておきます。)

def home(request):
    return render(request, 'accounts/home.html')

ログイン画面の実装

独自のログイン画面をHTMLで作成していきます。
今回は以下のようにしてみました。

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>ログイン画面</title>
  </head>
  <body>
    <h1>ログイン画面</h1>
    <form action='' method='POST'>

    {% csrf_token %}

    {{ form.as_p }}

    <button>ログイン</button>
    </form>
  </body>
</html>

{% csrf_token %}の記述を忘れずに。

ポイントは{{ form.as_p }}の記述です。DjangoのログインAPIを用いた場合は,この書き方でログインフォームを自動で作成してくれます。
オシャレな感じではありませんが...。CSSやBootstrapなりで今後オシャレにしていきます...。

ログインフォーム画面

このフォーム内にSuperuserで作成したアカウント情報を入力することで,
ログイン可能となります。

Superuserの作成は以下のコマンドで(未作成の方は)

$ python3 manage.py createsuperuser
  • Username: 空白だとデフォルトのユーザー名となります。
  • E_mail: 入力しなくても構いません。(エンターキーでスキップ可)
  • Password: 必ず入力しましょう。(2回入力を行います)

ログイン後のページ遷移

ログイン後にレンダリングしたいページの設定はsettings.pyで行います。

最後に追記しておきましょう。今回はログイン成功時にHOME画面に遷移するようにしておきます。

LOGIN_REDIRECT_URL = '/accounts/home'

では,遷移されるホーム画面を適当に作っておきましょう。

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>ホーム画面</title>
  </head>
  <body>
    <h1>HOME画面</h1>
    {% if user.is_authenticated %}
    <p>{{ user.get_username }}でログイン中</p>
    <a href="/accounts/logout">ログアウトする</a>
    {% else %}
    <p>ログインしていません</p>
    {% endif %}
  </body>
</html>

ログイン成功後は「<ユーザ名>でログイン中」という文言が表示されます。

ログイン状態でのみホーム画面へ遷移

どのサービスもログインをしていない状態では個人ページへの遷移はできないはずです。しかし今のままでは/accounts/homeとURLを直でブラウザへ入力するとホーム画面へ遷移できてしまいます。

そこで,ログインしていない場合はホーム画面へは遷移させない作りに変えていきます。...といってもたった2行の追加ですが。

views.pyに追記します。

from django.contrib.auth.decorators import login_required #追加① 新たにimport

@login_required #追加②
#これ以降の記述はログインしないと処理されません。

def home(request):
    return render(request, 'accounts/home.html')

ログインユーザーにしか見せたくない記述は@login_requiredより下に処理を書いておきます。たったこれだけです。

/accounts/homeにログインしていない状態で進むと,見事にログイン画面に強制的に遷移させられました。

 

これで,一通りDjangoのAPIを使った自作ログイン画面の構築は完了です。

次はログインページにCSSを使いオシャレにしていきます。
CSS/JavaScriptの導入は以下のページで

あわせて読みたい
DjangoのstaticディレクトリでCSSとJSを扱う
DjangoのstaticディレクトリでCSSとJSを扱うFlaskを使っているとCSSやJava Scriptはstaticというディレクトリに格納するだけ。それだけで読み込みが簡単なのですがDjangoはいろいろと設定が多くてめんどくさい印象...

読んでおくべきおすすめ記事

あわせて読みたい
DjangoでHTMLで作成したページを表示させるだけ。ただそれだけ
DjangoでHTMLで作成したページを表示させるだけ。ただそれだけこんにちは。ちゆりです。ええ。まだやってますよ。Django.飽きもせずDjangoを触っています。Flaskから乗り換えるために一通りの実装を行い備忘録として記事でまとめて...

この記事が気に入ったら
フォローしてね!

この記事を書いた人

6年間化学を専攻していたのになぜか一部上場のIT企業のエンジニアへ。
普段はWeb系のITエンジニアとしてサラリーマンをしているが、脱サラ田舎暮らしに憧れ,システム開発やブログ収益化を目指す。

コメント

コメントする

目次
目次