DjangoとReactで実装するログイン機能の手順 - Python転職初心者向けエンジニアリングブログ

はじめに

ウェブ開発において、ログイン機能は欠かせないものです。この記事では、PythonのDjango フレームワークとReactライブラリを使用して、シームレスでセキュアなログイン機能を実装する手順について説明します。サーバーサイドはDjangoを、クライアントサイドはReactを使用します。

バックエンドの設定（Django）

Djangoプロジェクトの作成

まず、Djangoプロジェクトを作成します。

django-admin startproject myproject
cd myproject

Djangoアプリの作成

ログインに関連する機能を含むDjangoアプリを作成します。

python manage.py startapp accounts

モデルの定義

models.pyファイルを開き、ユーザーモデルを定義します。

# accounts/models.py

from django.db import models
from django.contrib.auth.models import AbstractUser

class CustomUser(AbstractUser):
    # ここにカスタムユーザーモデルのフィールドを定義
    pass

マイグレーションの実行

モデルの変更をデータベースに反映させます。

python manage.py makemigrations
python manage.py migrate

シリアライザの作成

Django REST Frameworkを使用して、ユーザーモデルをシリアライズします。

pip install djangorestframework

# accounts/serializers.py

from rest_framework import serializers
from .models import CustomUser

class CustomUserSerializer(serializers.ModelSerializer):
    class Meta:
        model = CustomUser
        fields = ('username', 'email', 'password')
        extra_kwargs = {'password': {'write_only': True}}

ビューの作成

ログインやユーザー作成のためのビューを作成します。

# accounts/views.py

from rest_framework import generics
from rest_framework.response import Response
from rest_framework import status
from rest_framework.permissions import AllowAny
from django.contrib.auth import authenticate, login
from .serializers import CustomUserSerializer

class CreateUserView(generics.CreateAPIView):
    serializer_class = CustomUserSerializer
    permission_classes = [AllowAny]

    def post(self, request, *args, **kwargs):
        serializer = self.get_serializer(data=request.data)
        serializer.is_valid(raise_exception=True)
        user = self.perform_create(serializer)
        login(request, user)
        return Response({'user': CustomUserSerializer(user, context=self.get_serializer_context()).data})

    def perform_create(self, serializer):
        return serializer.save()

class LoginUserView(generics.CreateAPIView):
    serializer_class = CustomUserSerializer
    permission_classes = [AllowAny]

    def post(self, request, *args, **kwargs):
        username = request.data.get('username')
        password = request.data.get('password')
        user = authenticate(request, username=username, password=password)
        if user:
            login(request, user)
            return Response({'user': CustomUserSerializer(user, context=self.get_serializer_context()).data})
        return Response({'error': 'Invalid credentials'}, status=status.HTTP_401_UNAUTHORIZED)

URLパターンの設定

urls.pyに作成したビューのURLパターンを設定します。

# accounts/urls.py

from django.urls import path
from .views import CreateUserView, LoginUserView

urlpatterns = [
    path('register/', CreateUserView.as_view(), name='register'),
    path('login/', LoginUserView.as_view(), name='login'),
]

メインのurls.pyに上記のURLを追加します。

# myproject/urls.py

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

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

これで、Djangoサーバーはユーザー登録とログインのAPIを提供する準備が整いました。

フロントエンドの設定（React）

Reactアプリの作成

Reactアプリを作成します。

npx create-react-app myreactapp
cd myreactapp

必要なライブラリのインストール

ReactアプリでAPIとの通信を行うためにaxiosをインストールします。

npm install axios

ログインコンポーネントの作成

src/components/Login.jsというファイルを作成し、以下のようにコンポーネントを定義します。

// src/components/Login.js

import React, { useState } from 'react';
import axios from 'axios';

const Login = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleLogin = async () => {
    try {
      const response = await axios.post('http://localhost:8000/api/login/', { username, password });
      console.log(response.data.user);
    } catch (error) {
      console.error('Login failed:', error.response.data.error);
    }
  };

  return (
    <div>
      <h2>Login</h2>
      <label>Username:</label>
      <input type="text" value={username} onChange={(e) => setUsername(e.target.value)} />
      <br />
      <label>Password:</label>
      <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
      <br />
      <button onClick={handleLogin}>Login</button>
    </div>
  );
};

export default Login;

新規登録コンポーネントの作成

同様に、新規登録コンポーネントを作成します。

// src/components/Register.js

import React, { useState } from 'react';
import axios from 'axios';

const Register = () => {
  const [username, setUsername] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleRegister = async () => {
    try {
      const response = await axios.post('http://

localhost:8000/api/register/', { username, email, password });
      console.log(response.data.user);
    } catch (error) {
      console.error('Registration failed:', error.response.data.error);
    }
  };

  return (
    <div>
      <h2>Register</h2>
      <label>Username:</label>
      <input type="text" value={username} onChange={(e) => setUsername(e.target.value)} />
      <br />
      <label>Email:</label>
      <input type="text" value={email} onChange={(e) => setEmail(e.target.value)} />
      <br />
      <label>Password:</label>
      <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
      <br />
      <button onClick={handleRegister}>Register</button>
    </div>
  );
};

export default Register;

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

src/App.jsにログインと新規登録コンポーネントを組み込むメインのアプリケーションを作成します。

// src/App.js

import React from 'react';
import Login from './components/Login';
import Register from './components/Register';

function App() {
  return (
    <div>
      <Login />
      <hr />
      <Register />
    </div>
  );
}

export default App;

動作確認

Djangoサーバーを起動します。

python manage.py runserver

Reactアプリを起動します。

npm start

ブラウザで http://localhost:3000 にアクセスし、ログインと新規登録が行えることを確認します。

結論

この記事では、DjangoとReactを使用してログイン機能を実装する手順について詳しく説明しました。サーバーサイドではDjangoを使用し、ユーザーの認証や登録を行い、クライアントサイドではReactを使用してユーザーインターフェースを構築しました。この組み合わせにより、セキュアで効率的なログイン機能を開発することができます。どちらも強力で柔軟なツールであるため、プロジェクトの要件に合わせてカスタマイズすることが可能です。ログイン機能の実装においては、セキュリティを重視し、ユーザーエクスペリエンスも考慮することが重要です。是非、この手順を参考にしてログイン機能を実装してみてください。