春のセキュリティ+角2 + SockJS

Question

私の最初の悪い言い訳を申し訳ありません。私はドイツの学生で、プログラミングの新しい人です。

私はSpring Bootでwebsocketサーバーを少し実装し、Basic Authを使用してSpring Securityでセキュリティを確保しました。フロントエンドには角度2が使用されています。私はwebsocketに接続する以下のソリューションを実装しました。この関数を呼び出す

* Connects to a websocket server. 
* @param {string} url  The url of the WS Server 
* @param {string} channel The channel to subscribe 
* @return {boolean} connection status 
*/ 
public connect(url: string, channel: string): boolean { 
    console.group('WebSocketService: Welcome to the connect function.'); 
    console.log('Connects to', url); 
    console.log('Channel is', channel); 
    let _self = this; 
    let socket = new SockJS(url); 

_self.wsClient = Stomp.over(socket); 

    _self.wsClient.connect({}, function(frame) { 
     _self.setConnected(true); 
     console.log('Connected: ', frame); 
     _self.wsClient.subscribe(channel, function(greeting) { 
      console.log(greeting); 
      _self.subjects[channel].next(greeting); 
     }); 
    }); 
    console.groupEnd(); 
    return true; 
} 

は、ブラウザがユーザ名とパスワードの入力を開いてみましょう。 これで、ユーザー名とパスワードをもう一度入力する必要はなく、サーバーとの接続と切断が可能になりました。

このブラウザの入力ウィンドウをコード内のログイン情報で置き換えるにはどうすればよいですか？

private test2(){ 
    let username : string = 'admin'; 
    let password : string = 'pass'; 
    let headers = new Headers(); 
    headers.append("Authorization", "Basic " + btoa(username + ":" + password)); 
    headers.append("Content-Type", "application/x-www-form-urlencoded"); 
    console.log('Test beginnt'); 
    return this._http.get('http://localhost:8080/gs-guide-websocket', {headers: headers}).map(res=> console.log(res)) 
} 

BLOCKQUOTEしかし、これは私だけのhttp 200応答を与え、セッションか何かを開けませんでした：

は、私のような単一のPOSTリクエストでこれを実行しようとしました。

ログイン情報も元のリクエストに入れようとしました。

_self.wsClient.connect（ '管理者'、 'パス'、機能（フレーム）{...}

はあなたの助けをいただき、ありがとうございます。

Answer 1

私は仕事していません。SockJSでしかし、私は純粋のWebSocketのためのいくつかの小さなメカニズムを実装しているかもしれない、それはすべての有用

まず、OAuthの構成になります。

@Configuration 
@EnableAuthorizationServer 
@EnableResourceServer 
public class OAuth2Configuration extends AuthorizationServerConfigurerAdapter { 

    private static Logger logger = LoggerFactory.getLogger(OAuth2Configuration.class); 
    private UsersService service = new UsersService(); 

    @Autowired 
    AuthenticationManagerBuilder authenticationManager; 

    @Autowired 
    UserDetailsService userDetailsService; 


    @Override 
    public void configure(AuthorizationServerEndpointsConfigurer endpoints) throws Exception { 

     authenticationManager.userDetailsService(this.userDetailsService); 
     endpoints.authenticationManager((Authentication authentication) -> authenticationManager.getOrBuild().authenticate(authentication)); 
    } 

    @Override 
    public void configure(ClientDetailsServiceConfigurer clients) throws Exception { 
     clients.inMemory().withClient("application_name") 
       .authorizedGrantTypes("password", "authorization_code", "refresh_token") 
       .scopes("write", "read", "trust") 
       .secret("secret").accessTokenValiditySeconds(24 * 60 * 60); 
    } 

    @Bean 
    public UserDetailsService userDetailsService() { 
     return (username) -> { 
      return service.getByName(username).map(account -> new User(account.getName(), account.getPassword(), account.getAuthorities())).orElseThrow(
        () -> new RuntimeException("User not found") 
      ); 
     }; 
    } 
} 

秒、angular2承認：

let headers = new Headers(); 
headers.append("Authorization", "Basic appname:secret"); 
this.http.post("localhost:8080/oauth_endpoint?grant_type=password&scope=trust&username=" + login + "&password=" + password , "", { headers: headers }) 
     .map((response: Response) => response.json()) 
     .subscribe(response => { 
      this.accessToken = response.access_token; //will be used for socket 
     } 
    ); 

第三ソケット構成：

@Configuration 
@EnableWebSocket 
public class SocketConfig implements WebSocketConfigurer { 

    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) { 
     registry.addHandler(socketHandler(), "/websocket").setAllowedOrigins("*"); 
    } 

    @Bean 
    public SocketHandler socketHandler() { 
     return new SocketHandler(); 
    } 
} 

public class SocketHandler extends TextWebSocketHandler { 

    @Autowired 
    private CheckTokenEndpoint checkTokenEndpoint; 

    private static Logger logger = LoggerFactory.getLogger(SocketHandler.class); 


    public void afterConnectionEstablished(WebSocketSession session) { 
     logger.info("New peer connected: " + session.getId()); 
    } 

    public void handleMessage(WebSocketSession session, WebSocketMessage<?> message) throws Exception { 
     logger.debug("Peer is trying to authenticate"); 
     String token = message.getPayload().toString(); 
     try { 
      checkTokenEndpoint.checkToken(token); 
      logger.info("New peer authenticated. "); 
     } catch (Exception e) { 
      logger.warn("Peer unauthenticated!"); 
      session.close(); //closing connection when provided token doesn't match 
     } 
    } 
} 

と最後、angular2を介した接続を確立：あなただけコピーした場合

let ws = new WebSocket("localhost:8080/websocket", []); 
ws.onopen = (event: Event) => { 
     this.send(
      ws.send() 

     }); 

このコードは/動作しない場合がありますペースト。私は対処するいくつかの他のケースを持っていました（つまり、私のwebsocketは接続を再確立しています）。彼らは問題の範囲外であるため、ここにコードを配置しながら手動で削除しました。