드림 간편 로그인 소개
네이버, 카카오, 구글, 페이스북 회원가입과 로그인을 지원합니다. 원하는 소셜 로그인만 선택해서 사용하는 것도 가능합니다. UI, 디자인을 자유롭게 변경 가능하여 색상, 모양(아이콘, 텍스트 버튼)을 원하는 스타일로 지정할 수 있습니다. 모든 언어를 지원합니다. 소셜 로그인을 사용하는 고객들에 대한 로그인 차트와 통계등 분석툴을 제공합니다. 쇼피파이 플러스에서 사용되는 멀티패스를 지원합니다.
소셜 로그인 설치
소셜 로그인은 각 소셜 사이트에서 제공하는 인증방법을 통해 로그인을 손쉽게 하는 시스템입니다.
고객사는 각 소셜 사이트의 개발자페이지에 회원가입을 하고 API를 발급받은 후 소셜 로그인 사용승인을 받아야 합니다. 앱 승인까지 약 1~7일의 기간이 걸릴 수 있습니다.
1. 네이버 개발자센터
https://developers.naver.com/
2. 카카오비즈니스
https://developers.kakao.com/
3. 구글 개발자 콘솔
https://console.cloud.google.com/
4. 페이스북 개발자
https://developers.facebook.com/
소셜 로그인 기능을 사용하려면 앱과 상관없이 해당 작업은 반드시 해야하는 작업입니다.
App(API) Setup - English
스니펫 설치
마지막으로 스니펫을 설치해야 합니다. 스니펫은 소셜 로그인을 스토어에 노출시켜주는 코드를 말합니다.
소셜 로그인은 로그인 페이지와 회원가입 페이지 두 곳에 보여야 합니다.
테마마다 로그인과 회원가입페이지를 구성하는 파일이 다르기 때문에 수동으로 직접 설치해야 합니다.
*Themeforest에서 구입한 저가형 테마는 디자인이 불안정한 경우가 많습니다. 이 경우 소셜 로그인 앱의 디자인이 아름답게 나오지 않을 수 있으니, 이 경우 쇼피파이에서 판매하는 테마를 사용해야 합니다.
스니펫 코드 보기로그인 페이지 설치방법
쇼피파이 관리자 - 온라인 스토어 - 테마 - 코드편집으로 들어갑니다. 파일검색에서 login 으로 검색하면 아래 3개파일 혹은 비슷한 이름의 파일이 로그인 페이지로 사용됩니다.
Templates 메뉴의 customers/login.liquid 파일
Sections 메뉴의 login-form.liquid 파일
Snippets 메뉴의 login-form.liquid 파일
해당 파일에서 아래의 스니펫 코드를 추가합니다.
{%- render 'sl-social-login-app' -%}
위의 스니펫 코드는 아래 코드의 위/아래 에 추가하는 것이 일반적이니 검색을 통해 아래 코드를 찾아 위쪽 혹은 아래쪽에 스니펫 코드를 추가합니다.
{%- form ‘customer_login’, novalidate: ‘novalidate’ -%}
혹은 {% form 'customer_login' %}
회원가입 페이지 설치 방법
쇼피파이 관리자 – 온라인스토어 – 테마 – 코드 수정으로 들어갑니다. 파일검색에서 register로 검색하면 아래 3개파일 혹은 비슷한 이름의 파일이 로그인 페이지로 사용됩니다.
Templates 메뉴의 customers/register.liquid 파일
Sections 메뉴의 register-form.liquid 파일
Snippets 메뉴의 register-form.liquid 파일
파일을 열어서 아래의 스니펫 코드를 추가합니다.
{%- render 'sl-social-login-app' -%}
위의 스니펫 코드는 아래 코드의 위/아래 에 추가하는 것이 일반적이니 검색을 통해 아래 코드를 찾아 위쪽 혹은 아래쪽에 스니펫 코드를 추가합니다.
{%- form ‘create_customer’, novalidate: ‘novalidate’ -%}
혹은 {% form create_customer' %}