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

간편 로그인 기능을 사용하기 위해, 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

    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

    {
      "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 로 이동합니다. 이를 통해 프론트 화면에도 각 간편 로그인 제공사에서의 인증 성공 여부를 전달합니다.

• 예시코드

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