우커머스 소셜 로그인 플러그인 - YITH WooCommerce Social Login

댓글 남기기
  • 네이버 블로그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 카카오스토리 공유하기

워드프레스 우커머스 사이트에서 페이스북, 트위터, 구글 등의 SNS 계정으로 로그인이 가능하도록 연동하려는 경우 우커머스 소셜 로그인 플러그인을 사용할 수 있습니다. 우커머스에 사용할 수 있는 무료 플러그인으로 YITH WooCommerce Social Login, Social Login Lite For WooCommerce 등이 있습니다.

YITH 플러그인에는 무료 버전과 프리미엄 버전이 있습니다. 소셜 아이콘 변경 등의 추가적인 기능이 필요 없다면 무료 버전으로도 충분할 것 같습니다. 여기에서는 무료 버전을 사용하여 페이스북 연동 방법에 대해 간략히 살펴보겠습니다.

몇 년 전에 페이스북 계정으로 로그인하도록 연동하는 방법에 대하여 다룬 적이 있었는데, 인터페이스가 조금 달라진 것 같습니다. 페이스북 소셜 로그인 연동을 활성화하려면 사이트에 유효한 보안서버 SSL 인증서가 설치되어 있어야 합니다.

네이버, 다음, 카카오 계정 등으로 로그인하도록 연동하려는 경우 단비스토어의 One Stop Social Login과 같은 플러그인이 있었지만 지금은 판매가 중단된 것 같고, 대신 얼티밋 멤버 코리아에서 이 기능이 제공되는 것 같습니다.

우커머스 소셜 로그인 플러그인 - YITH WooCommerce Social Login

우커머스 소셜 로그인 플러그인 - YITH WooCommerce Social Login 무료 버전

YITH WooCommerce Social Login 플러그인을 사용하면 페이스북, 트위터, 구글 계정으로 워드프레스 사이트에 로그인하거나 회원가입할 수 있습니다.

이 플러그인은 무료 버전과 유료 버전이 있으며 무료 버전에서는 다음과 같은 기능을 제공합니다.

  • 페이스북으로 로그인
  • 트위터로 로그인
  • 구글로 로그인
  • "Login with" 문구 사용자 지정 가능
  • 체크아웃 페이지에서 텍스트 사용자 지정 가능

플러그인을 설치하려면 관리자 페이지에서 플러그인 > 새로 추가를 클릭하고 "YITH WooCommerce Social Login"을 검색하여 설치하고 활성화하면 됩니다.

워드프레스 플러그인 설치

플러그인을 설치하고 활성화했다면 좌측의 메뉴에서 YITH > Social Login을 클릭하여 설정 페이지로 이동하여 설정할 수 있습니다.

우커머스에서 페이스북 로그인 연동하기

페이스북 계정으로 로그인/회원가입이 가능하도록 연동하는 방법에 대해 간략히 살펴보겠습니다.

페이스북 로그인을 활성화하려면 Facebook App ID와 Facebook Secret 정보가 필요합니다.

우커머스 소셜 로그인 - 페이스북 연동

이 정보를 얻기 위해서는 페이스북 개발자 사이트(https://developers.facebook.com/apps)를 방문하여 새로운 앱을 만들어야 합니다.

Facebook for Developers 사이트에 접속하면 생성된 앱 목록이 표시됩니다. 새 앱 추가 (Add a New App)를 클릭합니다.

페이스북 개발자 사이트 - 앱 만들기

새 앱 ID 만들기 (Create a New App ID) 팝업 창이 표시되면 표시 이름 (Display Name)연락처 이메일 (Contact Email)을 입력하고 앱 ID 만들기 (Create App ID)를 클릭합니다.

페이스북 앱 ID 만들기 - 소셜 로그인 연동

제품 추가 (Select a Product) 페이지에서 Facebook 로그인 (Facebook Login)설정 (Set Up) 버튼을 클릭합니다.

Facebook 로그인 앱 만들기 - 페이스북 로그인 연동

웹 (Web) 옵션을 선택합니다.

우커머스 페이스북 로그인 연동

사이트 URL (Site URL)을 입력하고 Save를 클릭합니다.

워드프레스 페이스북 로그인 연동 설정 - 페이스북 앱 만들기

나머지 2 (JavaScript용 Facebook SDK 설정), 3 (로그인 상태 확인), 4 (Facebook 로그인 버튼 추가), 5 (다음 단계) 옵션은 건너뛰도록 합니다. 앱 검토는 요청하지 않도록 합니다.

여기까지 진행했다면, 중요한 설정 하나면 하면 거의 완료됩니다. 워드프레스 관리자 페이지 > YITH > Social Login > Facebook Settings에서 Callback URL을 복사합니다.

YITH 우커머스 소셜 로그인 페이스북 설정

복사한 콜백 URL을 페이스북의 제품 > Facebook 로그인 > 설정 섹션의 "유효한 OAuth 리디렉션 URI (Valid OAuth redirect URIs)" 필드에 붙여넣기 합니다.

워드프레스 페이스북 로그인 회원가입 연동

설정 > 기본 설정을 클릭하면 앱 ID앱 시크릿 코드를 확인할 수 있습니다. 이 ID와 코드를 YITH Social Login 플러그인의 페이스북 설정 섹션에 입력하도록 합니다.

우커머스 페이스북 로그인 회원가입 연동

네임스페이스, 앱 도메인, 개인정보처리방침 URL, 서비스 약관 URL을 입력하고 상단의 "개발 중" 단추를 클릭하면 "라이브됨"으로 바뀝니다.

이제 페이스북 계정으로 로그인을 시도하면 정상적으로 로그인이 될 것입니다. 만약 "URL을 읽어들일 수 없음: 앱 도메인에 포함되어 있지 않은 URL입니다" 오류 메시지가 표시된다면 위의 그림에서 앱 도메인에 도메인을 입력해보시기 바랍니다.

소셜 로그인 아이콘과 문구가 마음에 들지 않게 표시되는 경우 간단한 CSS를 사용하여 조정할 수 있습니다.

우커머스 내 계정 페이지에 페이스북 로그인 아이콘 추가

무료 버전만으로 만족하지 못하는 경우 프리미엄 버전을 고려해볼 수 있지만 가격 때문에 굳이 유료 버전을 이용할 필요는 없을 것 같습니다. 무료 버전과 프리미엄 버전의 기능에 대한 자세한 정보는 플러그인 페이지를 참고해보세요.

참고



댓글 남기기

Leave a Comment