Wordpress

React.js와 워드프레스를 이용한 JWT 인증 로그인 구현 방법

0

최근 웹 개발 트렌드를 보면, 프론트엔드와 백엔드의 경계가 점점 더 명확해지고 있습니다. React.js와 같은 프론트엔드 라이브러리를 활용하여, 워드프레스의 백엔드를 API로 통합하는 것은 매우 유용한 접근 방식입니다. 특히, 사용자 인증과 같은 중요한 기능을 효율적으로 구현할 수 있는 방법이죠.

이 글에서는 워드프레스 REST API와 JWT 인증을 사용해 React.js에서 로그인 기능을 구현하는 방법을 설명하겠습니다. 복잡해 보이지만, 하나하나 따라가다 보면 누구나 쉽게 구현할 수 있습니다.

JWT 인증이란 무엇인가요?

JWT(JSON Web Token)는 웹 애플리케이션의 인증에 자주 사용되는 토큰 기반 인증 방식입니다. JWT는 사용자가 로그인을 할 때 생성되며, 서버는 이 토큰을 통해 사용자가 인증되었음을 확인합니다. 이후의 API 요청은 이 토큰을 포함하여 보내야 하며, 서버는 이 토큰을 통해 사용자가 인증되었음을 확인합니다.

이제 React.js와 워드프레스를 사용하여 이 로그인 과정을 구현하는 방법을 자세히 알아보겠습니다.

1. 워드프레스에 JWT 인증 플러그인 설치

먼저, 워드프레스 사이트에서 JWT 인증 플러그인을 설치해야 합니다. 이 플러그인은 워드프레스 REST API에서 인증 기능을 추가합니다.

  • 워드프레스 관리자 페이지에 로그인하고, “플러그인 > 새로 추가”로 이동합니다.
  • 검색창에 “JWT Authentication for WP REST API”를 입력하고, 해당 플러그인을 설치 후 활성화합니다.

플러그인 활성화 후, 워드프레스 설치 폴더의 `wp-config.php` 파일에 다음 코드를 추가합니다.

define('JWT_AUTH_SECRET_KEY', 'your-secret-key');

서버 설정에 따라 `.htaccess` 파일에 다음 코드를 추가해야 할 수도 있습니다.

RewriteCond %{HTTP:Authorization} ^(.*)
RewriteRule ^(.*) - [E=HTTP_AUTHORIZATION:%1]

이 과정이 완료되면, 이제 워드프레스 API는 JWT 토큰을 통해 인증된 요청을 처리할 수 있습니다.

2. React.js에서 로그인 API 호출

React.js에서 사용자 로그인 기능을 구현하려면, API를 호출하여 사용자의 이메일과 비밀번호를 인증하고, 인증된 사용자에게 JWT 토큰을 받아와야 합니다.

1. 프로젝트 설정

React 프로젝트를 설정하고, axios 라이브러리를 설치합니다.

npx create-react-app my-app
cd my-app
npm install axios

2. 컴포넌트 생성

`Login.js`라는 컴포넌트를 생성하고, 다음과 같이 로그인 요청을 처리합니다.

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
      });
      
      if (response.data.token) {
        localStorage.setItem('token', 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;

이 코드는 사용자에게 이메일과 비밀번호를 입력받고, 이를 워드프레스 서버의 로그인 API로 전송합니다. 성공하면 JWT 토큰을 받아와 브라우저의 localStorage에 저장하게 됩니다.

3. 인증된 API 접근

JWT 토큰을 받은 후에는, 인증이 필요한 API에 접근할 수 있습니다. 이는 사용자가 로그인 상태에서 보호된 리소스를 요청할 때 유용합니다.

import axios from 'axios';

const fetchProtectedData = async () => {
  const token = localStorage.getItem('token');

  try {
    const response = await axios.get('https://your-wordpress-site.com/wp-json/wp/v2/posts', {
      headers: {
        Authorization: `Bearer ${token}`
      }
    });
    console.log(response.data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};

이제 사용자는 로그인 후, 워드프레스 서버에서 보호된 리소스에 접근할 수 있습니다. 이 과정에서 JWT 토큰이 필요한 모든 요청에는 이 토큰을 포함해야 합니다.

4. 토큰 저장 시 주의사항

JWT 토큰을 `localStorage`에 저장하는 것은 사용자가 로그인을 유지하도록 돕는 간편한 방법입니다. 하지만 이 방법은 보안상 취약점이 있을 수 있습니다. 특히, XSS(교차 사이트 스크립팅) 공격에 의해 토큰이 탈취될 수 있습니다. 이러한 문제를 피하기 위해, 상황에 따라 HTTP-only 쿠키를 사용하는 것도 고려해볼 만합니다.

결론: 쉽고 빠르게 로그인 구현하기

워드프레스와 React.js를 결합하여 강력한 웹 애플리케이션을 구축하는 것은 이제 그리 어렵지 않습니다. 위에서 설명한 방법을 따르면, 쉽고 빠르게 사용자 인증 기능을 구현할 수 있습니다. 이 과정에서 JWT 인증을 활용하면, 다양한 요구 사항에 맞게 확장할 수 있는 유연한 인증 시스템을 구축할 수 있습니다.

답글 남기기