২. ২ Django Rest Framework (DRF) এর csrf React.js এ কিভাবে সেই csrf টোকেন ব্যবহার হয়

Django Setup

1. Django Project এবং App তৈরি করুন

প্রথমে Django প্রজেক্ট তৈরি করুন:

django-admin startproject myproject
cd myproject
django-admin startapp myapp

2. Django Settings পরিবর্তন করুন

settings.py ফাইলে আপনার অ্যাপটি যোগ করুন:

INSTALLED_APPS = [
    ...
    'myapp',
    'rest_framework',
    'corsheaders',  # CORS হ্যান্ডল করার জন্য
]

MIDDLEWARE = [
    ...
    'corsheaders.middleware.CorsMiddleware',
    ...
]

# CORS কনফিগারেশন
CORS_ALLOWED_ORIGINS = [
    "http://localhost:3000",  # আপনার React অ্যাপ্লিকেশনের URL
]

3. CSRF টোকেনের জন্য ক্লাস-বেসড ভিউ তৈরি করুন

myapp/views.py ফাইলে নিচের কোড যোগ করুন:

from django.views import View
from django.http import JsonResponse
from django.middleware.csrf import get_token
from rest_framework.views import APIView
from rest_framework.response import Response
from rest_framework import status

class CSRFTokenView(APIView):
    def get(self, request, *args, **kwargs):
        csrf_token = get_token(request)  # CSRF টোকেন পাওয়া
        return Response({'csrfToken': csrf_token})

class MyPostView(APIView):
    def post(self, request, *args, **kwargs):
        # এখানে POST রিকোয়েস্টের ডেটা প্রসেস করুন
        return Response({"message": "Data received!"}, status=status.HTTP_201_CREATED)

Django Rest Framework (DRF) এর APIView-এর মধ্যে CSRF সুরক্ষা ডিফল্টভাবে সক্রিয় থাকে। তবে, যদি আপনি CSRF সুরক্ষা মুছতে চান, তাহলে আপনি csrf_exempt ডেকোরেটর ব্যবহার করতে পারেন। এটি ব্যবহার করে আপনি একটি নির্দিষ্ট ভিউ থেকে CSRF সুরক্ষা মুছতে পারবেন।

CSRF মুছে ফেলার উদাহরণ

MyPostView ক্লাসে CSRF সুরক্ষা মুছতে নিচের মতো কোড ব্যবহার করুন:

from django.views.decorators.csrf import csrf_exempt
from rest_framework.views import APIView
from rest_framework.response import Response
from rest_framework import status
from django.utils.decorators import method_decorator

@method_decorator(csrf_exempt, name='dispatch')
class MyPostView(APIView):
    def post(self, request, *args, **kwargs):
        # এখানে POST রিকোয়েস্টের ডেটা প্রসেস করুন
        return Response({"message": "Data received!"}, status=status.HTTP_201_CREATED)

কোডের ব্যাখ্যা

@method_decorator(csrf_exempt, name='dispatch'):
- এই ডেকোরেটরটি MyPostView ক্লাসের dispatch মেথডের উপরে যুক্ত করা হয়েছে। এটি নির্দেশ করে যে, এই ক্লাসের সকল HTTP মেথড (GET, POST, PUT, DELETE ইত্যাদি) থেকে CSRF সুরক্ষা বাদ দেওয়া হবে।
CSRF সুরক্ষা বাদ দেওয়া:
- এই মেথডটি সংযুক্ত হলে, ক্লায়েন্ট থেকে CSRF টোকেন পাঠানোর দরকার হবে না, এবং সার্ভার CSRF আক্রমণের বিরুদ্ধে সুরক্ষিত থাকবে না। এটি সাধারণত নিরাপত্তার জন্য সুপারিশ করা হয় না, তবে কিছু বিশেষ পরিস্থিতিতে (যেমন API যেখানে CSRF টোকেন ব্যবহার করা সম্ভব নয়) এটি উপকারী হতে পারে।

4. URL কনফিগারেশন

myapp/urls.py ফাইলে নিচের কোড যোগ করুন:

from django.urls import path
from .views import CSRFTokenView, MyPostView

urlpatterns = [
    path('csrf-token/', CSRFTokenView.as_view(), name='csrf-token'),
    path('submit/', MyPostView.as_view(), name='submit'),
]

5. মেইন URL কনফিগারেশন

myproject/urls.py ফাইলে অ্যাপের URL যুক্ত করুন:

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

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

React Setup

1. React অ্যাপ তৈরি করুন

React অ্যাপ তৈরি করুন:

npx create-react-app myreactapp
cd myreactapp

2. CSRF টোকেন রিকোয়েস্ট এবং ডাটা সাবমিট

src/App.js ফাইলটি এইভাবে পরিবর্তন করুন:

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

function App() {
    const [csrfToken, setCsrfToken] = useState('');
    const [message, setMessage] = useState('');

    useEffect(() => {
        // CSRF টোকেন পাওয়ার জন্য GET রিকোয়েস্ট
        axios.get('http://localhost:8000/api/csrf-token/')
            .then(response => {
                setCsrfToken(response.data.csrfToken);  // CSRF টোকেন স্টেটে সেভ করা
            })
            .catch(error => console.error("Error fetching CSRF token: ", error));
    }, []);

    const handleSubmit = (e) => {
        e.preventDefault();
        // ডাটা সাবমিট করার জন্য POST রিকোয়েস্ট
        axios.post('http://localhost:8000/api/submit/', { message: "Hello World!" }, {
            headers: {
                'X-CSRFToken': csrfToken,  // CSRF টোকেন হেডারে পাঠানো
            },
        })
        .then(response => {
            setMessage(response.data.message);
        })
        .catch(error => {
            console.error("Error submitting data: ", error);
            setMessage("Submission failed.");
        });
    };

    return (
        <div>
            <h1>CSRF Example</h1>
            <form onSubmit={handleSubmit}>
                <button type="submit">Submit Data</button>
            </form>
            {message && <p>{message}</p>}
        </div>
    );
}

export default App;

প্রজেক্ট চালানো

1. Django সার্ভার চালান

python manage.py runserver

2. React অ্যাপ চালান

npm start

Django