인프런 커뮤니티 질문&답변
작성한 질문수
웹소켓,stomp 개념 질문 !
작성
·
87
0
바로 이전 강의에서는 순수 웹소켓에서는 토큰인증 구현안하고 기능만 돌아가도록 했음 최종강의 목표는 (stomp에서 고도화 하는 것이므로)
물론 할라면 할 수있음
예시): 쿼리 파라미터 방식으로 토큰을 포함한 WebSocket 연결
그리고 WebSocket 자체는 HTTP 헤더를 설정하는 기능을 제공하지 않기 때문에 순수 웹소켓에서는 헤더에 인증 토큰을 추가할 수 없음.
............................................................................
이번강의에서는 토큰인증 구현할때
SockJS와 STOMP 같은 라이브러리를 사용하면 HTTP 헤더에 인증 정보를 포함시킬 수 있기에 헤더에 인증정보 포함 시켜 서버로 넘기는 식으로 구현 !
그리고 뷰 메인에서
axios.interceptors.request.use(
config => {
const token= localStorage.getItem("token");
if(token){
config.headers['Authorization']=Bearer ${token}
}
return config;
},
error => {
return Promise.reject(error);
}
)
이런 식으로 추가 하는 것은 HTTP 요청에 한에서 이므로 별도임
stomp의 connection 은 HTTP 엔드포인트긴하지만 HTTP 요청이 아닌 ws 요청임 따라서 뷰 메인에서 가로채서 요청에 인증 정보 넣지 않음 따라서 connec t할때 직접 헤더에 넣어야 함
..........................................................................................
으로 이해했는데 맞을까요 ? 혹시 틀린 개념이나 빠진 부분이 있으면 알려주시면 감사하겠습니다!
답변 2
0
0
안녕하세요, 인프런 AI 인턴입니다. ckstj8027님.
웹소켓과 STOMP를 통한 토큰 인증에 대한 개념을 질문해 주셨는데요, 잘 이해하고 계신 것 같습니다. 하지만 몇 가지 보완할 수 있는 부분이 있어 추가 설명 드립니다.
순수 웹소켓에서의 인증:
- 웹소켓 자체는 전통적인 HTTP 헤더를 사용하지 않으므로, 클라이언트는 연결할 때 쿼리 파라미터나 첫 번째 메시지를 통해 인증 정보를 전달해야 합니다.
- 쿼리 파라미터에 토큰을 포함시켜 연결을 초기화할 수 있으나, 이는 보안적으로 권장되지 않습니다. 중간에서 쿼리를 노출시킬 위험이 크기 때문입니다.
- 웹소켓 자체는 전통적인 HTTP 헤더를 사용하지 않으므로, 클라이언트는 연결할 때 쿼리 파라미터나 첫 번째 메시지를 통해 인증 정보를 전달해야 합니다.
STOMP와 SockJS를 통한 인증:
- STOMP와 SockJS를 사용하면 초기 핸드셰이크 요청에 HTTP 헤더를 포함할 수 있습니다. 이때 토큰을 HTTP 헤더에 포함하여 인증 정보를 전달할 수 있습니다.
- STOMP는 웹소켓 위에서 작동하는 프로토콜로서, 메시지 전송을 위한 구조화된 방식(STOMP 프레임)을 제공합니다. 따라서 초기 연결 시에는 HTTP 요청을 통해 헤더를 설정할 수 있습니다.
- STOMP와 SockJS를 사용하면 초기 핸드셰이크 요청에 HTTP 헤더를 포함할 수 있습니다. 이때 토큰을 HTTP 헤더에 포함하여 인증 정보를 전달할 수 있습니다.
Axios 인터셉터의 설명:
- Axios 인터셉터를 사용하여 HTTP 요청에 자동으로 인증 토큰을 추가하는 부분은 이미 잘 이해하신 것처럼, 일반적인 HTTP 요청에만 해당됩니다.
- STOMP 연결 시에는 이 방식이 적용되지 않기 때문에, 직접 연결할 때 헤더에 포함해야 합니다.
- Axios 인터셉터를 사용하여 HTTP 요청에 자동으로 인증 토큰을 추가하는 부분은 이미 잘 이해하신 것처럼, 일반적인 HTTP 요청에만 해당됩니다.
접속 예시:
- 만약 STOMP 연결 시 추가 헤더가 필요하다면, SockJS의 연결 설정에서 헤더를 명시적으로 지정하여 사용하면 됩니다.
- 만약 STOMP 연결 시 추가 헤더가 필요하다면, SockJS의 연결 설정에서 헤더를 명시적으로 지정하여 사용하면 됩니다.
이와 관련된 더 자세한 정보는 아래 링크에서 추가적으로 확인하실 수 있습니다:
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.