주 콘텐츠로 건너뛰기

타 서비스의 회원정보와 쇼핑몰 로그인을 연동하고 싶어요.

[관리자] 쇼핑몰 설정 > 고객 설정 > '회원 가입 · 로그인 > SNS 로그인 연동 관리' 에서 설정하실 수 있어요.

자세히 알아보기

SNS 로그인이란?

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

 

Info

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

 

SNS 로그인 설정 방법

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

Note - 카카오싱크 간편 설정 방법

카카오싱크란, 원클릭으로 회원가입이 가능한 카카오의 간편가입 서비스에요.

 

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

SNS 로그인을 제공하고 있는 서비스에서 로그인 버튼에 대한 디자인 가이드가 있는 경우, 서비스가 정의한 가이드를 따라 디자인을 수정해야 합니다. 그렇게 하지 않을 경우, 구글 플레이스토어 또는 앱스토어에서 플러스앱 심사 시 거절 당할 수 있습니다.

 

SSO 로그인

SNS 로그인 연동 관리에서 제공하지 않는 다른 사이트의 회원 정보를 이용하여 쇼핑몰에 로그인 할 수 있도록 연동할 수 있어요. SSO 로그인 연동을 원하시는 경우에는 [관리자] 쇼핑몰 설정 > 고객 설정 > '회원 가입 · 로그인 > SNS 로그인 연동 관리'에서 '상점관리 > 운영관리 > SSO 로그인 연동 관리' 를 이용해 주세요.

 

SSO 로그인 설정 방법

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

    약관동의 사전 진행 여부

    연동서비스에서 회원에게 쇼핑몰 이용약관 및 개인정보 수집 동의를 사전에 완료한 경우, 회원에게 노출되는 추가 팝업을 생략할 수 있어요.

  4. SSO 로그인 연동 설정 후 '저장' 버튼을 클릭하면 SSO 로그인 연동이 완료되어요.
  5. 쇼핑몰에 로그인 버튼이 표시되도록 디자인 설정이 필요해요.

SSO 로그인 설정 방법 - 기술 가이드

항목 별 설명은 다음과 같아요.

  1. 연동 서비스명 (필수) : 로그인을 연동 시키는 서비스명 또는 회사명
    • 예시) Cafe24

  2. Client ID (필수) : Client를 등록할 때 발급 받은 Client ID
    • 예시) 63TxKJEKuczELEdPzQju

  3. Client Secret (필수) : Client를 등록할 때 발급 받은 Client Secret
    • 예시) jCHLeke2S

  4. Authorize Redirect URL (필수) : 로그인을 요청하는 서비스의 OAuth 로그인 페이지 URL
  5. Access Token Return API (필수) : 토근 요청 URL
  6. 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 변수
grant_type authorization_code
client_id [CLIENT_ID]
client_secret [CLIENT_SECRET]
redirect_uri [REDIRECT_URI]
code [CODE]
refresh_token [REFRESH_TOKEN]

Parameter 치환 POST

 

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

 응답 type

설명

변수 JSON {access_token=[ACCESS_TOKEN]}

 

3) 유저 조회

 요청 method

설명

변수 URL -

[USER INFO RETURN API]

치환 URL - https://api/profile
Parameter 변수 POST

 

Parameter 변수
grant_type authorization_code

Parameter 치환 POST

 

Parameter 변수
access_token 2번에서 조회된 [ACCESS_TOKEN](토큰) 값

 응답 type

설명

변수 JSON {id=[ID], name=[NAME], email=[EMAIL]}

 

연관 콘텐츠

이 페이지가 도움이 되었나요?
현재 콘텐츠