[간편 로그인] SNS 연동 기능 개발 가이드

간편로그인 SNS 연동 프로세스

1) SNS 연동 정보 등록

SNS 간편로그인 연동 기능을 사용하기 위해서는 아래 메뉴에서 연동 정보를 등록하셔야 합니다.

• shop by pro : [설정 > 기본 정책 > 외부서비스 설정]

• shop by premium : [서비스 관리 > 쇼핑몰 관리]

어드민에서 연동 설정된 제공사에 한해, 회원가입 페이지 및 로그인 페이지에서 간편 로그인 기능이 제공됩니다.

GET /malls API 보기>

▶ 몰 정보 조회하기

쇼핑몰 전반에 대한 기본 정보와 설정 데이터를 조회할 수 있습니다.

• 어드민에 연동 설정이 되어있는 간편로그인 제공사 정보를 조회합니다.

• 해당 API 응답 값 중 openIdJoinConfig 내 providers 값을 통해 확인 가능합니다.

2) 간편 로그인 연동 URI 획득

간편 로그인 제공사(provider)이 각각 다르므로, provider 별 외부 화면을 노출하기 위해서는 먼저 아래 API를 호출하여 간편 로그인 연동 URI를 조회합니다.

GET /oauth/login-url API 보기>

▶ Openid 로그인 URI 조회하기

OpenID 로그 URI를 조회합니다.

• 해당 API 호출 시 3개 파라미터가 필요하며 각 파라미터에 대한 설명은 아래와 같습니다.

  • provider

    • 간편 로그인 제공사

    • 각 제공사 id 앞에 'ncp_' 를 추가 (ex) ncp_naver, ncp_payco, ncp_kakao, ncp_facebook)

  • state

    • CSRF 공격 방지용 토큰

    • client에서 생성한 숫자, 영문 대소문자로 이루어진 6자리의 random string

  • redirectUri

    • 인증 성공 후 이동할 쇼핑몰의 리다이렉트 URI (인코딩 필수)

    • 형식: https://{쇼핑몰 도메인}/{callbackUrl}

  • reauthenticate

    • 재인증 여부

    • 최초 간편로그인 연동 시 false로 입력

    • 재인증 필요한 경우 true로 입력

• 예시코드

  • Request URI

    Copy

    https://alpha-shop-api.e-ncp.com/oauth/login-url?provider=ncp_payco&redirectUri=https%3A%2F%2Fdevfe.shopby.co.kr%3A8283%2Fcallback%2Fauth-callback&state=Ixihzt

  • Responses

    Copy

    {
      "loginUrl": "https://demo-id.payco.com/oauth2.0/authorize?serviceProviderCode=FRIENDS&userLocale=ko_KR&client_id=3RDuVJewHrYNLwHLVfHK&redirect_uri=https://devfe.shopby.co.kr:8283/callback/auth-callback.html&response_type=code",
      "sessionKey": null
    }

3) 간편 로그인 제공사 (Provider) 화면 노출

획득한 간편 로그인 연동 URI 을 통해 간편 로그인 제공사 화면을 노출합니다. 기본 스킨의 경우 팝업 형태로 간편 로그인 제공사 화면을 제공합니다.

이후 각 간편 로그인 제공사(provider) 정책에 따라, 인증 절차를 수행합니다.

4) 쇼핑몰 redirectUri로 이동

간편 로그인 제공사 화면에서 인증에 성공 후, code 값과 함께 쇼핑몰 redirectUri 로 이동합니다. 이를 통해 프론트 화면에도 각 간편 로그인 제공사에서의 인증 성공 여부를 전달합니다.

• 예시코드

  Copy

  https://{쇼핑몰 도메인}/callback/auth-callback?code=XXXXXXXXXX