使用 Auth.js 在 Django 和 Svelte 之间进行无缝用户身份验证

以编程方式跨 Django 和 Svelte 应用程序对用户进行身份验证

使用 JavaScript 进行会话管理以及 Django 和 Svelte 之间基于 API 的通信。

// 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 端点

创建 Django API 端点以生成会话令牌并将其传递给 Svelte 应用程序。

# 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' 在 JWT 负载中管理 Svelte 应用程序的权限。
9. 是否可以调试会话创建问题？
10. 是的，您可以记录详细信息，例如 locals 和 cookies 在会话创建期间或使用开发人员工具检查 HTTP 请求是否存在问题。

增强跨应用程序身份验证

构建安全且用户友好的身份验证流程是确保平台之间平稳过渡的关键。通过利用 Django 的内置身份验证和 Svelte 的会话管理，开发人员可以在对用户体验造成最小影响的情况下实现这一目标。该解决方案可确保无缝会话共享，而无需依赖外部提供商。 🔐

通过仔细处理安全令牌和结构化会话管理，该方法不仅具有可扩展性，而且对于多平台实施来说也是面向未来的。这种集成展示了现代网络技术如何协同工作，提供强大而灵活的身份验证系统，优先考虑安全性和便利性。