워드프레스에서 네이버와 카카오 소셜 로그인을 추가하는 방법

이야기에 앞서

워드프레스에서 네이버와 카카오 소셜 로그인을 추가하는 가장 좋은 방법은 WP Social Login 플러그인을 통해 서비스 제공자를 추가하는 것이다.

네이버와 카카오 두 서비스 제공자를 모두 포함하고 있는 워드프레스 플러그인은 모두 유료이며 대체로 고가이다. 무료 플러그인의 경우, 카카오는 그런데로 제공자에 포함되어 있지만 네이버는 없다. 따라서 네이버와 카카오를 동시에 지원하려면 유료 플러그인을 구매하거나, 아니면 이미 제작자가 더이상 유지보수 하지는 않지만 코드를 자유롭게 수정할 수 있는 WP Social Login 플러그인을 직접 고쳐 사용해야 한다.

아쉽게도 WP Social Login과 WordPress Social Login extends NAVER를 포함한 현재 인터넷 상의 그 어떤 대안들도 지금은 제대로 작동하지 않는 상태다. 따라서 이 글에서는 정상적으로 작동하는 WP Social Login 플러그인을 제공하고 설정 정보를 공유하여 네이버와 카카오 모두 워드프레스에서 사용할 수 있도록 하고자 한다.

워드프레스에서 네이버, 카카오 소셜 로그인 연동이 주는 장점

워드프레스는 설치형 블로그 시스템이라는 태생적 한계로 통합 CMS처럼 정교한 회원관리 시스템이 마련되어 있지 않다. 그래서 사용자 친화적인 로그인 및 회원가입 화면을 구성하려면 여러 플러그인의 도움을 받아야하며 필드, 버튼을 포함한 모든 구성요소의 스타일을 사이트 테마에 맞게 조정해야 한다.

이러한 페이지에서 구글, 네이버, 카카오 계정을 사용해 웹사이트에 로그인 할 수 있다면 많은 번거로움을 해소할 수 있다. 사용자는 별도의 세부 정보 입력 없이 로그인하거나 회원으로 가입할 수 있고, 사이트 제작자는 그만큼 복잡한 커스터마이징 작업에서 벗어날 수 있다.

네이버와 카카오 소셜 로그인 지원 현황

WP Social Login은 본래 네이버와 카카오에 대한 서비스를 제공하지 않지만, 사용자가 직접 워드프레스 후크 혹은 소스코드 수정을 통해 쉽게 제공자를 추가할 수 있다.

기존의 WP Social Login 사용시 유의해야 할 점

아래는 기존의 WP Social Login을 사용해 네이버와 카카오 서비스를 구현하려는 경우 유의해야 할 사항이다.

• WP Social Login 플러그인은 제작자가 더이상의 유지보수를 하지 않으며, 워드프레스 공식 저장소에서도 제거된 상태이므로 정상적인 방법으로는 설치할 수 없다.
• 다른 사용자가 이 플러그인의 소스코드를 수정하여 한 때 정상적으로 사용할 수 있었으나 지금은 작동하지 않는다. 이 링크에서 다운로드 하지 않도록 한다.
• WordPress Social Login extends NAVER 플러그인도 더이상 제대로 작동하지 않는다.
• 따라서 위에 언급한 플러그인을 통해 소셜 로그인을 구현하려는 모든 인터넷 상의 블로그 게시물은 무효하므로 참고하지 않도록 않다.

유효한 WP Social Login 플러그인의 다운로드

필자는 WP Social Login 플러그인의 소스코드를 아래와 같이 변경하여 Jetcraft에서 배포하였다.

1. functions.php에 후크를 추가하지 않고도 플러그인 설치시 곧바로 네이버와 카카오에 대한 소셜 로그인을 제공할 수 있도록 플러그인 소스코드 자체를 수정.
2. 네이버, 카카오 어댑터 관련 소스코드 추가.
3. 네이버와 카카오 서비스를 기본 서비스 제공자로 변경.
4. 소셜 로그인 과정에 필요한 모든 페이지에 대한 HTML 마크업과 스타일 수정.
5. Elementor 빌더와 Jetcraft를 사용하는 경우 추가적으로 향상된 버튼 디자인을 사용. 기본적으로는 Jetcraft에 의존하지 않는 독립적인 스타일을 가지고 있으므로 Jetcraft를 사용하지 않더라도 상관없다.
6. 네이버와 카카오 이외의 서비스 제공자에 대한 어댑터 소스는 수정하지 않았으므로 사용시 제대로 작동하지 않을 수 있다. 이유는 아래에서 설명.