LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@ryo0819(RYO KTZK)

React x Djangoでログイン画面を作ってみる

Last updated at Posted at 2025-07-05

概要

プログラミングを経験してきておきながら、実際に自分の力で1からログイン画面を作って認証機能を追加してとかやってきたことがなかったのでこの機会に作ってみたいと思いました

本題

使用する技術領域

  • フロントエンド
    • React
  • バックエンド
    • Python
    • Django REST Framework

1.1 バックエンドのセットアップ

  1. 仮想環境の作成とアクティベート
    プロジェクトの作業を行うディレクトリを作成して、アクティベート
    ここら辺はPythonで開発を行う際には定番のコマンドですね

    # プロジェクト用のディレクトリを作成
mkdir django_react_auth_project && cd django_react_auth_project

# 仮想環境を作成
python3 -m venv venv

# 仮想環境をアクティベート
source venv/bin/activate

  2. パッケージインストール
    次に必要なライブラリをインストールします
    Djangoと認証のために簡単にJWTを実装できるようにするためのdjangorestframework-simplejwtをインストールします

    pip install django djangorestframework djangorestframework-simplejwt django-cors-headers

  3. Djangoプロジェクト作成・アプリ作成
    Djangoのプロジェクトとアプリを作成します

    # Djangoプロジェクトの作成
django-admin startproject mysite .

# Djangoアプリの作成
python manage.py startapp app

  4. settings.py の設定(ここからの項目はsettings.py関連です)
    追加したライブラリをDjangoで使用できるようにするためにsettings.pyを編集します

    INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    # 追加するアプリ
    'rest_framework', # DRF本体
    'rest_framework_simplejwt', # Simple JWT
    'corsheaders', # CORSヘッダー
    'app', # 作成したappアプリ
]

    MIDDLEWAREの追記も行います(CORSミドルウェアを使えるように)

    MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'corsheaders.middleware.CorsMiddleware', # これを追加
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

    Reactと連携した際にReactのアクセスを許可するために、CORSの設定を追記します
    (この部分は実際に開発していただいて自身の環境に合わせた値に設定をお願いします)

    CORS_ALLOWED_ORIGINS = [
    "http://localhost:3000", # React開発サーバーのURL
    "http://127.0.0.1:3000",
]

  5. DRFの認証設定 (Simple JWT)
    DRFのデフォルト認証クラスとしてSimple JWTを設定

    REST_FRAMEWORK = {
    'DEFAULT_AUTHENTICATION_CLASSES': (
        'rest_framework_simplejwt.authentication.JWTAuthentication',
    ),
    'DEFAULT_PERMISSION_CLASSES': (
        'rest_framework.permissions.IsAuthenticated',
    )
}

    また、JWTトークンの有効期限などを設定します

    from datetime import timedelta

<中略>

SIMPLE_JWT = {
    # アクセストークン(1時間)
    'ACCESS_TOKEN_LIFETIME': timedelta(hours=1),
    # リフレッシュトークン(3日)
    'REFRESH_TOKEN_LIFETIME': timedelta(days=1),
    # 認証タイプ
    'AUTH_HEADER_TYPES': ('JWT', ),
    # 認証トークン
    'AUTH_TOKEN_CLASSES': ('rest_framework_simplejwt.tokens.AccessToken', )
}

  6. 管理者ユーザーの作成
    Djangoの管理画面にアクセスするためのスーパーユーザーを作成しておきます

    python manage.py makemigrations
python manage.py migrate
python manage.py createsuperuser

  7. 開発サーバーの起動

    ローカル環境で開発サーバーを起動します

    python manage.py runserver

以下のようなことが表示されるので、アクセスすると添付画像のようなページに飛ぶことができます

Watching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).
July 05, 2025 - 08:22:53
Django version 5.2.4, using settings 'mysite.settings'
Starting development server at <ここのリンク>
Quit the server with CONTROL-C.

こちらです
スクリーンショット 2025-07-05 17.23.24.png

リンクの後ろに/adminをつけることで管理者用のページに飛ぶこともできます
ログインするには「管理者ユーザーの作成」で作成した認証情報でログインできます
スクリーンショット 2025-07-05 17.23.45.png

1.2 バックエンドのAPI作成

ここからは実際にやろうとしている認証系のAPIを作成していきます

  1. エンドポイントの生成
    Djangoでエンドポイントを作成するにはurls.pyをいじります
    Djangoアプリのディレクトリ内にurls.pyを作成、エンドポイントを生成します

    from django.urls import path
from rest_framework_simplejwt.views import TokenObtainPairView, TokenRefreshView # 後ほど作成するview
from .views import RegisterView, UserDetailView # 後ほど作成するview

urlpatterns = [
    # JWT認証エンドポイント
    path('token/', TokenObtainPairView.as_view(), name='token_obtain_pair'),
    path('token/refresh/', TokenRefreshView.as_view(), name='token_refresh'),

    # カスタムエンドポイント
    path('register/', RegisterView.as_view(), name='auth_register'),
    path('user/', UserDetailView.as_view(), name='user_detail'),
]

    また、プロジェクト全体のurls.pyにも修正を加えます

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

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/auth/', include('app.urls')),
]

  2. serializersの作成
    Django REST Frameworkのserializersというものを作成します
    これを使用するとデータとモデルとの間を橋渡してくれます
    モデルに合わせたバリデーションを行うように指示できるというイメージです

    ここでは、ユーザーの登録時とレスポンスの返却時のデータの取り扱いについて制限を指定います
    RegisterSerializerではAPIのレスポンスにパスワードが含まれないように
    UserSerializerでは認証されたユーザーの情報をクライアントに返す際のデータを定義しています

    from rest_framework import serializers
from django.contrib.auth.models import User


class RegisterSerializer(serializers.ModelSerializer):
    password = serializers.CharField(write_only=True)

    class Meta:
        model = User
        fields = ('username', 'password', 'email')

    def create(self, validated_data):
        # ユーザーを作成し、パスワードをハッシュ化して保存する
        user = User.objects.create_user(
            username=validated_data['username'],
            email=validated_data.get('email', ''),
            password=validated_data['password']
        )
        return user


class UserSerializer(serializers.ModelSerializer):
    class Meta:
        model = User
        fields = ('id', 'username', 'email', 'first_name', 'last_name')

  3. viewsの作成
    APIの実際の処理を作成します
    RegisterViewでユーザーの登録を
    UserDetailViewで対象のユーザーの情報を取ってくるようにします
    先ほど作成したユーザーについてはそれぞれのクラスでserializer_classを使用して指定します

    from rest_framework import generics, status
from rest_framework.response import Response
from rest_framework.permissions import AllowAny, IsAuthenticated
from django.contrib.auth.models import User
from .serializers import RegisterSerializer, UserSerializer


class RegisterView(generics.CreateAPIView):
    queryset = User.objects.all()
    permission_classes = (AllowAny,)
    serializer_class = RegisterSerializer

    def post(self, request, *args, **kwargs):
        serializer = self.get_serializer(data=request.data)
        serializer.is_valid(raise_exception=True)
        user = serializer.save()
        return Response({
            "user": UserSerializer(user, context=self.get_serializer_context()).data,
            "message": "User Created Successfully. Now perform Login to get your token",
        }, status=status.HTTP_201_CREATED)


class UserDetailView(generics.RetrieveAPIView):
    queryset = User.objects.all()
    permission_classes = (IsAuthenticated,)
    serializer_class = UserSerializer

    def get_object(self):
        # リクエストしているユーザーの情報を返す
        return self.request.user

動作確認

ここまで問題なく完了できれば、再度開発用サーバーを起動してAPIを実行してみましょう

curl -X POST "http://<自身の環境IP>/api/auth/register/" \
-H "Content-Type: application/json" \
-d '{
    "username": "testuser",
    "email": "test@example.com",
    "password": "password"
}'

レスポンスで以下のように返却されると思います

{"user":{"id":2,"username":"testuser","email":"test@example.com","first_name":"","last_name":""},"message":"User Created Successfully. Now perform Login to get your token"}

2.1 フロントエンドセットアップ

つづいてフロントエンドのセットアップに進みます
Djangoのプロジェクトを管理しているディレクトリと同じ階層で以下のコマンドを実行します

npx create-react-app frontend
cd frontend
npm install axios react-router-dom

いろいろとダウンロードの処理が走り完了すると思います

画面の詳細に関してはGeminiやChatGPTに聞いてお好みのデザインを用意してもらいましょう

最終的に簡易的ではありますが、以下のような画面を作りました

スクリーンショット 2025-07-05 20.08.03.png

あとはこの画面でユーザーを作成してログイン画面に遷移してログインするとダッシュボードからいろいろの情報が見れるようになるという作りたかったものが作れたかなと思います

おわりに

改めてこれまで1から作ったことがなかったものを作ることができました
これから機能を足していって自分のやりたいことに活かしていければと思います

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?