Wordpress

워드프레스 API와 리액트 통합을 위한 인증 토큰 구현 가이드

0

워드프레스 API를 사용하여 리액트로 만든 정적 페이지에서 로그인, 주문 정보 등의 데이터를 가져오는 것은 매우 유용합니다. 이 글에서는 같은 서버에서 작동하는 리액트 애플리케이션과 워드프레스 REST API를 통합하는 방법에 대해 알아보겠습니다. 특히, 인증 토큰을 설정하여 안전하게 데이터에 접근하는 방법을 알아보겠습니다.

1. 워드프레스 REST API 이해

워드프레스는 강력한 REST API를 제공하여 외부 애플리케이션이 콘텐츠를 관리할 수 있도록 합니다. 이 API를 통해 게시물, 페이지, 사용자, 우커머스 주문 정보 등을 CRUD(생성, 읽기, 업데이트, 삭제) 작업할 수 있습니다. REST API의 기본 구조를 이해하는 것이 중요합니다.

2. 리액트 애플리케이션과 API 통합

리액트 애플리케이션에서 워드프레스 API를 사용하여 데이터를 가져오기 위해, 웹 브라우저에서 직접 API 요청을 수행해야 합니다. 이 과정에서 중요한 몇 가지 사항을 살펴보겠습니다.

CORS 문제 해결

리액트 애플리케이션이 API 요청을 할 때 CORS(Cross-Origin Resource Sharing) 문제를 해결해야 합니다. 워드프레스 서버에서 CORS 설정을 올바르게 구성하여 특정 출처의 요청을 허용해야 합니다.

// 워드프레스의 functions.php 파일에 추가
function add_cors_http_header(){
    header("Access-Control-Allow-Origin: *");
}
add_action('init','add_cors_http_header');

이 코드는 모든 출처에서의 요청을 허용하도록 설정합니다. 보안상의 이유로, 특정 도메인만 허용하도록 설정하는 것이 좋습니다.

사용자 인증

API 요청 시 인증이 필요한 경우, JWT 또는 OAuth를 사용하여 인증을 수행할 수 있습니다. 여기서는 JWT 방식을 사용한 인증 방법을 설명합니다.

JWT 인증 설정

  • JWT 플러그인 설치: 워드프레스에 JWT Authentication for WP REST API 플러그인을 설치하고 활성화합니다.
  • 플러그인 설정: 플러그인 설정에서 시크릿 키를 설정하고, 필요한 설정을 완료합니다.
// 워드프레스의 wp-config.php 파일에 추가
define('JWT_AUTH_SECRET_KEY', 'your-top-secret-key');
define('JWT_AUTH_CORS_ENABLE', true);

토큰 발급받기

사용자가 로그인하면 JWT 토큰을 발급받아야 합니다. 이를 위해 사용자 로그인 API를 사용합니다.

fetch('http://127.0.0.1/wp-json/jwt-auth/v1/token', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    username: 'your-username',
    password: 'your-password'
  })
})
.then(response => response.json())
.then(data => {
  if (data.token) {
    localStorage.setItem('token', data.token);
  } else {
    console.error('Token not found');
  }
})
.catch(error => console.error('Error:', error));

이 코드에서는 로그인 성공 시 반환된 토큰을 로컬 스토리지에 저장합니다.

API 요청에 토큰 포함하기

발급받은 토큰을 API 요청의 `Authorization` 헤더에 포함시켜야 합니다.

const token = localStorage.getItem('token');

fetch('http://127.0.0.1/wp-json/wp/v2/posts', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${token}`
  }
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

이 코드는 로컬 스토리지에 저장된 토큰을 사용하여 인증된 API 요청을 수행합니다.

3. 리액트 컴포넌트에 API 데이터 통합

리액트 컴포넌트 내에서 API 데이터를 가져와 상태에 저장하고, 이를 UI에 표시할 수 있습니다.

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

function UserInfo() {
  const [user, setUser] = useState(null);
  const token = localStorage.getItem('token');

  useEffect(() => {
    fetch('http://127.0.0.1/wp-json/wp/v2/users/me', {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${token}`
      }
    })
    .then(response => response.json())
    .then(data => setUser(data))
    .catch(error => console.error('Error:', error));
  }, [token]);

  if (!user) return <div>Loading...</div>;
  return <div>Hello, {user.name}</div>;
}

이 컴포넌트는 사용자가 로그인한 상태에서 자신의 정보를 표시합니다. `useEffect` 훅을 사용하여 컴포넌트가 마운트될 때 API 요청을 수행하고, 응답 데이터를 상태로 저장합니다.

결론

워드프레스 API와 리액트 애플리케이션을 통합하면 유연하고 강력한 웹 애플리케이션을 만들 수 있습니다. 이 글에서는 워드프레스 API를 사용하여 리액트에서 데이터를 가져오고, 인증 토큰을 설정하여 안전하게 API를 사용하는 방법을 자세히 설명했습니다. 이러한 통합은 사용자 경험을 향상시키고, 다양한 기능을 제공하는 데 큰 도움이 될 것입니다.

답글 남기기