> For the complete documentation index, see [llms.txt](https://workspace-help.nhn-commerce.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://workspace-help.nhn-commerce.com/contents/recommended/sns.md).

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

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

<figure><img src="/files/YJWvWJdiESqb7pvDnJQe" alt=""><figcaption></figcaption></figure>

### **1) SNS 연동 정보 등록**

<figure><img src="/files/x7M9Wd0cOpaEm9AbmuBs" alt=""><figcaption></figcaption></figure>

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

* shop by pro : \[설정 > 기본 정책 > 외부서비스 설정]
* shop by premium : \[서비스 관리 > 쇼핑몰 관리]

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

> **GET /malls** [**API 보기>**](https://docs.shopby.co.kr/?url.primaryName=admin/#/Mall/get-malls)
>
> ▶ 몰 정보 조회하기
>
> 쇼핑몰 전반에 대한 기본 정보와 설정 데이터를 조회할 수 있습니다.

* 어드민에 연동 설정이 되어있는 간편로그인 제공사 정보를 조회합니다.
* 해당 API 응답 값 중 openIdJoinConfig 내 providers 값을 통해 확인 가능합니다.

***

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

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

> **GET /oauth/login-url** [**API 보기>**](https://docs.shopby.co.kr/?url.primaryName=auth/#/Authentication/get-oauth-login-url)
>
> ▶ 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://{쇼핑몰](https://xn--{-y21fx0qvtv/) 도메인}/{callbackUrl}
  * **reauthenticate**
    * 재인증 여부
    * 최초 간편로그인 연동 시 false로 입력
    * 재인증 필요한 경우 true로 입력
* <mark style="color:blue;">**예시코드**</mark>
  * Request URI

    <pre data-overflow="wrap"><code>https://alpha-shop-api.e-ncp.com/oauth/login-url?provider=ncp_payco&#x26;redirectUri=https%3A%2F%2Fdevfe.shopby.co.kr%3A8283%2Fcallback%2Fauth-callback&#x26;state=Ixihzt
    </code></pre>
  * Responses

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

***

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

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

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

<figure><img src="/files/KXjbFjM8BFOUX8Luspxj" alt=""><figcaption></figcaption></figure>

***

## 4) **쇼핑몰 redirectUri로 이동**

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

* <mark style="color:blue;">**예시코드**</mark>

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