Auth.js를 사용하여 Django와 Svelte 간의 원활한 사용자 인증

Django 및 Svelte 애플리케이션 전반에서 프로그래밍 방식으로 사용자 인증

Django와 Svelte 간의 세션 관리 및 API 기반 통신을 위해 JavaScript를 사용합니다.

// Front-end Script: Sending user session data from Django to Svelte
// This script sends a logged-in user's session data to the Svelte app via API.
async function sendUserSession(username, redirectUrl) {
    const response = await fetch('/api/sso', {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ username, next: redirectUrl })
    });
    if (response.ok) {
        window.location.href = redirectUrl;
    } else {
        console.error('Failed to redirect the user.');
    }
}
// Usage: Provide username and desired redirection URL.
sendUserSession('john_doe', 'https://svelte-app.com/dashboard');

백엔드 솔루션 1: Svelte 측에서 Auth.js를 사용하여 세션 관리

세션 유효성 검사 및 생성을 위해 Svelte API에서 사용자 지정 경로를 구현합니다.

// File: routes/api/sso/+server.ts
import { redirect } from '@sveltejs/kit';
// Helper function to create or retrieve the user
function getOrCreateUser(username) {
    // Mocked database interaction to get or create user
    return {
        id: 1,
        name: username,
        email: username + '@example.com',
        image: '/default-avatar.png'
    };
}
export async function GET({ url, locals, cookies }) {
    const next = url.searchParams.get('next');
    if (!next) throw new Error("next parameter is required.");
    const username = url.searchParams.get('username');
    const user = getOrCreateUser(username);
    const sessionToken = `session_${Date.now()}`;
    locals.session = {
        id: sessionToken,
        user: { name: user.name, email: user.email, image: user.image },
        expires: new Date(Date.now() + 2 * 60 * 60 * 1000) // 2 hours
    };
    cookies.set("authjs.session-token", sessionToken, {
        path: '/',
        httpOnly: true,
        secure: true,
        sameSite: 'strict'
    });
    return redirect(307, next);
}

백엔드 솔루션 2: 사용자 데이터 전달을 위한 Django API 엔드포인트

세션 토큰을 생성하고 Svelte 애플리케이션에 전달하기 위해 Django API 엔드포인트를 생성합니다.

# File: views.py
from django.http import JsonResponse
from django.contrib.auth.models import User
import jwt, datetime
def sso_redirect(request):
    if not request.user.is_authenticated:
        return JsonResponse({'error': 'User not authenticated'}, status=401)
    next_url = request.GET.get('next')
    if not next_url:
        return JsonResponse({'error': 'next parameter is required'}, status=400)
    payload = {
        'id': request.user.id,
        'username': request.user.username,
        'email': request.user.email,
        'exp': datetime.datetime.utcnow() + datetime.timedelta(hours=2)
    }
    token = jwt.encode(payload, 'secret', algorithm='HS256')
    return JsonResponse({'token': token, 'next': next_url})

Auth.js와 Django 통합에 대한 일반적인 질문

1. 세션 토큰을 Svelte 앱에 안전하게 전달하려면 어떻게 해야 합니까?
2. 당신은 사용할 수 있습니다 JWT 사용자 세션 데이터를 인코딩하고 HTTPS를 통해 안전하게 전송하여 전송 중에 토큰이 변조되지 않도록 합니다.
3. 세션 토큰이 만료되면 어떻게 되나요?
4. 토큰이 만료되면 Svelte 앱은 이를 감지하고 새 세션 토큰을 위해 Django 앱으로 리디렉션하여 사용자에게 재인증하라는 메시지를 표시할 수 있습니다.
5. 타사 제공업체 없이 Auth.js를 사용할 수 있나요?
6. 예, Auth.js는 사용자 정의 로그인 흐름을 허용합니다. 다음과 같은 기능을 사용하여 자신만의 경로를 만들고 세션을 직접 관리할 수 있습니다. locals.session 그리고 cookies.set.
7. 역할이나 권한을 어떻게 처리할 수 있나요?
8. 세션 토큰에 역할 기반 데이터를 추가하세요. 예를 들어 다음과 같은 필드를 포함합니다. role: 'admin' Svelte 앱에 대한 권한을 관리하려면 JWT 페이로드에 있어야 합니다.
9. 세션 생성과 관련된 문제를 디버깅할 수 있습니까?
10. 예, 다음과 같은 세부정보를 기록할 수 있습니다. locals 그리고 cookies 세션 생성 중에 또는 개발자 도구를 사용하여 HTTP 요청에 문제가 있는지 검사합니다.

애플리케이션 간 인증 강화

안전하고 사용자 친화적인 인증 흐름을 구축하는 것은 플랫폼 간 원활한 전환을 보장하는 핵심입니다. Django에 내장된 인증과 Svelte의 세션 관리를 활용하여 개발자는 사용자 경험에 대한 중단을 최소화하면서 이를 달성할 수 있습니다. 이 솔루션은 외부 공급자에 의존하지 않고도 원활한 세션 공유를 보장합니다. 🔐

보안 토큰을 신중하게 처리하고 구조화된 세션을 관리하는 이 접근 방식은 확장 가능하고 미래에도 사용할 수 있는 다중 플랫폼 구현을 제공합니다. 이 통합은 최신 웹 기술이 어떻게 함께 작동하여 보안과 편의성을 우선시하는 강력하고 유연한 인증 시스템을 제공할 수 있는지 보여줍니다.