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 エンドポイント

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 のセッション管理を活用することで、開発者はユーザー エクスペリエンスへの影響を最小限に抑えながらこれを実現できます。このソリューションにより、外部プロバイダーに依存せずにシームレスなセッション共有が保証されます。 🔐

安全なトークンと構造化されたセッション管理を慎重に処理することにより、このアプローチはスケーラブルであるだけでなく、マルチプラットフォームの実装において将来性も備えています。この統合は、最新の Web テクノロジーがどのように連携して、セキュリティと利便性を優先する堅牢かつ柔軟な認証システムを提供できるかを示しています。