<< home

Djangoでログインページをフロントに実装する手順

ステップ 1: URL設計

アプリ: accounts を使用している前提で説明します。

accounts/
├── templates/
│   └── accounts/
│       ├── login.html
│       └── home.html

ステップ 2: テンプレートの作成

home.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ホーム</title>
</head>
<body>
    <h1>ホームページへようこそ</h1>

    
    
        <a href="{% url 'login' %}">ログイン</a>
    
    
</body>
</html>

login.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ログイン</title>
</head>
<body>
    <h1>ログインページ</h1>

    

    <form method="post">
        
        <label>ニックネーム：</label><br>
        <input type="text" name="username" required><br>

        <label>パスワード：</label><br>
        <input type="password" name="password" required><br><br>

        <button type="submit">ログイン</button>
    </form>
</body>
</html>

ステップ 3: ビューの作成

# accounts/views.py

from django.contrib.auth import authenticate, login, logout
from django.shortcuts import render, redirect
from django.contrib.auth.decorators import login_required

def login_view(request):
    if request.method == 'POST':
        nickname = request.POST.get('username')
        password = request.POST.get('password')
        user = authenticate(request, username=nickname, password=password)
        if user is not None:
            login(request, user)
            return redirect('home')
        else:
            return render(request, 'accounts/login.html', {'form': {'errors': True}})
    return render(request, 'accounts/login.html')

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

def logout_view(request):
    logout(request)
    return redirect('login')

ステップ 4: URL設定

# accounts/urls.py

from django.urls import path
from . import views

urlpatterns = [
    path('login/', views.login_view, name='login'),
    path('logout/', views.logout_view, name='logout'),
    path('', views.home_view, name='home'),
]

# myproject/urls.py

from django.contrib import admin
from django.urls import path, include

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

ステップ 5: 認証バックエンド確認（必要に応じて）

カスタムユーザーでニックネームを使用しているため、AUTHENTICATION_BACKENDS の確認もしておきましょう。

# settings.py
AUTHENTICATION_BACKENDS = ['django.contrib.auth.backends.ModelBackend']

ステップ 6: 動作確認

開発サーバー起動：python manage.py runserver
ブラウザで http://127.0.0.1:8000/ にアクセス
ログインページへ遷移し、ニックネームとパスワードでログイン
ログイン後、ホームページにユーザー名が表示されることを確認

まとめ

この手順で、Djangoのログイン機能をテンプレートを用いてフロントエンドに実装できました。

ユーザー認証にニックネームを使用
ログイン状態によって表示を切り替える
ログアウト処理も実装済み

次のステップ

ユーザーの新規登録

<< home