Undergrad Research

세션을 통한 인증된 유저의 정보 가져오기

Jay_J 2024. 6. 27. 08:49

이제 내가 만든 웹 애플리케이션의 HTTPS 리디렉션, 로그인, 로그아웃 기능은 모두 구현이 되었다. 이제 드디어 조금 더 깊게 파고들 수 있을것 같다. 다음 할 일은 로그인을 하면, 세션으로부터 유저의 정보(여기서는 이름만 가져오기로 했다)를 가져와 프로필 화면에 유저의 이름을 띄우는 것이다.

 

먼저, 나는 CAS로 로그인을 구현 했다. CAS를 통해 로그인을하고 유저 정보를 가져오는 과정은 대략 다음과 같다.

 

1. CAS 인증을 처리하는 라우트를 설정한다.

2. 사용자 정보 전달 및 저장 : 사용자 정보를 세션이나 쿠키에 저장하고, 클라이언트 측에서 이를 요청하거나 표시한다.

 

쿠키, 세션같은 용어는 개발을 하다보면 꼭 듣게되는 용어들중 하나이다. 세션(Session)과 쿠키(Cookie)는 웹 애플리케이션에서 사용자의 상태를 유지하는 데 사용되는 두 가지 주요 방법이다. 두 방법 모두 상태 유지를 가능하게 하지만, 그 방식과 특성에서 차이가 있다.

더보기
  • 세션(Session):         
    • 특징
      서버 측 저장: 세션 데이터는 서버에 저장되고, 클라이언트에는 세션 ID만 저장된다.
      보안성: 세션 ID만 클라이언트에 저장되므로, 민감한 데이터가 클라이언트 측에 노출되지 않는다.
      유효 기간: 세션은 일반적으로 사용자가 웹 애플리케이션을 닫거나 로그아웃하면 만료된다. 서버 설정에 따라 세션 유효 기간을 조정할 수 있다.
    • 장점
      보안성: 중요한 데이터가 서버에만 저장되므로 보안성이 높다.
      대량 데이터 저장 가능: 서버에 저장되므로, 클라이언트가 처리할 데이터 양의 제한이 없다.
    • 단점
      서버 부하 증가: 많은 사용자 세션 데이터를 저장해야 하므로 서버 부하가 증가할 수 있다.
      스케일링 어려움: 세션 데이터가 서버에 저장되므로 서버 확장 시 세션 데이터 동기화가 필요하다.
  • 쿠키(Cookie):
    • 특징
      클라이언트 측 저장: 쿠키 데이터는 클라이언트의 브라우저에 저장된다.
      크기 제한: 각 쿠키의 크기는 약 4KB로 제한됩니다. 또한, 각 도메인당 저장할 수 있는 쿠키의 개수에도 제한이 있다.
      유효 기간: 쿠키는 설정된 만료 시간까지 유지된다. 만료 시간을 설정하지 않으면 브라우저가 닫힐 때 삭제된다.
    • 장점
      서버 부하 감소: 클라이언트 측에 데이터를 저장하므로 서버 부하가 줄어든다.
      스케일링 용이: 클라이언트에 저장되므로 서버 확장 시 별도의 데이터 동기화가 필요하지 않다.
    • 단점
      보안성 취약: 쿠키는 클라이언트 측에 저장되므로, 민감한 데이터가 노출될 위험이 있다.
      크기 제한: 저장할 수 있는 데이터 크기에 제한이 있다.
      사용자 제어: 사용자가 쿠키를 임의로 수정하거나 삭제할 수 있다.

이런 식으로 쿠키와 세션에는 각각 장단점이 있다. 그렇다면, 쿠키와 세션은 언제 구분되어 사용될까?

세션 사용 사례:
민감한 데이터 처리: 로그인 상태 유지, 사용자 정보 관리 등
서버 측에서 데이터 일관성을 유지해야 할 때
대량의 사용자 데이터를 저장해야 할 때


쿠키 사용 사례:
간단한 사용자 설정 저장: 테마, 언어 설정 등
비 로그인 사용자 상태 유지
서버 부하를 최소화해야 할 때

이처럼 여러가지를 고려해 봤을때, 내가 개발중인 애플리케이션은 세션이 더 적합한것 같다. 그 이유는 CAS를 통해 유저의 민감한 정보를 저장하므로, 서버측에 이를 저장해두는것이 더 안전하다.

 

자 그럼 이제 이걸 코드로 어떻게 구현해낼까?

 

1. 사용자 정보를 저장하고 전달하는 API를 추가한다.(/backend)

- 로그인 성공 후, 세션에 사용자 정보를 저장하고, 클라이언트에서 이 정보를 요청 할 수 있도록 API를 추가한다.

app.get('/api/user', (req, res) => {
  if (!req.session.user) {
    return res.status(401).send('User not authenticated');
  }
  res.json(req.session.user); 
});

- /api/user 엔드포인트를 추가하여 로그인된 사용자 정보를 JSON 형식으로 반환한다.
- 로그인 성공 후 세션에 사용자 정보를 저장한다.

 

2. 백엔드의 /api/user 엔드포인트에서 사용자 정보를 가져와 상태에 저장하고, 이를 프로필에 표시한다.

const Dashboard = () => {
    const [isSidebarOpen, setSidebarOpen] = useState(false);
    const [user, setUser] = useState(null); // 사용자 상태 추가
    const navigate = useNavigate();

    useEffect(() => {
        axios.get('/api/user', { withCredentials: true }) // 사용자 정보 요청
            .then(response => {
                setUser(response.data); // 사용자 상태 업데이트
            })
            .catch(error => {
                console.error('Error fetching user data:', error);
            });
    }, []);

 

이렇게 코드를 추가하고 봤더니 정보를 가져오는중 get요청에서 에러가 발생했다(하....). 문제를 해결하기 위해 해볼 수 있는건

 

1.  서버 로그 확인

2. 엔드포인트 경로 확인

3. 세션 설정 확인

 

정도이다. 다음 포스팅에서 이 오류에 관해 더 자세히 보겠다!