LogoLogo
  • 샵바이 스킨 알아보기
    • 샵바이 스킨 설명서
    • 오로라 리액트(통합형) 스킨 개발 가이드
    • 오로라 리액트(통합형) 릴리즈 노트
    • 오로라 바닐라(개별형) 릴리즈 노트
    • 1:1 문의하기
  • 오로라 개별형 스킨 개발 가이드
    • 개발 프로세스
      • 등록
      • 개발
        • 개발 환경 구성하기
        • 스킨 디렉토리 구조
      • 설치
    • 기본 API 이해하기
      • 샵바이 API 호출 가이드
        • OAuth 2.0 적용 가이드
      • 외부 스크립트 호출 가이드
    • 화면별 API 활용 가이드
      • 공통 영역
        • 공통 상단
        • 공통 하단
        • 디자인 팝업
        • 슬라이드 메뉴 (모바일 전용)
        • 최근 본 상품
      • 메인 화면
        • 배너 영역
        • 상품진열 영역
        • 인스타그램 연동
      • 회원가입
      • 로그인
      • 간편 로그인
      • 휴대폰 본인인증
      • 상품 리스트
      • 상품 상세
        • 상품 기본 정보
        • 상품 상세 배너 (모바일 전용)
        • 상품 상세정보 (탭)
        • 배송/반품/교환 안내 (탭)
        • 상품후기 (탭)
        • 상품문의 (탭)
        • 관련상품
      • 장바구니
      • 주문서
      • 마이페이지 > 쇼핑정보
        • 주문목록/배송조회
        • 취소/반품/교환 내역
        • 주문 상세
        • 좋아요
      • 마이페이지 > 혜택관리
        • 쿠폰
        • 적립금
      • 마이페이지 > 회원정보
        • 회원정보 수정
        • 회원탈퇴
        • 배송지 관리
      • 마이페이지 > 나의 게시글
        • 1:1 문의
        • 상품문의
        • 상품후기
      • 상품후기 게시판
      • 일반 게시판
      • 기획전
    • KCP 휴대폰 본인인증 연동 (iOS/AOS)
  • 앱 개발 가이드
    • [샵바이] 웹훅(webhook) 가이드
    • [고도몰] 웹훅(webhook) 가이드
  • 추천 콘텐츠
    • 추천 콘텐츠
      • [간편 로그인] SNS 연동 기능 개발 가이드
      • [공통] 마이페이 API 화면가이드
      • [엔터프라이즈] 선물하기 기능 (배송지 나중입력)
      • [엔터프라이즈] 카카오 싱크 신청 가이드
      • [엔터프라이즈] 카카오 싱크 회원가입 API 화면가이드
      • [엔터프라이즈] 이니렌탈(렌탈결제) API 화면가이드
      • [엔터프라이즈] 외부 회원 연동 가이드
      • [엔터프라이즈] 외부 적립금 전환 가이드
      • [엔터프라이즈] 외부 적립금 연동가이드
      • [엔터프라이즈] 사은품 API 화면가이드
      • [엔터프라이즈] PG신청 가이드 (2024/4/1 업데이트)
      • [엔터프라이즈] 카카오 픽셀 설치 가이드
      • [엔터프라이즈]정기결제(배송) API 화면가이드
      • [프로/엔터프라이즈] 쇼핑몰에 인스타그램 위젯을 적용해보세요!
      • [베이직/프로] 카카오싱크 신청 가이드
      • [웹훅 추가] 주문정보 웹훅(Webhook)이란?
      • [웹훅 추가] 회원정보 변경 및 회원탈퇴
      • [웹훅 추가] 앱 설치 및 삭제
      • shop by API, POSTMAN에 추가하기
      • [글로벌] 글로벌 기능 가이드
        • 사용 프로세스
          • 엑심베이 PG 계약
          • 개발 환경 세팅
          • shop by 어드민 세팅
          • 쇼핑몰 스킨 개발
            • 언어/통화 설정
            • 상품/전시 설정
            • 주문서 조회
            • 주문 예약하기
            • 회원 등록
        • 글로벌 주문/환불 프로세스
    • FAQ
      • 에러코드_ (1) 주문
      • 에러코드_ (2) 프로모션
      • 에러코드_ (3) 클레임
      • 쿠폰 코드 API 에러메시지 안내
      • 장바구니/주문결제 에러코드 안내
      • 배송타입 및 택배사코드 안내
      • 파트너어드민 매출내역 조회기준
      • shop api error response 안내
      • server API로 주문의 외부 유입경로 집계 방법
      • 은행코드 안내
      • 7/15 스킨 에디터 업데이트 주의사항
        • 모바일_업데이트 전 템플릿 코드
        • PC_업데이트 전 템플릿 코드
        • 업데이트 후/전 템플릿 코드 비교
      • [샵바이 엔터프라이즈] server API 호출방법
      • [샵바이 엔터프라이즈] 파트너 어드민에서 상품 노출은 미리 해두고, 판매 기간은 미래시점으로 설정할 수 있는 기능이 있을까요?
      • [샵바이 엔터프라이즈] 파트너사 담당MD 일괄변경 어떻게하나요?
Powered by GitBook
On this page
  • 간단소개
  • (예시) API소개 및 화면 가이드
  • 1) 회원가입 화면 (공통)
  • 2) 기존 가입 회원 카카오 계정 전환 팝업 화면

Was this helpful?

  1. 추천 콘텐츠
  2. 추천 콘텐츠

[엔터프라이즈] 카카오 싱크 회원가입 API 화면가이드

샵바이 엔터프라이즈의 카카오 싱크 기능을 사용하기 위해, shop API로 회원가입 화면을 어떻게 구현할 수 있을지 안내하기 위한 콘텐츠입니다.

간단소개

  • 기능요약

    • 카카오 싱크 연동을 통해 쇼핑몰 회원이 카카오 계정을 이용하여 간편 회원 가입을 할 수 있도록 제공합니다.

    • 대상 솔루션: 샵바이 엔터프라이즈 전용

    • 기능 배포일자: 2022-12-07

기존 카카오 간편가입(카카오 로그인)을 사용중인 쇼핑몰인 경우, 기존에 사용하고 있던 디벨로퍼스 앱을 동일하게 사용해 주세요.

다른 앱으로 연동을 진행할 경우 기존 카카오 간편가입(카카오 로그인) 회원은 로그인할 수 없으며, 신규 회원으로 가입 처리됩니다.


(예시) API소개 및 화면 가이드

아래 API들을 활용하여 카카오 싱크 기능을 활용한 화면을 구현할 수 있습니다.

카카오 싱크는

① 카카오 싱크 신규 회원으로 최초 가입하는 경우

② 기존 일반 회원으로 가입되어 있던 경우

③ 기존 일반 회원이 카카오 싱크로 신규 가입하는 경우로 구분됩니다.

회원가입 화면에서 카카오로 시작하기 버튼 출력 및 카카오로 로그인 팝업 출력은 경우와 관계없이 동일하게 구현할 수 있습니다.

① 카카오 싱크 신규 회원 최초 가입 프로세스

② 기존 일반 회원 카카오 싱크 회원으로 전환 프로세스

③ 기존 일반 회원 카카오 싱크 신규 회원가입 프로세스


1) 회원가입 화면 (공통)

  1. 카카오로 시작하기 버튼 출력

▶ 몰 정보 조회하기

몰 정보를 조회하는 API입니다.

  • 해당 API 호출하여 받은 응답 값 중 openIdJoinConfig > providers에서 kakao-sync 값이 있는 경우 카카오로 시작하기 버튼 생성 후 kakao-sync 값을 매핑 시킵니다.

  • 카카오 싱크 버튼 디자인 가이드는 카카오 싱크 리소스에서 확인 가능합니다.


  1. 카카오 로그인 팝업 출력

▶ OpenID 로그인 url 조회하기

OpenId 로그인 url 조회하기 위한 API 입니다.

  • 들어가야 하는 provider : ncp_kakao-sync ( ncp_ + 1번의 kakao-sync ) / redirectUri : 팝업 종료 후 리다이렉트할 파일 경로

  • 해당 API를 호출하여 받은 응답 값(loginUrl)으로 카카오 로그인 팝업을 출력합니다.

  • 카카오 간편 가입 완료 후 카카오 로그인 팝업이 종료될 때 팝업 URL에 파라미터로 code 값을 전달받습니다. 이때 OpenID 로그인 url 조회하기 API 호출 시 파라미터 값으로 넣은 redirectUri에 해당하는 파일에 code 값을 가져옵니다.


▶ Openid Access Token 발급하기

OpenId 회원의 AccessToken 발급하기 위한 API 입니다.

  • 들어가야 하는 provider : ncp_kakao-sync

  • ②에서 발급받은 code 값을 이용하여 해당 API를 호출합니다.

  • 해당 API 호출 후 받은 응답 값 중

    • (1) accessToken을 로컬 스토리지에 저장합니다.

    • (2) ordinaryMemberResponse 값도 저장합니다. (이후에 사용합니다.) -> ordinaryMemberResponse 값은 기존 일반 회원으로 가입되어 있던 경우를 체크하여 api로 내려주는 값입니다.

  • 해당 값은 기존 회원 가입 일과 기존 회원 마스킹 된 이메일 주소를 가지고 있습니다.

"ordinaryMemberResponse": {
        "email": "fp***@kakao.com",
        "signUpDateTime": "2021-11-29 10:04:18"
    }

2) 기존 가입 회원 카카오 계정 전환 팝업 화면

  • 기존 일반 회원으로 가입되어 있는 경우 카카오 싱크(간편 로그인) 회원으로 전환할 것인지, 카카오 싱크 계정으로 신규 가입할 것인지 선택이 가능합니다.

    • 이에 따라 추가로 팝업 커스텀 처리를 통해 쇼핑몰에 노출이 필요합니다.

  • 기존 일반 회원으로 가입되어 있던 상태에서 카카오 싱크 회원으로 전환 시 회원 유형이 쇼핑몰 회원에서 오픈아이디 회원으로 변경됨에 따라 기존 계정으로 로그인이 불가합니다. (아이디/ 비밀번호 찾기 불가)

    • 팝업 구현 시 카카오 계정으로 전환 이후 기존 계정으로 로그인이 불가하다는 안내 문구 출력이 필요합니다.

  • ordinaryMemberResponse 값을 노출 처리합니다.

  1. 아이디/ 비밀번호 입력 (인풋)

    • 간편 로그인 전환에 필요한 아이디와 비밀번호 인풋 창을 생성합니다.


  1. 간편 로그인으로 전환하기 (버튼)

▶ 기존 회원과 오픈 아이디 연동하기

기존 회원과 오픈 아이디 회원을 연동합니다.

  • 아이디와 비밀번호 인풋에 들어간 value 값, 기존의 accessToken을 사용하여 해당 api를 호출합니다. (아이디와 비밀번호는 기존 회원의 정보와 일치하는지 비교할 때 사용하기 때문에, 일치할 때만 성공적으로 호출됩니다.)

  • 아이디/ 비밀번호 입력 후 유효성 검사 실패 시, 그에 따른 알럿 메세지가 출력되어야 합니다.

  • 호출 성공 시 기존의 accessToken을 삭제 후, Response 값으로 받은 새로운 accessToken을 로컬 스토리지에 저장합니다.

  • 기존 회원이 휴면 처리된 상태인 경우 간편 로그인으로 전환되지 않아 해당 api 호출 시 실패 처리됩니다. 호출 실패 후 발생하는 에러코드는 M0020이며, 해당 에러코드를 통해 "입력하신 아이디는 휴면상태의 계정입니다. 기존 회원으로 로그인 후 휴면상태를 해지해 주세요."와 같은 알럿 창을 출력시키거나 휴면회원 전환 페이지로 이동 후 휴면회원 해지 시 다시 카카오 계정 전환 팝업으로 이동합니다.


  1. 카카오 계정으로 신규 가입하기 (버튼)

▶ 오픈 아이디 회원가입 처리하기

오픈 아이디를 사용한 회원 가입 처리입니다.

  • 이전에 가지고 있던 accessToken을 활용하여 해당 api 호출이 정상적으로 된 경우 회원 상태가 ACTIVE로 변경되면 로그인 처리합니다.

Previous[엔터프라이즈] 카카오 싱크 신청 가이드Next[엔터프라이즈] 이니렌탈(렌탈결제) API 화면가이드

Last updated 3 days ago

Was this helpful?

GET /malls

GET /oauth/login-url

GET /oauth/openid

POST /profile/synchronize

POST /profile/openid

API 보기>
API 보기>
API 보기>
API 보기>
API 보기>