[쇼핑몰 구축기] 소셜 로그인으로 회원가입 활성화하기

마찬가지로 소셜 미디어도 한국적인 특징이 아주 강합니다. 그렇기 때문에 쇼셜 미디어를 이용한 마케팅에서도 한국적인 특징이 강할 수 밖에 없습니다.

그런의미에서 몇년전부터 각광을 받았던 소셜 미디어를 이용한 회원 가입 및 로그인 기능에서 워드프레스에서는 마땅히 무료로 쓸만한 플러그인이 부족합니다.

여기서는 이러한 가운데 공개된 소셜 로그인 플러그인을 최대한 활용하는 방법에 대해서 알아보고자 합니다.

[쇼핑 경험 개선] 소셜 로그인으로 회원가입 활성화하기

쇼핑몰 구축기를 연재하는 이유

최근 지인이 워드프레스를 이용해 쇼핑몰 구축을 시도하면서 배웠던 배웠던 다양한 경험들을 해당 쇼핑몰 블로그에 연재해 왔는데요.

쇼핑몰이 상품만 파는 것이 아니라 쇼핑몰을 방문하는 고객들에게 열가지 유용한 정보를 제공하는 블로그의 효용성이 높다는 점을 십분 활용하고, 처음 시작하는 쇼핑몰의 신뢰성을 주기 위해 비록 삽질이지만 삽질기를 낱낱히 공개하기로 했다고 하네요.

그 쇼핑몰의 주소는  https://puripia.com로 아직도 공사중이기는 합니다.) 

쇼핑몰 구축 시 도와주었던 인연으로 그 쇼핑몰을 알리고 쇼핑몰 구축 경험담을 보다 널리 알리기 위해서 여기 happist.com에도 같이  공유합니다. 조금 사심이 있기는 합니다.

[쇼핑 경험 개선] 소셜 로그인으로 회원가입 활성화하기

쇼핑몰 특성상 고객들의 회원 가입을 유도하고 이렇게 가입한 회원들을 대상으로 다양한 마케팅을 전개할 수 밖에 없습니다. 이러한 회원 가입 활성화를 위해서 소셜 로그인 구현 방안에 대해서 살펴봅니다.

물론 비회원 구매도 쇼핑 경험을 활성화하는 좋은 방법이기는 하지만 원활한 쇼핑 경험을 제공하기 위해서는 가능하면 회원제 운영이 가장 나은 대안이라고 할 수 있습니다.

이러려면 회원가입을 활성화해야 하죠. 어덯게하면 회원가입을 활성화할 수 있을까에 대한 고민중의 하나는 회원 가입 절차를 매우 간단하게 만드는 것입니다. 가입 시 요구하는 정보를 최소화하고 회원 가입절차가 큰 고민없이 이루어지도로 만드는 것이 필요합니다.

이렇게 회원가입을 간단히 할 수 있는 방법중의 하나가 바로 소셜 로그인입니다. 즉 페이스북이나 네이버와 같이 기존 소셜 네트워크에 가입합 정보를 끌어와 추가 정보 입력없이 소비자의 동의만으로도 쉽게 가입절차를 마칠 수 있습니다.

1. 워드프레스에서 소셜 로그인 구현 방법

워드프레스가 기본적으로 블러그에서 큰 강점을 가지고 있고, 로그인이 필요한 회원제 또는 쇼핑몰 구현은 상대적으로 수요가 작다고 할 수 있습니다.

이미 여러번 언급했듯이 한국에서는 큰 비용없이 접근 가능하는 쇼핑몰 솔류션들이 넘쳐나고, 상대적으로 워드프레스는 한국적 특성을 제대로 반영하지 못하고 있기 때문에 점점 밀리는 것 같아 보입니다. 이는 개인적인 판단으로 어던 데이타 기반해 판단하지는 않았습니다.

아무튼 워드프레스 쇼핑몰에서 일반인이 소셜 로그인을 구현하는 방법은 두가지 정도가 있습니다.

1.1. 한국형 회원관리 플러그인 활용, 소셜 로그인 구현

하나는 한국 특성을 반영한 회원관리 플러그인을 구입것이고, 또 하나는 외국에서 개발된 플러그인에 한국향 소셜 로그인 기능을 추가한 플러그인을 활용하는 것이죠.

한국형 회원관리 플러그인은 코스모스팜 회원관리(88,000원), 단비 멤버스(99,000원), 망보드 비즈니스(회원관리) 패키지(55,000원) 등이 있습니다.

코스머스팜 회원관리를 관심있다면 관련 팁을 정리했던 “코스머스팜 회원관리 플러그인 최적화 관련 팁”을 참고해 보시기 바랍니다.

이러한 한국형 회원관리 플러그인들은 한국 실정에 맞추어 한국에서 널리 사용하는 주요 소셜 미디어를 통한 로그인을 지원하고 상대적으로 원활한 사후 지원과 커뮤니케이션이 된다는 등 장점이 있죠.

그렇지만 상대적으로 비용이 높고, 대부분 WP-Members Membership Plugin과 같은 무료 플러그인 기반의 멤버쉽 플로그인 기반하에 설계되었기 때문에 일정 한계가 있습니다.

• 소셜 로그인이나 한국 주소 검색과 같은 부분 기능만 필요한 경우에도 멤버쉽 플러그인 전체를 사용해야 하므로 다소 무거워집니다.
• Memberpress와 같이 매우 뛰어난 유료 멤버쉽 플러그인을 사용하고 싶은 경우 중복 기능과 충돌 가능성이 있습니다.

1.2. 소셜 로그인 플러그인 + 한국 소셜 네트워크 추가 방법

위에서 소개한 한국형 회원관리 플러그인을 사용하지 않는 경우는 외국에서 개발된 소셜 로그인 플러그인에 한국 소셜 네트워크를 추가하는 방법이 있습니다.

외국에서 개발된 소셜 로그인을 지원하는 플러그인은 굉장히 많이 있습니다. 수요가 많은 만큼 다양한 플러그인과 관련 기능들이 발전되어 있습니다.

그러나 대부분 소셜 로그인 플러그인들은 네이버나 카카오와 같은 한국에서 널리 사용되는 소셜 네타워크는 지원하지 않기 때문에 이를 추가해야하는데요. 이는 상당한 저문적인 영역이라 쉽지 않습니다.

현재 일반 사용자가 큰 어려움없이 소셜 로그인 플러그인에 한국의 소셜 네트워크를 추가하는 방법은 Miled라는 사람이 배포한 WordPress Social Login을 이용하는 것입니다.

다만 이 플러그인은 2.3.3 버젼 발표 후 2년전부터 업데이트가 되지 않고 있어 주의가 필요하긴 합니다. 그럼에도 불구하고 당장 대안이 없기때문에 이용할 수 밖에 없는 상황이긴 합니다.

다만 이 플러그인의 소스를 공개하는 GitHub에서는 3.01버젼이 준비되고 있어 조만간 업데이트가 이루어지지 않을까 싶습니다. 그렇지만 업데이트되는 3.01버젼은 기존과 다른 로직으로 설계되면서 이 업그레이드된 플러그인이 출시되면 네이버와 카카오 추가도 능력자분이 업데이트를 해줘야 사용 가능할 것 같습니다.

2. WordPress Social Login에 한국 소셜 네트워크 추가 방법

WordPress Social Login에 한국 소셜 네트워크 추가 방법엔 이미 여러 사이트에 관련 방법을 설명하고 있습니다.

워드님이 정리한 “워드프레스용 네이버 및 카카오 소셜 로그인 플러그인”라는 글을 참고하시면 전체적인 개념을 잡기 쉽습니다.

2.1. 먼저 WordPress Social Login 플러그인 설치하기

당근 WordPress Social Login 플러그인을 설치해야겠죠. 이 플러그인은 한참동안 업데이트가 이루어지지 않았기 때문에 워드프레스 플러그인 검색 시 우선 순위가 떨어집니다.

2019년 5월 현재 키워드를 Wordpress social login으로 검색 시 8번째 나오는 군요.

2.2. wsl-login-extends-naver 플러그인을 설치

다음은 WordPress Social Login이라는 플러그인에서 네이버와 카카오를 추가해주는 wsl-login-extends-naver 플러그인을 설치하는 것입니다.

이 플러그인은 워드프레스 플러그인 추가에서 키워드로 naver를 입력해 찾아 설치할 수 있습니다.

2.3. WordPress Social Login 플러그인 세팅

이 wsl-login-extends-naver 플러그인 설치 후 WordPress Social Login 플러그인 세팅으로 이동합니다.

그러면 네이버와 카카오 아이콘이 우측 Add more providers에 나타난 것을 알 수 있수 있죠. 여기서 네이버와 카카오 아이콘을 클릭하면 네이버와 카카오 관련 세팅할 수 있는 상태로 변합니다.

2.4. 네이버와 카카오의 Application Key와 Application Secret 입력

여기서 네이버와 카카오의 Application Key와 Application Secret를 입력해 세팅을 완료합니다.

네이버와 카카오의 Application Key와 Application Secret를 얻는 방법은 기존에 많이 소개되었기 때문에 이를 자세히 잘 설명한 글을 소개하는 것으로 마치도록 하겠습니다.

• 네이버 소셜 로그인 설정 방법
• 카카오 소셜 로그인 설정 방법

2.5. 네이버와 카카오 개발자 사이트에서 리디렉션 URL 등록

아마 마지막으로 네이버와 카카오 개발자 사이트에서 유효한 OAuth 리디렉션 URL을 추가해 주어야합니다.

WordPress Social Login 플러그인의 유효한 OAuth 리디렉션 URL, 또는 Callback URL은 아래와 같습니다.

• 네이버 Callback URL : https://MyDomain.com/wp-content/plugins/wordpress-social-login/hybridauth/callbacks/naver.php
• 카카오 Callback URL : /wp-content/plugins/wordpress-social-login/hybridauth/callbacks/kakao.php

네이버나 페이스북 등 대부분 소셜 미디어들은 이러한 Callback URL을 여러개를 등록할 수 있지만 카카오는 단 하나만 등록할 수 있으니 참고 하시기 바랍니다.

그리고 네이버는 소셜 로그인 기능을 사용하기 위해서는 승인을 받아야 합니다. 이승인 절차에는 네이버에서 가져오는 정보를 어떻게 활용하고 있는지를 스크린 캡워해서 증명해야 하고, 증명이 부족하다싶으면 거절당하기 싶습니다.

저도 세번째에 대대적으로 증빙을 보강해서 겨우통과할 수 있었습니다.

3. WordPress Social Login 플러그인 사용 시 문제 및 해결 방안

WordPress Social Login 플러그인은 앞서서 이야기한대로 오랬동안 업데이트가 이루어지지 않아서인지 사용 시 몇가지 문제에 부딕치게 됩니다.

적용하는 동안 발견했던 문제와 그 해결 방안에 대해서 간단히 소개합니다.

3.1. “404 Not Found” when checking WSL end-points

처음 이 플러그인을 설치하고 소셜 로그인을 시도해 보니 404 Not Found라는 메세지와 함게 작동하지 않는 현상을 만날 수 있습니다.

WordPress Social Login 플러그인에는 WordPress Social Login Diagnostics이라는 메뉴가 있어 상황을 진단해 볼 수 있는 기능이 있는데요. 이 진단 기능을 사용하면 아래와 같은 메세지를 만날 수 있습니다.

Error: Your web server returned “404 Not Found” when checking WSL end-points. This issue usually happen when :

1. Your web host uses mod_security to block requests containing URLs (eg. hosts like HostGator, GoDaddy and The Planet). On this case, you should contact your provider to have WSL end-points urls white-listed.

2. There is a .htaccess file that prevent direct access to the WordPress plugins directory.

In any case, WSL requires this url to be white-listed:

저는 웹서버로 nginx를 사용하고 있는데요. 위 진단에서는 Apache 서버를 기준으로 진단하고 해결책을 제시하고 있어서 별 도움이 안되었습니다.

XETOWN과 같은 고수들이 모여있는 사이트에도 질의를 남겼고, 코스모스팜 커뮤니티에도 관련 질문을 남겼지만 별 도움이 안되더군요.

결국 기존 nginx configure 파일에 적용된 규칙들을 참조해 아래와 같은 코드를 추가했습니다. 그랬더니 문제가 해결되었습니다.

location /wp-content/plugins/wordpress-social-login/hybridauth/ { allow all; }Code language: PHP (php)

3.2. 트위터의 Callback URL 세팅 관련

트위터 설정 시 Callback URL 설정 시 플러그인에서 제시하는 URL이 트위터에서는 먹히지 않습니다.

WordPress Social Login 플러그인에서는 Callback URL로 다음을 사용하라고 하고 있죠. 이는 먹히지 않습니다.

https://MyDomain.com/wp-content/plugins/wordpress-social-login/hybridauth/?hauth.done=TwitterCode language: PHP (php)

이에 대한 해결책은 CallBack URL로 다음으로 대체 사용하면 됩니다. 이는 “Twitter App Error”라는 플러그인 Support에 올라온 이슈에 대한 해결책에서 인용했습니다.

https://Mydomain.com/wp-content/plugins/wordpress-social-login/hybridauth/Code language: PHP (php)

3.3. 차단된 URL

초기 세팅 시 아래와 같이 차단된 URL이라는 메세지가 나오는 경우가 있습니다.

차단된 URL: 리디렉션 URI가 앱의 클라이언트 OAuth 설정의 화이트리스트에 없으므로 리디렉션하지 못했습니다. 클라이언트 및 웹 OAuth 로그인이 설정되었는지 확인하고 모든 앱 도메인을 유효한 OAuth 리디렉션 URI로 추가하세요.

이는 CallBack URL 설정이 제대로 안된 경우이니 개발자 사이트로 들어가 CallBack URL을 제대로 등록해주면 됩니다.

3.4. 페이스북 에러

마찬가지로 이 플러그인이 오랬동안 업데이트가 이루어지지 않았기 때문에 페이스북 사용에 문제가 있습니다.

페이스북이 제공하는 정보가 변경되면서 아래와 같은 user_friends 이슈가 발생하는데요.

Invalid Scopes: This message is only shown to developers. Users of your app will ignore these permissions if present. Please read the documentation for valid permissions at: https://developers.facebook.com/docs/facebook-login/permissions

이 문제를 해결하기 위해서는 코드 추가가 필요합니다. 이에 대한 해결은 이 이슈를 제기한 Error when logging with Fb에서 찾을 수 있습니다.

우선 FTP로 들어가서 /wp-content/plugins/wordpress-social-login/로 이동합니다.
이 폴더에 있는 wp-social-login.php 파일을 편집기로 엽니다.
이 파일의 맨 아래에 아래 코드를 추가하고 저장합니다.

function wsl_change_default_permissons( $provider_scope, $provider )
{
    if( 'facebook' == strtolower( $provider ) )
    {
        $provider_scope = 'email, public_profile';
    }

    return $provider_scope;
}

add_filter( 'wsl_hook_alter_provider_scope', 'wsl_change_default_permissons', 10, 2 );Code language: PHP (php)

3.5. 번역

아무래도 이 플러그인은 외국에서 개발된 플러그인으로 번역 문제가 대두됩니다. 특히 고객들에게 보여지는 메세지도 전부 영어로 나오기 때문에 당혹스러울 수 있습니다.

전체는 아니지만 일부 번역 파일이 인터넷에 공개되어 있는데요. 아래 사이트에서 다운받아 사용할 수 있습니다.

WordPress Social Login 부분 한글화 파일(이전 버전)