Wordpress

워드프레스와 React.js로 보안성을 높이는 로그인 시스템 구현하기

0

웹 개발을 하면서, 보안을 강화하는 방법에 대해 고민해본 적이 있으신가요? 특히, 로그인 시스템에서의 보안은 매우 중요하죠. 이번 글에서는 HTTP-only 쿠키를 사용하여 JWT 토큰을 저장하고, React.js에서 워드프레스 API를 통해 안전한 로그인 인증을 구현하는 방법을 자세히 설명드리겠습니다. 이 방법을 적용하면, 사용자 데이터를 안전하게 보호하면서도 편리한 인증 시스템을 구현할 수 있습니다.

1. HTTP-only 쿠키란?

우선, HTTP-only 쿠키가 무엇인지 알아보겠습니다. HTTP-only 쿠키는 웹 브라우저에서 JavaScript로 접근할 수 없는 쿠키입니다. 쉽게 말해, 이 쿠키는 오직 서버와 클라이언트 간의 통신에만 사용되며, 클라이언트 측 코드에서는 수정하거나 읽을 수 없습니다. 이 쿠키의 가장 큰 장점은 보안성이 높다는 점입니다. 특히, 교차 사이트 스크립팅(XSS) 공격에 대한 방어에 매우 유용합니다. 예를 들어, 악성 스크립트가 삽입되더라도, HTTP-only 쿠키에 저장된 정보는 안전하게 보호됩니다.

2. 워드프레스 서버에서 JWT를 HTTP-only 쿠키로 설정하기

워드프레스 서버에서 JWT 토큰을 HTTP-only 쿠키로 설정하는 방법을 알아보겠습니다. 이를 위해 PHP로 작성된 커스텀 코드를 추가해야 합니다. 이 코드는 테마의 `functions.php` 파일이나 커스텀 플러그인에 작성할 수 있습니다.

function custom_jwt_login($response, $user) {
    if (!is_wp_error($user)) {
        $token = $response['token'];
        setcookie('jwt_token', $token, time() + 3600, '/', '', true, true); // 1시간 유효 기간
    }
    return $response;
}
add_filter('jwt_auth_token_before_dispatch', 'custom_jwt_login', 10, 2);

위의 코드는 워드프레스에서 JWT 인증이 성공했을 때, 토큰을 HTTP-only 쿠키로 설정하는 방식입니다. 이 방법을 통해, 사용자의 로그인 정보가 안전하게 관리될 수 있습니다.

3. React.js에서 로그인 요청 보내기

그럼 React.js에서 로그인 요청을 어떻게 보낼 수 있을까요? 다행히 쿠키 설정은 서버에서 자동으로 처리되기 때문에, React.js에서 추가로 신경 쓸 부분은 많지 않습니다. 다만, `withCredentials` 옵션을 사용하여 서버가 쿠키를 설정할 수 있도록 해야 합니다.

import React, { useState } from 'react';
import axios from 'axios';

const Login = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleLogin = async () => {
    try {
      const response = await axios.post('https://your-wordpress-site.com/wp-json/jwt-auth/v1/token', {
        username: email,
        password: password
      }, {
        withCredentials: true
      });
      
      if (response.data.token) {
        alert('Login successful!');
      } else {
        alert('Login failed!');
      }
    } catch (error) {
      console.error('Login error:', error);
      alert('Login error!');
    }
  };

  return (
    <div>
      <h2>Login</h2>
      <input 
        type="text" 
        placeholder="Email" 
        value={email} 
        onChange={(e) => setEmail(e.target.value)} 
      />
      <input 
        type="password" 
        placeholder="Password" 
        value={password} 
        onChange={(e) => setPassword(e.target.value)} 
      />
      <button onClick={handleLogin}>Login</button>
    </div>
  );
};

export default Login;

이 코드는 사용자가 이메일과 비밀번호로 로그인 요청을 보낼 때, `withCredentials: true` 옵션을 사용하여 HTTP-only 쿠키가 자동으로 설정되도록 합니다. 로그인이 성공하면, 사용자에게 성공 메시지를 보여줍니다.

4. 보호된 API에 접근하기

로그인이 성공한 후, 이제 보호된 API에 접근해볼까요? 보호된 API에 접근할 때도 쿠키가 자동으로 요청에 포함됩니다. 아래 예제를 참고하세요.

import axios from 'axios';

const fetchProtectedData = async () => {
  try {
    const response = await axios.get('https://your-wordpress-site.com/wp-json/wp/v2/posts', {
      withCredentials: true
    });
    console.log(response.data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};

이 코드에서 `withCredentials: true` 옵션을 사용함으로써, 보호된 데이터에 안전하게 접근할 수 있습니다.

5. 로그아웃 처리

이제 로그아웃 시, JWT 토큰을 어떻게 처리할 수 있을지 알아보겠습니다. 워드프레스 서버에서 쿠키를 삭제하는 코드를 추가해야 합니다.

function custom_jwt_logout() {
    if (isset($_COOKIE['jwt_token'])) {
        unset($_COOKIE['jwt_token']);
        setcookie('jwt_token', '', time() - 3600, '/');
    }
    return true;
}
add_action('wp_logout', 'custom_jwt_logout');

이 코드는 사용자가 로그아웃할 때, 쿠키를 삭제하여 다시 로그인하지 않으면 보호된 API에 접근할 수 없도록 만듭니다.

6. 보안 고려사항

마지막으로, 보안성을 더욱 강화하기 위해 몇 가지 고려해야 할 사항이 있습니다.

  • HTTPS 사용: HTTP-only 쿠키는 HTTPS를 통해서만 안전하게 전달될 수 있습니다. 이를 위해 워드프레스 사이트는 반드시 HTTPS를 사용해야 합니다.
  • SameSite 속성: SameSite 쿠키 속성을 설정하여 크로스 사이트 요청을 방지할 수 있습니다. 예를 들어, `SameSite=Lax` 또는 `SameSite=Strict`로 설정할 수 있습니다.

이와 같은 방법들을 통해, 안전하고 효율적인 로그인 시스템을 구축할 수 있습니다.

결론

지금까지 HTTP-only 쿠키를 활용한 JWT 토큰 저장과 React.js에서의 안전한 로그인 인증 구현 방법에 대해 알아보았습니다. 이 방법을 사용하면 사용자의 데이터를 더욱 안전하게 보호할 수 있으며, 웹사이트의 보안성을 높이는 데 큰 도움이 될 것입니다. 지금 바로 이 방법을 적용해 보세요!

답글 남기기