워드프레스에 소셜 계정/네이버 아이디로 로그인하기 - WordPress Social Login

워드프레스에서 로그인하거나 댓글을 달 때 워드프레스에 가입하지 않고 사용자가 익숙한 소셜(SNS) 계정을 사용하여 로그인하고 댓글을 달 수 있도록 하면 방문자들이 보다 편리하게 사이트를 이용하는 데 도움이 될 것입니다.

아래에서 소개하는 WordPress Social Login 플러그인은 2023년 7월 27일 보안상의 이유로 워드프레스 저장소에서 제거되었습니다. 아래의 방법을 이용하고 싶은 경우 다른 사용자가 업데이트하여 GitHub에 올린 버전을 다운로드할 수 있지만, 보안 문제가 해결되지 않았을 수도 있으므로 사용에 신중을 기하시기 바랍니다.

워드프레스에서 소셜 계정으로 로그인/댓글 달기

WordPress Social Login 플러그인은 사이트 방문자나 고객이 사용 중인 소셜 계정 ID를 이용하여 등록할 수 있도록 합니다. 따라서 방문자가 회원 가입 폼을 작성하고 사용자 이름과 비밀번호를 외우는 번거로움을 덜 수 있습니다.

이 플러그인을 설치하면 설정 아래에 WP Social Login이라는 메뉴가 추가됩니다.

• Networks 탭에서는 Facebook, Google, Twitter의 API 정보를 설정할 수 있습니다.
• Widget 탭에는 기본 설정과 고급 설정을 지정할 수 있는 옵션이 제공됩니다.

워드프레스에서 Facebook, Google, Twitter와 연동시켜 소셜 계정으로 로그인과 댓글이 가능하도록 하려면 각 소셜 계정에서 애플리케이션 ID(혹은 애플리케이션 키)와 비밀번호(Secret)를 발급받아야 합니다.

페이스북(Facebook) 연동시키기

가령 Networks 탭의 Facebook 섹션에서 Application ID와 Application Secret을 등록해야 방문자들이 페이스북 계정을 통해 로그인하고 댓글을 달 수 있습니다.

Facebook 섹션에서 "Where do I get this info?"를 클릭하면 아래에 Facebook API를 만들어 Application ID와 Application Secret 정보를 얻는 자세한 방법이 설명되어 있습니다. 위의 그림에서 1~6까지의 항목으로 설명된 지침을 따라 단계적으로 새로운 App을 등록하여 Application ID/Secret 정보를 제공받을 수 있습니다.

지침에 따라 얻은 Application ID와 Application Secret을 위의 화면 상단 부분에 추가하고 저장하면 페이스북 설정이 완료됩니다.

페이스북의 경우 페이스북 개발자 페이지에서 설정을 마치더라도 정상적으로 작동하지 않습니다. 등록한 페이스북 계정으로 테스트하면 잘 되지만 다른 사람의 계정으로 테스트하면 오류가 나옵니다. 다음과 비슷한 오류 메시지가 표시될 것입니다.

App Not Setup: This app is still in development mode, and you don't have access to it. Switch to a registered test user or ask an app admin for permissions.

그 이유는 아직 테스트 단계이기 때문입니다. 제대로 작동하게 하려면 한 가지 과정을 더 거쳐야 합니다. 먼저 Settings > Basic에서 Contact Email과 Namespace를 입력하도록 합니다. (해당 페이스북 계정에 사용된 이메일을 입력해야 합니다.)

그런 다음 왼쪽의 Status & Review를 클릭하고 "Do you want to make this app and all its live features available to the general public?" 옆에 있는 선택 버튼에서 Yes를 선택합니다.

팝업 창에서 "Confirm"을 누르면 모든 설정이 완료됩니다. 이제 정상적으로 페이스북으로 로그인/댓글 연동이 됩니다.

마찬가지 방법으로 Twitter를 설정할 수 있습니다. Twitter의 경우 트위터 계정에 핸드폰 번호가 등록되어 있는 경우에만 연동이 가능합니다.

워드프레스에서 구글(Google) 연동시키기

페이스북에서 설명한 것과 비슷한 방법으로 구글을 연동시킬 수 있습니다. 하지만 구글의 경우 실제 설명과 약간 다를 수 있고 까다로울 수 있습니다.

위와 같이 설명되어 있는데요. 우선 Dashboard로 이동한 다음 오른쪽 상단에 있는 드롭다운 메뉴를 클릭하여 "프로젝트 생성"을 클릭하여 진행하도록 합니다. 이외의 단계도 약간씩 차이가 있습니다. 프로젝트를 만들고 Google+ API를 추가하고 "사용자 인증 정보"에서 아래 그림과 같이 "OAuth 클라이언트 ID"를 선택하도록 합니다.

그러면 "클라이언트 ID 만들기" 화면이 나오는 데, 여기에서 "웹 애플리케이션"을 선택하고 설정하도록 합니다. 승인된 자바스크립트 원본 정보와 승인된 리디렉션 URI 정보는 WP Social Login 플러그인의 설정 설명에 나와있습니다. 그대로 복사하여 붙여넣기 하도록 합니다. "최종적으로 다음과 비슷한 화면이 나와야 합니다.

구글 연동이 잘 안 되고 "Request failed. Either you have cancelled the authentication or Google refused the connection."와 같은 오류가 발생하면 Google+ API를 활성화해주시기 바랍니다.

네이버 계정 연동하기

WordPress Social Login 플러그인을 사용하여 워드프레스에 네이버와 카카오 계정을 연동할 수 있습니다. 네이버 계정을 사용하여 워드프레스에 로그인하도록 하는 방법은 "워드프레스에 카카오 계정 로그인 추가하기"라는 글에 소개된 카카오 계정 연동 방법과 동일합니다. 링크된 글에서 테마의 functions.php 파일에 추가하는 함수는 다음과 같이 수정해주도록 합니다.

// 네이버 연동
add_action( 'init', 'my_add_naver_provider_to_wsl' );

function my_add_naver_provider_to_wsl() {

//if ( function_exists ('wsl_version') ) {

global $WORDPRESS_SOCIAL_LOGIN_PROVIDERS_CONFIG;

$WORDPRESS_SOCIAL_LOGIN_PROVIDERS_CONFIG[] = ARRAY(
"provider_id"       => "Naver",
"provider_name"     => "Naver",
"require_client_id" => true,
"callback"          => true,
"new_app_link"      => "https://nid.naver.com/devcenter/register.nhn",
"cat"               => "socialnetworks",
);
//}
}

수정된 부분은 provider_id, provider_name, new_app_link 정도입니다.

아이콘을 등록하고 WordPress Social Login 설정 화면을 새로 고침하면 오른쪽 하단에 있는 Add more providers에 위의 그림과 같이 네이버 아이콘이 표시됩니다. 네이버 아이콘을 클릭하면 네이버 API 정보를 입력할 수 있는 화면이 표시되고 방법이 함께 제시됩니다.

네이버 개발자 센터에서 API Client ID와 Client Secret를 발급 받기 위해 정보를 입력할 때 Callback URL은 .../wp-content/plugins/wordpress-social-login/hybridauth/?hauth.done=Naver입니다.

정상적으로 연동되면 로그인/회원가입 폼이나 댓글 시스템에서 네이버 아이콘을 클릭하면 네이버 로그인 창이 뜹니다. (테스트해보니 Internet Explorer에서는 별도의 창이 뜨지만 크롬에서는 로그인 화면이 약간 다른 방식으로 나오네요.)

다른 SNS 계정 설정

이 플러그인에서는 기본적으로 이 세 가지 SNS에 대해서만 설정할 수 있지만, (Networks 탭의) 오른쪽 하단에서 다른 SNS 계정도 설정이 가능합니다.

Add more providers(다른 SNS 제공자 추가) 란에 보면 "기본적으로 Facebook, Google, Twitter를 활성화할 수 있지만 다른 SNS 계정도 추가 가능합니다. 예를 들어 맨 앞에 있는 워드프레스 아이콘을 클릭하면 다음과 같이 WordPress 아이콘을 클릭하면 Networks 탭에서 Twitter 섹션 아래에 WordPress 섹션이 추가됩니다.

마찬가지로 Application ID와 Application Secret을 받을 수 있는 방법이 자세히 설명되어 있습니다. (워드프레스의 경우 JetPack에 포함된 Comments 플러그인을 사용하면 댓글을 달 경우에 워드프레스(WordPress.com) 계정을 사용할 수 있습니다. )

Widget 탭

Widget 탭에서는 여러 가지 기본 설정(Basic Settings)과 고급 설정(Advanced Settings)을 지정할 수 있고, 심지어 사용자 CSS를 추가할 수 있는 Custom CSS 옵션도 제공됩니다.

Basic Settings에서는 아래 그림과 같이 "Connect with" 캡션, 아이콘 세트 유형, 사용자 아바타 등 세 가지 설정을 지정할 수 있습니다.

Advanced Settings에서 Social Login 아이콘을 어디에 표시할 것인가를 설정할 수 있습니다.

위의 그림과 같이 "Authentication display" 옵션을 통해 소셜 로그인 아이콘을 표시하는 방식을 지정할 수 있습니다.

• Do not display the widget anywhere, I'll use shortcodes: 위젯을 표시하지 않음. 사용자가 직접 숏코드를 사용함
• Display the widget in the comments area, login and register forms: 소셜 로그인 위젯을 댓글 영역, 로그인 및 회원 가입 폼에 표시
• Display the widget only in the login and register forms: 로그인 및 회원 가입 폼에만 표시
• Display the widget only in the comments area: 댓글 영역에만 표시

설정을 마치면 다음과 비슷한 모양으로 로그인/회원등록 폼 또는 댓글 영역에 표시됩니다.

---

네이버 계정을 사용하여 워드프레스 블로그에 로그인하기(유료 플러그인)

워드프레스에 네이버 아이디로 로그인하는 방법은 위에서 "네이버 계정 연동하기" 부분에 설명되어 있습니다. 이런 작업이 부담되면 단비스토어에서 One Stop Social Login 플러그인을 구입하여 사용할 수 있습니다.

이 플러그인을 사용하여 네이버, 다음, 카카오, 페이스북, 구글 플러스, 트위터 등의 계정으로 로그인 및 댓글 달기가 가능합니다. 하지만 가격이 90,000원으로 다소 부담이 되는 편이네요.

소셜 로그인 플러그인 하나에 9만원이면 조금 심한 가격 같고요, 이와 비슷한 기능을 할 것으로 보이는 유료 플러그인으로 AccessPress Social Login이라는 플러그인이 있습니다.

플러그인 페이지의 설명을 보면 쉽게 구성이 가능하다고 합니다. 위에서 설명한 복잡한 과정을 거치지 않더라도 인증 정보만 입력하면 알아서 처리해주지 않을까 생각되네요.

다만 네이버 로그인 기능이 없다는 것이 아쉽네요. 이것은 어쩔 수 없는 것 같습니다. 네이버 로그인이 외국에서는 필요하지 않으니까요.

---

업데이트 - Failed Security Check 오류가 발생하는 경우

SNS 계정으로 등록하려고 시도할 때 Failed Security Check라는 오류가 표시되면서 등록에 실패하지만, 사용자 목록에는 추가되어 있는 문제가 발생할 수 있습니다. 이 경우 다시 등록하려고 시도하면 이미 같은 이름의 사용자가 있다는 메시지가 표시되면서 등록이 되지 않습니다. 이런 문제가 발생할 경우 플러그인 충돌일 가능성이 높습니다. 의심되는 플러그인(특히 회원 가입과 관련된 플러그인)을 하나씩 비활성화하면서 테스트를 하여 문제가 되는 플러그인을 찾도록 합니다. 예를 들어 User Registration Aide 플러그인을 사용할 경우 이 문제가 발생할 수 있습니다.

참고:

• 특정 사용자/사용자 역할이 로그인하지 못하도록 차단하기
• 무료 WebP 변환 프로그램 - 꿀뷰 이미지 뷰어
• 클라우드웨이즈로 서버 이전했습니다