如何在 Flutter 中使用 JWT 和 WebSocketChannel答案

【问题标题】：How to use JWT with WebSocketChannel in Flutter如何在 Flutter 中使用 JWT 和 WebSocketChannel
【发布时间】：2022-05-12 18:17:18
【问题描述】：

我有一个现有的 Websocket 通道，需要通过他的 JWT 对用户进行身份验证，以便使用此套接字连接发送/接收消息。问题是 - 我不知道在建立连接时如何在消息正文中发送我的访问令牌。官方文档说：

"如果 url 包含用户信息，这将在建立连接时作为基本身份验证传递。"

但在我的情况下，JWT 是通过这样的消息传递的：

{"method":"auth","accessToken":"${MY_TOKEN}"}

我尝试通过在标头中传递 JWT 或在建立连接后使用 sink 进行连接，但是当我发送新消息时，它只调用 onDone 回调并关闭连接。

  final _channel = IOWebSocketChannel.connect('${WEB_SOCKET_URL}');

...

  void initState() {
    _channel.stream.listen((message) {
      print('message');
    }, onError: (error, StackTrace stackTrace) {
      print('error');
    }, onDone: () {
      print('done');
    });

    _channel.sink.add({
      "method": "auth",
      "accessToken": "${MY_TOKEN}"
    });
}

我希望建立连接，然后我可以使用它来发送/接收消息，但它只会在我尝试使用“sink.add()”方法时关闭。

【问题讨论】：

标签： flutter dart jwt

【解决方案1】：

试试这个方法。正如https://api.flutter.dev/flutter/dart-io/WebSocket/connect.html中提到的那样，这很容易

  final WebSocketChannel channel =
  IOWebSocketChannel.connect("ws://<socketurl>/ws/",headers: {
    'Content-type': 'application/json',
   'Accept': 'application/json',
   'Authorization': 'Bearer $yourtoken'
  });

【讨论】：

这会引发 Flutter web 的平台错误。
标题在这里不起作用。 {"type":"connection_error","payload":{"message":"Cannot read properties of undefined (reading 'Authorization')"}}

【解决方案2】：

您可以在 URL 中传递它：

WebSocketChannel.connect("ws://localhost:8080/api/foo/ws?authorization=eyJhbGciOiJIUzI1...")

将IOWebSocketChannel 用作suggested 如果与flutter web 一起使用会引发平台错误，而WebSocketChannel 会自动确定正确的平台。

传统上，持有证书被认为是不好的做法查询参数，因为 URL 可以存储在日志等位置代理、浏览器历史记录等。但是，这些都不是问题适用于 websockets（浏览器不会保留连接历史由页面生成），并且代理无法访问该 URL 是 TLS 隧道。当非 TLS 交互是默认。

source

【讨论】：

【解决方案3】：

您正试图在套接字上发送一个对象，我认为它对此不满意。服务器可能无法正确处理接收到非 json 字符串的错误并关闭连接。

试试这个发送一个 json 字符串：

    var message = {
      "method": "auth",
      "accessToken": "${MY_TOKEN}"
    };

    _channel.sink.add(jsonEncode(message));

【讨论】：

感谢您的回复，但不，仍然是同样的错误。
你输入的是onError还是onDone？
再次进入onDone