이번 글에서는 SSR(Server-Side Rendering)을 활용한 웹 애플리케이션의 로그인 및 사용자 인증을 구현하는 방법에 대해 알아보겠습니다. SSR은 서버에서 페이지를 렌더링하여 클라이언트에게 전달하는 방식으로, 클라이언트에서 로그인 및 사용자 인증을 처리하는 것에 비해 보안적으로 더 안전하다는 장점이 있습니다.

1. 로그인 페이지 구현

먼저, 로그인 페이지를 구현해야 합니다. 이 페이지는 사용자에게 아이디와 비밀번호를 입력받아 서버로 전달하는 역할을 합니다. 보안을 위해 HTTPS를 사용하고, 사용자 입력을 검증하는 로직을 추가하는 것이 좋습니다.

<form action="/login" method="POST">
  <input type="text" name="username" placeholder="Username" required>
  <input type="password" name="password" placeholder="Password" required>
  <button type="submit">Login</button>
</form>

2. 로그인 요청 처리

서버에서는 로그인 요청을 처리하여 사용자 인증을 수행해야 합니다. 실제 사용자 데이터베이스와의 연동을 통해 아이디와 비밀번호를 검증하고, 성공 시 사용자 정보를 세션에 저장하는 것이 일반적입니다.

app.post('/login', (req, res) => {
  const { username, password } = req.body;

  // 사용자 인증 로직 수행
  if (isValidUser(username, password)) {
    // 사용자 정보를 세션에 저장
    req.session.user = { username };
    res.redirect('/dashboard');  
  } else {
    res.status(401).send('Invalid username or password');
  }
});

3. 사용자 인증 확인

로그인 후 다른 페이지로 이동할 때마다 사용자의 인증 상태를 확인해야 합니다. 이를 위해 서버에서 세션을 검사하여 로그인한 사용자인지 판단합니다.

app.use((req, res, next) => {
  // 세션에서 사용자 정보를 확인하여 로그인 상태인지 판단
  if (req.session.user) {
    next();
  } else {
    res.redirect('/login');
  }
});

4. SSR 페이지에서 사용자 정보 표시

인증된 사용자만 접근 가능한 페이지를 SSR 방식으로 렌더링할 때, 사용자 정보를 표시해야 하는 경우가 많습니다. 이를 위해 서버에서 세션에 저장된 사용자 정보를 클라이언트로 넘겨주어 SSR 페이지에서 사용할 수 있도록 해야 합니다.

app.get('/dashboard', (req, res) => {
  // 사용자 정보를 SSR 페이지로 전달
  const user = req.session.user;
  res.render('dashboard', { user });
});

마무리

이렇게 SSR을 활용하여 웹 애플리케이션의 로그인 및 사용자 인증을 구현할 수 있습니다. SSR은 클라이언트에서 로그인 처리를 하는 것에 비해 보안적으로 더 안전한 방식이며, 사용자 인증 상태를 서버에서 체크하여 페이지 접근을 제한할 수 있습니다.

#SSR #웹개발