SSO, SNS로그인으로 타 서비스의 회원정보와 쇼핑몰 로그인을 연동하고 싶어요. – 카페24 Help Center

[관리자] 쇼핑몰 설정 > 고객 설정 > '회원 가입 · 로그인 > SSO 로그인 연동 관리' 에서 SSO 서비스로 자사 통합멤버십 등 로그인 서비스와 연결할 수 있어요.
[관리자] 쇼핑몰 설정 > 고객 설정 > '회원 가입 · 로그인 > SNS 로그인 연동 관리' 에서 SNS 로그인 서비스를 설정하실 수 있어요.

자세히 알아보기

SSO 로그인이 무엇인가요?

SNS 로그인 연동 관리에서 제공하지 않는 다른 사이트(예: 자사 통합 멤버십 등)의 회원 정보를 이용하여 쇼핑몰에 로그인 할 수 있도록 연동할 수 있어요.

SSO 로그인 연동을 원하시는 경우에는 [관리자] 쇼핑몰 설정 > 고객 설정 > '회원 가입 · 로그인 > SSO 로그인 연동 관리' 를 이용해 주세요.

SSO 로그인 설정 방법(기본 가이드)

[관리자] 쇼핑몰 설정 > 고객 설정 > '회원 가입 · 로그인 > SSO 로그인 연동 관리' 로 이동해 주세요.
'신규 연동 등록' 을 선택하고, '사용 여부' 를 '사용함' 으로 설정 후 저장해 주세요.

SSO 로그인 연동을 위하여 아래를 항목을 입력 또는 선택해 주세요.

연동 서비스 명 (필수)	로그인을 연동 시키는 서비스명 또는 회사명을 입력해주세요. ex) Cafe24
Client 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 로그인 설정 방법(상세 기술 가이드)

변수 정보

[변수] : SSO 설정 페이지에서 입력한 값
[변수] : 카페24에서 셋팅하는 값
[변수] : 연동서비스에서 셋팅해야 하는 값

로그인 페이지 및 Authorization Code 발급 요청

사용자가 연동서비스 로그인 버튼을 클릭하면, 카페24에서 Authorization Code 발급을 받기 위해 Authorize Redirect URL에 작성한 URL로 요청해요.

상세내용

요청	method	설명
변수	GET	[AUTHORIZE REDIRECT URL]?response_type=code&client_id=[CLIENT_ID]&state= [STATE] &redirect_uri= [REDIRECT_URI]
치환	GET	https://api.authorize?response_type=code&client_id=63TxKJEKuczELEdPzQju&state=178a00758.....4bd9dc96c7&redirect_uri=https%3A%2F%2F[도메인]%2FApi%2FMember%2FOauth2ClientCallback%2Fsso%2F

연동서비스 미로그인 상태
- 연동서비스 미로그인 상태일 경우 연동서비스의 로그인 페이지를 제공해야하고, 쇼핑몰 회원은 계정 정보를 입력하여 로그인해요.

Authorization Code 반환

회원 로그인이 되면, Access Token 발급을 위해 Authorization Code를 카페24로 반환해주세요.

상세내용

요청	method	설명
변수	GET	[REDIRECT_URI] ?code= [CODE] &state= [STATE]
치환	GET	https%3A%2F%2F[도메인]%2FApi%2FMember%2FOauth2ClientCallback%2Fsso?code=[CODE]&state=178a00758.....4bd9dc96c7

Authorization Code로 Access Token 교환 요청

카페24가 Access Token 발급하기 위해 연동서비스로 Authorization code를 가지고 요청해요.

상세내용

요청

method

URL

설명

변수

POST

[ACCESS TOKEN RETURN API]

Parameter	변수
grant_type	authorization_code
client_id	[CLIENT_ID]
client_secret	[CLIENT_SECRET]
redirect_uri	[REDIRECT_URI]
code	[CODE]
refresh_token	[REFRESH_TOKEN]

치환

POST

https://api.token

Parameter	변수
grant_type	authorization_code
client_id	63TxKJEKuczELEdPzQju
client_secret	jCHLeke2iS
redirect_uri	https%3A%2F%2F[도메인]%2FApi%2FMember%2FOauth2ClientCallback%2Fsso%2F
code	63TxKJEKuczELEdPzQju
refresh_token	63TxKJEKuczELEdPzQju

Access token 반환
- 연동서비스에서 Authorization Code로 인증이 완료되면 Access Token을 JSON 포맷으로 응답해주세요.
- 상세내용
  
  요청 type
  설명
  
  변수 JSON
  {
  
  "access_token": [ACCESS_TOKEN]
  
  }

Access Token으로 사용자 정보 요청

카페24는 쇼핑몰에서 활용할 사용자 정보를 획득하기 위해 연동서비스로 사용자 정보를 요청해요.

상세내용

요청

Method

URL

설명

변수

POST

[USER INFO RETURN API]

Parameter	변수
access_token	[ACCESS_TOKEN]

치환

POST

https://api.profile

Parameter	변수
access_token	[ACCESS_TOKEN]

사용자 정보 반환
- 연동서비스는 사용자 정보를 JSON 포맷으로 응답해주세요.
- 상세내용
  
  응답 type 설명
  
  변수 JSON {
  "id": [ID] ,
  "name": [NAME] .
  "email": [EMAIL]
  }
최초 로그인 경우
- 카페24쇼핑몰에 최초 로그인(=회원가입)한 회원의 경우, 카페24에서 추가 정보 및 약관 페이지를 노출하여 몰에서 설정한 사용자 정보를 추가로 입력 받을 거예요.

SNS 로그인이란?

SNS 로그인이란, 다른 서비스 계정을 이용해 카페24 쇼핑몰에 로그인 할 수 있도록 하는 기능이에요.

SNS 로그인 기능은 [관리자] 쇼핑몰 설정 > 고객 설정 > '회원 가입 · 로그인 > SNS 로그인 연동 관리' 에서 사전 설정이 필요한 기능이에요.
쇼핑몰 고객은 타 서비스의 본인 계정(아이디)을 가지고 있어야 쇼핑몰에서 SNS 로그인을 이용할 수 있어요.

Info

SNS 로그인 기능은 OAuth 2.0 방식을 기반으로 제작 되었어요. 서비스 플랫폼에서 Client(App) ID와 Client(App) Secret을 발급 받아야 해요.
SNS 로그인은 Single Sign-On(SSO, 단일 계정 로그인)를 이용해 한 번의 인증으로 다른 여러 서비스에 접근할 수 있도록 하는 통합 인증 방식이에요.

SNS 로그인 설정 방법

[관리자] 쇼핑몰 설정 > 고객 설정 > '회원 가입 · 로그인 > SNS 로그인 연동 관리' 로 이동해 주세요.
각 SNS의 로그인 사용 여부를 '사용함'으로 변경해 주세요.
SNS 로그인 연동을 위하여 필요한 Client(App) ID와 Client(App) Secret를 아래를 참고하여 발급 받은 후 입력해 주세요.
쇼핑몰에 로그인 버튼이 표시되도록 디자인 설정이 필요해요.
- PC/모바일 : 쇼핑몰 로그인 페이지에 SNS 로그인 버튼을 표시하고 싶어요.
- 플러스앱 이용 쇼핑몰인 경우, 아래 항목의 디자인 설정이 가능해요.
  - 로그인 버튼명 : 로그인 버튼 위에 표시될 문구를 입력하세요. 예) OOO 계정으로 로그인
  - 텍스트 색상 : '회원 로그인' 영역을 클릭하여 표시되는 '편집' 버튼을 클릭해 주세요.
  - 버튼 이미지 : 버튼의 배경이 되는 이미지에요. (이미지 사이즈 656 × 80px / 파일형식 png / 무늬가 없는 단색 디자인을 권장합니다.)

Caution - 플러스앱 심사 주의사항

SNS 로그인을 제공하고 있는 서비스에서 플러스앱을 이용하는 경우, 각 SNS 서비스에서 정의한 디자인 가이드를 따라 SNS 로그인 버튼 디자인을 제공해야 해요.

만약 SNS사에서 정의한 디자인이 아닌 경우, 구글 플레이스토어 또는 애플 앱스토어에서 플러스앱을 심사할 때 반려당할 수 있으니 주의해주세요.

연관 콘텐츠

응답	type	설명
변수	JSON	{ "id": [ID] , "name": [NAME] . "email": [EMAIL] }