스프링 보안 + 각도 2 + SockJS

Question

죄송합니다. 처음에는 나쁜 언어로되어 있습니다. 나는 독일에서 온 학생이고 프로그래밍에서 새로운 사람입니다.

스프링 부트로 약간의 웹 소켓 서버를 구현하고 기본 인증을 사용하여 스프링 보안으로 보안을 설정했습니다. 프런트 엔드에는 각도 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)) 
} 

인용문 그러나 이것은 나에게 단지 HTTP 200 응답을 제공하고 세션 또는 뭔가를 열지 않았다

내가 좋아하는 하나의 POST 요청하여이 작업을 수행하기 위해 노력했다.

로그인 정보도 원래 요청에 넣으려고했습니다.

이

_self.wsClient.connect ('관리자', '패스', 기능 (프레임) {...}

당신의 도움에 감사드립니다.

Answer 1

내가 일을하지 않은 .. SockJS으로하지만 순수한 웹 소켓에 대한 몇 가지 작은 메커니즘을 구현 한 어쩌면이 모든

첫째에게 도움이 될 것입니다, 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 
     } 
    ); 

세 번째 소켓 구성 : angular2를 통해

@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 
     } 
    } 
} 

마지막으로, 설립 연결 :

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

     }); 

그냥 복사하면이 코드가 작동하지 않을 수 있습니다/풀. 내가 처리 할 다른 몇 가지 경우가있었습니다 (즉, 내 websocket이 연결 재설정 중입니다). 질문 범위를 벗어 났으므로 코드를 여기에 배치하는 동안 수동으로 제거했습니다.