워드프레스 사용자 회원가입 기능 직접 만들기 (플러그인 활용)

📘 워드프레스 REST API를 이용해서 나만의 사이트 만들기 - 3편

워드프레스에서 일반 사용자 회원가입 기능 만들기 (커스텀 플러그인 활용)

 

 

 

이제 글을 불러와서 보여줄 수 있고, 사용자가 글을 쓸 수 있도록 로그인하고, JWT 인증을 이용해서 게시물을 작성하는 기능까지 붙여봤다.

이제 기본적인 '보고', ‘쓰기’ 흐름은 완성된 셈이다.

그렇다면 다음 단계는?
바로 일반 사용자도 스스로 회원가입할 수 있어야 한다는 점이다.

 

 

왜 회원가입이 필요할까?

트위터처럼 짧게 글을 쓰는 구조로 사이트를 만들기로 했기 때문에,
관리자 혼자 블로그처럼 글을 계속 쓰는 방식이 아니라 여러 사용자가 자유롭게 글을 남길 수 있어야 한다.

그래서 사용자 계정이 필요하고, 그 사용자들이 로그인해서 글을 쓸 수 있어야 한다.
그러려면 당연히 회원가입도 되어야 하고...

 

 

왜 커스텀 플러그인을 선택했는가?

워드프레스 REST API는 기본적으로 사용자 등록 기능을 제공하긴 하지만, 보안 문제 때문에 일반적으로는 REST API를 통해 사용자 등록이 막혀 있다.

하지만 워드프레스 관리자 권한으로 API 요청을 보내면 가능은하다.

 

회원가입(register.js) 스크립트:

const appPassword = '애플리케이션 비밀번호';
const adminUser = '관리자 아이디';

const response = await fetch('https://도메인/wp-json/wp/v2/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    Authorization: 'Basic ' + btoa(`${adminUser}:${appPassword}`),
  },
  body: JSON.stringify({
    username: username,
    email: email,
    password: password,
    nickname: nickname,
    roles: ['author'],
  }),
});

하지만 이 구조는 프론트엔드에서 직접 관리자 인증 정보를 노출시키기 때문에, 사실상 보안상 안전하지 않은 방식이다.

이 문제를 해결하기 위해서 플러그인을 이용할 것인데, 유명한 플러그인들도 많지만 특정 기능 하나만 사용할 예정이기에 직접 만든 플러그인을 써서 부하를 최소화 하도록 한다. (이후 유지관리 여부나 여러 문제를 고려했을 때 직접 구현하는 게 더 편리)

 

 

커스텀 플러그인(custom-rest-register)

워드프레스의 REST API 시스템을 활용해 어떤 사용자든 작성자(author) 권한으로 회원가입이 가능하도록 해주는 플러그인이다.

custom-rest-register.zip

0.00MB

 

 

 

프론트엔드 회원가입 페이지 구현

이제 아래처럼 프론트엔드에서 바로 회원가입을 요청할 수 있다.
플러그인 설치 이후엔 더 이상 관리자 인증이나 애플리케이션 비밀번호는 필요 없다.

 

회원가입(register.html) 페이지:

<input type="text" id="username" placeholder="아이디 (영문/숫자)" />
<input type="password" id="password" placeholder="비밀번호" />
<input type="text" id="nickname" placeholder="닉네임" />
<input type="email" id="email" placeholder="이메일" />
<button onclick="register()">회원가입</button>
<p id="message"></p>

 

회원가입 스크립트:

async function register() {
    const username = document.getElementById('username').value;
    const password = document.getElementById('password').value;
    const email = document.getElementById('email').value;
    const nickname = document.getElementById('nickname').value;

    const response = await fetch('https://myDomain.com/wp-json/custom-register/v1/register', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
            username: username, // 사용자가 입력한 아이디
            email: email,       // 이메일 주소
            password: password, // 비밀번호
            nickname: nickname, // 닉네임
        }),

    });

    const result = await response.json();
    if (response.ok) {
        document.getElementById('message').innerText = '회원가입 성공! 로그인하세요.';
        setTimeout(() => (window.location.href = 'login.html'), 2000);
    } else {
        document.getElementById('message').innerText =
            '회원가입 실패: ' + (result.message || '오류 발생');
    }
}