[Node RED] Node JS 플랫폼 Session Cookie 기반 Login Logout 기능 만들기

지난번에 개발한 SMI System Monitoring Interface 의 PC를 통한 유저 접속 기능을 제공하기 위해

2021.03.20 - [C++] - MFC 기반의 유저 PC 접속 응용프로그램 만들기 

MFC 기반의 유저 PC 접속 응용프로그램 만들기

를 진행해보았다. 궁금하다면 위 를 참고해 보면 된다.

하지만 유저의 편의성과 관리 포인트룰 줄이기 위해 아래와 같이 웹어플리케이션 기반 접속 기능을 만들어 보고자 한다.

많은 고민을 해보았다.

 

 

웹기반으로 만들기 위해선 결국 Session 과 Cookie 그리고 http 서버와 클라이언트 통신 방식을를 이해해야 했다. 

그 전에!!

http 통신은 서버가 클라이언트가 누구인지 식별을 해야한다. 여기서 http 프로토콜의 connectionless, stateless 한 특성

이 있다.

• connectionless
  -> 클라이언트가 요청을 한 후 응답을 받으면 그 연결을 끊어 버리는 특징 

  클라이언트에서 서버에게 request 하면 서버는 확인 후 response 를 한 후 접속을 disable 한다.

 

여기서 connectionless 를 줄이기 위해 클라이언트는 서버의 header 에게 keep-alive 를 전달하여 유지를 한다.

• stateless

      -> 통신이 끝나면 상태를 유지하지 않는 특징

이것 또한 연결을 끊어버리는 순간 상태 정보를 유지하지 않는 특성이다.

 

위와 같은 상황을 해결하기 위해 header 에게 keep-alive 를 제공하기 위해 쿠키와 세션을 이용한다.

쿠키와 세션을 사용하면 로그인을 하면 어떠한 방식에 의해 그 사용자에 대한 Auth 를 유지하게 된다.

 

그렇다면 쿠키와 세션에 대해 간단하게 설명해 보겠다.

• Cookie

      -> 쿠키란 클라이언트 로컬에 key-data 값으로 저장되는 데이터이다.

      -> 이 데이터로 인해 클라이언트는 웹의 사용자 인증을 하여 종료 후에도 다시 재접속 시 로그인이 유지될 수 있다.

      -> 서버와 클라이언트 http 통신간에 request response 시 에 header 에 포함하여 전송하게 된다.

• Session

      -> 세션은 사용자 정보 파일을 브라우저에 저장하는 쿠키와 달리 세션은 서버 측에서 관리한다.

      -> 서버에서는 클라이언트를 구분하기 위해 세션 ID를 부여하며 서버에 접속해서 브라우저를 종료할 때까지 인증 

          상태를 유지한다.

      -> 클라이언트가 Request를 보내면, 해당 서버가 클라이언트에게 유일한 ID를 부여하는 데 이것이 세션ID다.

 

아래는 구현 결과이다.

SMI UI에 접근하기 위해서는 Login 을 통해서만 접근이 가능하다. 회사로고는 가렸다..

Referer 을 통해 url 검색으로 UI 진입을 막아 보안을 더욱 강화하였으며,

아래는 유저 PC 환경이며 실제 공정에서는 키오스크 모드이므로 PC 환경에서만 로그인 기능을 하게끔 하였다.

자바스크립트는 모듈화가 잘되어있어 실제 Login 모듈을 사용하여 SMI login page 를만들었으나 ,,, 컨셉이 맞지 않아

직접 Login Module 소스를 수정하여 SMI 컨셉에 맞게 수정하여 아래와 같이 적용하였다.

같은 네트워크 망에 있다면 여러 유저 PC 로그인을 통해 점유하지 않고 동시 접속이 가능하며 웹 브라우저를 닫을 시 

로그아웃이 된다.

또한 Favicon 을 수정하여 회사 로고 및 네이밍 등 여러가지를 수정하였다.

 

아래는 SMI 보드에 있는 Node RED 모듈이다.

아래 모듈의 소스를 리눅스 단에서 수정하여 적용할 수도 있으며, 위의 로그인 기능은 그렇게 적용하였고

여러가지 기능들을 아래 모듈을 활용하여 NodeRED IDE 에서 Java Script 로 코딩하여 개발하였다.

 

결국 사용될 컨셉에 알맞게 개발을 하면 된다.

로그인 기능을 개발해보며 쿠키와 세션에 대한 개념과 실제 적용을 통해 이해할수 있는 좋은 시간이였다.

또한 무선 과 유선 기능들을 제공 가능하게 개발을 완료 하였으며, 진행하면서 네트워크 통신망 구성에 대해 자세하게 

이해할수 있었다.

다음 개발해 볼것은 웨는 TV 와 PC 화면에서의 UI 이다. 이를 모바일에서도 보기 좋게 나오게끔 개발할 계획이다.

실제 네이버나 구글 등 여러 웹에서 테스크톱 버전과 모바일 버전을 제공한다..

결국 사용자는 PC 보다는 핸드폰이 접근성이 더 편리하다고 생각할거같다.. 나도 그렇게 생각하고.. 후