破解Django Channels与React WebSocket身份验证难题

javascript

2024-03-01 18:02:41

WebSockets身份验证：破解Django Channels与React难题

导言

将Django Channels WebSockets集成到React应用程序中时，用户身份验证可能会成为一个棘手的障碍。尽管遵循了文档，WebSocket连接仍可能无法识别经过身份验证的用户。让我们深入探讨问题根源并提供逐步解决方案。

问题根源

默认情况下，Django Channels和React不会自动将HTTP会话传递给WebSocket连接。为了启用身份验证，需要在Django Channels中手动配置一些设置。

解决方案

要解决这个问题，需要配置WebSocket认证中间件，它负责验证WebSocket请求中的凭据并将其附加到WebSocket消费者。

步骤指南

1. 安装中间件

pip install django-channels-auth

2. 添加中间件到路由

在routing.py中，添加以下代码：

"websocket.http.auth": {
    "type": "channels_auth.middleware.HttpAuthMiddleware",
    "authenticator": "channels_auth.middleware.TokenAuthMiddleware",
},

3. 在React中传递凭据

在React应用程序中，将身份验证令牌添加到WebSocket URL中：

const client = new W3CWebSocket('ws://127.0.0.1:8000/ws/chat/room_name/?token=YOUR_TOKEN');

4. 在Django Channels中验证

在WebSocket消费者中，添加以下代码：

# consumers.py
class ChatConsumer(AsyncWebsocketConsumer):
    async def connect(self):
        # ...（保留现有代码）
        token = self.scope['query_string'].decode().split('=')[1]
        user = authenticate(token=token)
        if not user:
            await self.close()
        self.scope['user'] = user
        # ...（保留现有代码）