Spring + Oauth2 + JWT + Websocket

Question

私は春のブート+ oauth2 + websocketの例を行っています。私は8098ポート上で実行されているリソースサーバー上で春websocket構成と他のコードを持っています。そして私は8080ポート上で実行されているクライアントアプリケーションから接続しようとしています。しかし、私がアプリケーションを実行すると、ブラウザのコンソールでエラー401（無許可）になります。私は私のコードの一部を共有しています：

1）クライアントアプリケーション（ポート8080上で実行されている）のWebSocket接続を取得するためにJavaScriptコード

'use strict'; 

// pull in the SockJS JavaScript library for talking over WebSockets. 
var SockJS = require('sockjs-client'); 
// pull in the stomp-websocket JavaScript library to use the STOMP sub-protocol. 
require('stompjs'); 

function register(registrations) { 
    const access_token = localStorage.getItem("ACCESS_TOKEN"); 
    console.log("Access Token " + access_token); 
    const csrf_token = localStorage.getItem("XSRF"); 
    // Here is where the WebSocket is pointed at the server application’s /messages endpoint 
    // websocket use this URL to open TCP connection 
    var socket = SockJS('http://localhost:8098/notifications'); 
    var stompClient = Stomp.over(socket); 

    var headers = { 
     'X-Csrf-Token': csrf_token, 
     Authorization: 'Bearer ' + access_token 
    } 

    // connect to server using stompClient 
    stompClient.connect(headers, function(frame) { 
     // Iterate over the array of registrations supplied so each can subscribe for callback as messages arrive. 
     stompClient.send("/app/notifications", {}); 
     registrations.forEach(function (registration) { 
      stompClient.subscribe(registration.route, registration.callback); 
     }); 
    }); 

} 

module.exports = { 
    register: register 
}; 

を

2私は、サーバーを持っている）リソース・サーバ（8098ポートで実行されている）のコードは、サイドウェブソケット構成

@Configuration 
@EnableWebSocketMessageBroker 
public class WebSocketConfiguration extends AbstractSecurityWebSocketMessageBrokerConfigurer { 

    // This prefix we will append to every message's route. 
    static final String MESSAGE_PREFIX = "/topic" 
    static final String END_POINT = "/notifications" 
    static final String APPLICATION_DESTINATION_PREFIX = "/app" 

    @Override 
    protected boolean sameOriginDisabled() { 
     return true; 
    } 

    /** 
    * This method configure the end-point on the backend for clients and server to link ('/notifications'). 
    */ 
    @Override 
    public void registerStompEndpoints(StompEndpointRegistry registry) { 

     // This code register the '/notifications' end-point. The SockJS client will attempt to connect to '/notifications' end-point 
     if(registry != null) { 
      registry.addEndpoint(END_POINT).setAllowedOrigins("*").withSockJS() 
     } 

    } 

    /** 
    * This method configure the message broker used to relay messages between server and client. 
    */ 
    @Override 
    public void configureMessageBroker(MessageBrokerRegistry registry) { 

     if(registry != null) { 
      // Enable a broker to send messages to the client on destinations prefixed with '/topic' 
      registry.enableSimpleBroker(MESSAGE_PREFIX); 
      // prefix for messages that are bound for @MessageMapping annotated methods. This prefix will be used to define all message mappings 
      registry.setApplicationDestinationPrefixes(APPLICATION_DESTINATION_PREFIX) 
     } 
    } 
} 

何か解決策をお勧めします。

Answer 1

最後に私はこの問題を解決しました。以前は、jwt_tokenと接頭辞 'bearer'を使って、デコードされた形式でアクセストークンを送信していた問題がありました。

私はいくつかのデバッグを行い、トークンは実際の形式でデコードする必要があることを知りました。以前私はこのような応答からクライアント側でアクセストークンを抽出し

1. ：

= jwt_decode（response.entity.details.tokenValue）復号化せよ。 localStorage.setItem（ "ACCESS_TOKEN"、decoded.jti）;

これは正しくありません。そこで、私は以下のコードで変更しました：

localStorage.setItem（ "ACCESS_TOKEN"、response.entity.details.tokenValue）;

私は以下のWebSocketたリスナーJSファイルで

が

変化

CONST access_tokenは= localStorage.getItem（ "access_tokenは"）。

var socket = SockJS（ 'http://localhost:8098/notifications/?access_token=' + access_token）;

URLのクエリパラメータに接頭辞 'bearer'を付けずにアクセストークンを送信しています。

それは働いた。