エンジニアリング

【Django】ユーザー会員登録機能<サインアップ>を実装しよう！

2024.08.15
2024.10.03

Djangoで本格的なWebアプリケーションを作成する上で、ユーザー会員登録機能（サインアップ）は欠かせません。このチュートリアルでは、ユーザー登録フォームを作成し、ユーザー情報をデータベースに保存する方法を解説します。さらに、サインアップ後に自動的にログインさせ、ユーザープロフィールページにリダイレクトさせる機能も実装。Djangoの基礎を押さえながら、実践的なユーザー管理機能を学んでいきましょう！

【Django】カスタムユーザーを作成して認証する全手順解説

Djangoを使ったウェブアプリケーションの開発は、その柔軟性から多くの開発者に人気です。今回は、カスタムユーザーを作成し、ユーザー登録やプロフィール管理機能を実装する方法を詳しく解説します。カスタムユーザーモデルの重要性を理解し、Djangoアプリをセットアップすることで、実践的なスキルを身につけます。さらに、セキュリティ面にも配慮したログイン機能や、ユーザーが自分のプロフィールを管理できる機能を実装します。このチュートリアルを通じて、Djangoの魅力を最大限に引き出し、ユニークなユーザー管理機能を持つア...

1 チュートリアルの全体像
2 フォームクラスを作成
3 ビューにサインアップロジックを定義
4 URL登録
5 テンプレート作成
6 プロフィール編集画面作成
7 まとめ

チュートリアルの全体像

第1章: Djangoの開発環境を構築しよう

第2章: カスタムユーザー作成と認証導入

第3章: ユーザー登録機能を実装 (now🐾)

第4章: Tailwindを使って綺麗なページを作る

第5章: SNSのDB設計・モデル定義をしよう

第6章: 画像アップロードの実装方法を解説

第7章: SNSアプリの投稿機能を実装しよう

フォームクラスを作成

まずは、ユーザーがサインアップするためのフォームクラスを作成します。このフォームは、Djangoの標準的なユーザー作成フォームを拡張して、必要なフィールドを定義します。

accounts/forms/signup.py

from django.contrib.auth import get_user_model
from django.contrib.auth.forms import UserCreationForm

User = get_user_model()


class SignUpForm(UserCreationForm):
    usable_password = None

    class Meta:
        model = User
        fields = ("username", "email", "password1", "password2")

ビューにサインアップロジックを定義

次に、サインアップ処理を実装するビューを作成します。ここでは、ユーザーがサインアップに成功すると、自動的にログインし、プロフィールページにリダイレクトされるように設定します。

from django.contrib.auth import login
from django.contrib.auth.decorators import login_required
from django.shortcuts import redirect, render
from django.urls import reverse_lazy
from django.views.generic.edit import CreateView

from .forms.signup import SignUpForm

# Create your views here.


@login_required
def profile(request):
    return render(request, template_name="accounts/profile.html")


class SignUpView(CreateView):
    form_class = SignUpForm
    success_url = reverse_lazy("profile")
    template_name = "accounts/signup.html"

    def form_valid(self, form):
        user = form.save()
        login(self.request, user)
        self.object = user
        return redirect(self.get_success_url())

CreateViewの利用: Djangoの汎用ビューを利用して、簡単に新規作成機能を実装できます。

form_validメソッド: フォームが有効な場合に呼ばれ、ユーザーを保存し、自動的にログインします。

URL登録

新しく作成したサインアップビューをURLに追加します。これにより、特定のURLにアクセスしたときにサインアップ機能が利用できるようになります。

urlpatterns = [
    # ...
    path("signup/", views.SignUpView.as_view(), name="signup"),
]

テンプレート作成

サインアップ用のHTMLテンプレートを作成します。このテンプレートには、ユーザーが必要な情報を入力するためのフォームが含まれています。

accounts/templates/accounts/signup.html

<h1>会員登録</h1>
<form method="POST">
  {% csrf_token %}
  {{ form.as_p }}
  <button type="submit">会員登録</button>
</form>

CSRFトークン: DjangoではCSRF攻撃を防ぐためにトークンを使用します。フォーム内で必ず含める必要があります。

フォーム表示: {{ form.as_p }}は、フォームの各フィールドを段落形式で表示します。

ブラウザでhttp://localhost:8000/accounts/signupにアクセスすると、サインアップフォームが表示されます。

以下のような画面が表示されます。

必要な情報を入力し、登録ボタンを押すと、プロフィールページにリダイレクトされます。

プロフィール編集画面作成

次に、ユーザーが自分のプロフィールを編集できるようにします。ここでは、ユーザーが送信した情報をデータベースに保存し、編集が可能な画面を提供します。

accounts/views.py

from django.contrib.auth import login
from django.shortcuts import redirect, render
from django.urls import reverse_lazy
from django.views.generic.edit import CreateView

from .forms.signup import SignUpForm


def profile(request):
    if request.method == "POST":
        user = request.user
        user.email = request.POST["email"]
        user.username = request.POST["username"]
        user.description = request.POST["description"]
        user.save()
        return redirect("profile")
    else:
        return render(request, "accounts/profile.html")

class SignUpView(CreateView):
    # ...省略...

POSTリクエストの処理: フォームが送信されると、ユーザーの情報を更新して保存します。

GETリクエストの処理: プロフィールを表示するためのテンプレートをレンダリングします。

プロフィール編集機能をURLに追加します。これにより、ユーザーはプロフィールページにアクセスできるようになります。

accounts/urls.py

urlpatterns = [
    # ...省略...
    path("profile/", views.profile, name="profile"),
]

プロフィールを編集するためのフォームを作成します。このフォームには、ユーザーの情報を更新するためのフィールドが含まれています。

accounts/templates/accounts/profile.py

<form method="post" action="{% url 'profile' %}" enctype="multipart/form-data">
  {% csrf_token %}
  <div>
    <label for="name">名前</label>
    <input value="{{ request.user.username }}" name="username" type="text" required="required" />
  </div>

  <div>
    <label for="email">メールアドレス</label>
    <input value="{{ request.user.email }}" name="email" type="email" />
  </div>

  <div>
    <label for="description">自己紹介</label>
    <textarea name="description" rows="6">{{ request.user.description }}</textarea>
  </div>

  <div>
    <label for="icon">アイコン</label>
    <input type="file" name="icon" />
  </div>

  <div>
    <button type="submit">保存</button>
  </div>
</form>

<form method="POST" action="{% url 'logout' %}">
  {% csrf_token %}
  <button type="submit">ログアウト</button>
</form>