에서 설정하실 수 있어요.
자세히 알아보기
SNS 로그인이란?
SNS 로그인이란, 다른 서비스 계정을 이용해 카페24 쇼핑몰에 로그인 할 수 있도록 하는 기능이에요.
- SNS 로그인 기능은 에서 사전 설정이 필요한 기능이에요.
- 쇼핑몰 고객은 타 서비스의 본인 계정(아이디)을 가지고 있어야 쇼핑몰에서 SNS 로그인을 이용할 수 있어요.
Info
- SNS 로그인 기능은 OAuth 2.0 방식을 기반으로 제작 되었어요. 서비스 플랫폼에서 Client(App) ID와 Client(App) Secret을 발급 받아야 해요.
- SNS 로그인은 Single Sign-On(SSO, 단일 계정 로그인)를 이용해 한 번의 인증으로 다른 여러 서비스에 접근할 수 있도록 하는 통합 인증 방식이에요.
SNS 로그인 설정 방법
- 로 이동해 주세요.
- 각 SNS의 로그인 사용 여부를 '사용함'으로 변경해 주세요.
- SNS 로그인 연동을 위하여 필요한 Client(App) ID와 Client(App) Secret를 아래를 참고하여 발급 받은 후 입력해 주세요.
- 쇼핑몰에 로그인 버튼이 표시되도록 디자인 설정이 필요해요.
- PC/모바일 : 쇼핑몰 로그인 페이지에 SNS 로그인 버튼을 표시하고 싶어요.
- 플러스앱 이용 쇼핑몰인 경우, 아래 항목의 디자인 설정이 가능해요.
- 로그인 버튼명 : 로그인 버튼 위에 표시될 문구를 입력하세요. 예) OOO 계정으로 로그인
- 텍스트 색상 : '회원 로그인' 영역을 클릭하여 표시되는 '편집' 버튼을 클릭해 주세요.
- 버튼 이미지 : 버튼의 배경이 되는 이미지에요. (이미지 사이즈 656 × 80px / 파일형식 png / 무늬가 없는 단색 디자인을 권장합니다.)
Caution - 플러스앱 심사 주의사항
SNS 로그인을 제공하고 있는 서비스에서 로그인 버튼에 대한 디자인 가이드가 있는 경우, 서비스가 정의한 가이드를 따라 디자인을 수정해야 합니다. 그렇게 하지 않을 경우, 구글 플레이스토어 또는 앱스토어에서 플러스앱 심사 시 거절 당할 수 있습니다.
SSO 로그인
SNS 로그인 연동 관리에서 제공하지 않는 다른 사이트의 회원 정보를 이용하여 쇼핑몰에 로그인 할 수 있도록 연동할 수 있어요. SSO 로그인 연동을 원하시는 경우에는 에서 '상점관리 > 운영관리 > SSO 로그인 연동 관리' 를 이용해 주세요.
SSO 로그인 설정 방법
- 로 이동해 주세요.
- '신규 연동 등록' 을 선택하고, '사용 여부' 를 '사용함' 으로 설정 후 저장해 주세요.
- SSO 로그인 연동을 위하여 아래를 항목을 입력 또는 선택해 주세요.
연동 서비스 명
(필수)로그인을 연동 시키는 서비스명 또는 회사명을 입력해주세요.
ex) Cafe24Client ID
(필수)Client를 등록할 때 발급받은 Client ID를 입력하세요.
ex) 63TxHUWKuczGkEdPzQju※ 변수 : [CLIENT_ID]
Client Secret (필수) Client를 등록할 때 발급받은 Client Secret을 입력하세요.
ex) jUHLehe2iS※ 변수 : [CLIENT_SECRET]
Authorize
Redirect URL (필수)로그인을 요청하는 서비스의 OAuth 로그인 페이지 URL을 입력하세요.
ex) https://api.Authorize※ 변수 : [AUTHORIZE REDIRECT URL]
Access Token
Return API
(필수)토근 요청 URL을 입력하세요.
ex) https://api.Token※ 변수 : [ACCESS TOKEN RETURN API]
User info return API
(필수)회원 정보 조회 URL을 입력하세요.
ex) https://api/profile※ 변수 : [USER INFO RETURN API]
약관동의 사전 진행 여부 연동서비스에서 회원에게 쇼핑몰 이용약관 및 개인정보 수집 동의를 사전에 완료한 경우, 회원에게 노출되는 추가 팝업을 생략할 수 있어요.
- SSO 로그인 연동 설정 후 '저장' 버튼을 클릭하면 SSO 로그인 연동이 완료되어요.
- 쇼핑몰에 로그인 버튼이 표시되도록 디자인 설정이 필요해요.
- 디자인 가이드 [공지/소식] > 업그레이드 > '[상점관리] SSO 로그인 연동 시 버튼 디자인 적용방법 안내 - HTML' 에 따라 디자인을 수정해 주세요.
SSO 로그인 설정 방법 - 기술 가이드
항목 별 설명은 다음과 같아요.
- 연동 서비스명 (필수) : 로그인을 연동 시키는 서비스명 또는 회사명
- 예시) Cafe24
- 예시) Cafe24
- Client ID (필수) : Client를 등록할 때 발급 받은 Client ID
- 예시) 63TxKJEKuczELEdPzQju
- 예시) 63TxKJEKuczELEdPzQju
- Client Secret (필수) : Client를 등록할 때 발급 받은 Client Secret
- 예시) jCHLeke2S
- 예시) jCHLeke2S
- Authorize Redirect URL (필수) : 로그인을 요청하는 서비스의 OAuth 로그인 페이지 URL
- Access Token Return API (필수) : 토근 요청 URL
- User info return API (필수) : 회원 정보 조회 URL
1) 인증 요청
| 요청 | method |
설명 |
| 변수URL | GET |
[AUTHORIZE REDIRECT URL]?response_type=code&client_id=[CLIENT_ID]&state=[STATE]&redirect_uri=[REDIRECT_URI] |
| 치환 URL | GET | https://api.Authorize?response_type=code&client_id=63TxKJEKuczELEdPzQju&state=[session_id]&redirect_uri=https%3A%2F%2F[도메 인]%2FApi%2FMember%2FOauth2ClientCallback%2Fsso%2F |
- 페이지 이동 변수 : [AUTHORIZE REDIRECT URL]?code=[CODE]&state=[STATE]
- 페이지 이동 치환 : https://api.Authorize?code=[CODE]&state=[STATE]
2) 토큰 요청
| 요청 | method |
설명 |
||||||||||||||
| 변수 URL | - |
[AUTHORIZE TOKEN URL] |
||||||||||||||
| 치환 URL | - | https://api.Token | ||||||||||||||
| Parameter 변수 | POST |
|
||||||||||||||
| Parameter 치환 | POST |
|
| 응답 | type |
설명 |
| 변수 | JSON | {access_token=[ACCESS_TOKEN]} |
3) 유저 조회
| 요청 | method |
설명 |
||||
| 변수 URL | - |
[USER INFO RETURN API] |
||||
| 치환 URL | - | https://api/profile | ||||
| Parameter 변수 | POST |
|
||||
| Parameter 치환 | POST |
|
| 응답 | type |
설명 |
| 변수 | JSON | {id=[ID], name=[NAME], email=[EMAIL]} |