# 네이버 로그인

국내 사용자들이 가장 많이 사용하는 포털 사이트 중 하나인 네이버 계정으로 보다 쉽게 사이트에 회원가입 및 로그인을 할 수 있습니다.

## 1. 회원가입 설정

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FQ7R4QXWiyRQTjtfKApNH%2FFrame%201707481340.png?alt=media&#x26;token=91871170-9f63-470d-b580-a5b52826009d" alt=""><figcaption></figcaption></figure>

[**\[관리자페이지 > 상점설정 > 회원가입\]**](https://help.qshop.ai/customer_support/guide/setting/member/join)의 기본로그인 페이지를 통해 회원 가능 사용 설정 및 가입 폼을 통해 설정한 항목을 확인 부탁드립니다.

{% hint style="info" %}
사이트에 설정한 가입폼의 내용은 이후 진행이 될 **\[API 정보 입력]**&#xB2E8;계에서 사용하게 됩니다.
{% endhint %}

## 2. 어플리케이션 등록

### 2-1.어플리케이션 등록&#x20;

2-1-1. [네이버 개발자센터](https://developers.naver.com/)에 접속합니다.

2-1-2. 오른쪽 위 **\[로그인]** 버튼을 클릭해 네이버 계정으로 로그인 합니다.

2-1-3. 상단 메뉴에서 **\[Application > 애플리케이션 등록]**&#xC744; 클릭합니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FuzM7l1PyxvxclGYK9NcX%2F1_%EC%96%B4%ED%94%8C%EB%A6%AC%EC%BC%80%EC%9D%B4%EC%85%98%20%EB%93%B1%EB%A1%9D.png?alt=media&#x26;token=dd0da4dc-0889-45d6-a267-2f531f2f2d9b" alt=""><figcaption></figcaption></figure>

### 2-2.약관 동의

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FiA5UDAtZyVT9hG5QStPY%2F2_%EC%95%BD%EA%B4%80%EB%8F%99%EC%9D%98.png?alt=media&#x26;token=06f914ee-944c-4f1a-9c26-37085e528729" alt=""><figcaption></figcaption></figure>

API사용을 위한 약관 동의를 합니다.

{% hint style="info" %}
이전 어플리케이션 등록을 한 적이 있다면 이 과정은 무시됩니다.
{% endhint %}

### 2-3. 계정 정보 등록

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FZwOWZK5jHy3mPPGtYmKj%2F3_%EA%B3%84%EC%A0%95%20%EC%A0%95%EB%B3%B4%20%EB%93%B1%EB%A1%9D.png?alt=media&#x26;token=3a2a3294-0325-459e-b943-1bc947c7b3b4" alt=""><figcaption></figcaption></figure>

계정 사용 설정을 위해 휴대폰 인증 및 이메일 계정 정보를 확인합니다.

{% hint style="info" %}
이전 어플리케이션 등록을 한 적이 있다면 이 과정은 무시됩니다.
{% endhint %}

### 2-4. API 정보 입력

2-4-1. 어플리케이션 항목에는 사이트 이름 또는 브랜드 이름을 입력합니다.

2-4-2. 사용 API 정보는 네이버 로그인을 선택합니다.

2-4-3. **제공 정보 선택** 항목은 네이버 계정으로 사이트 가입 시 네이버에서 제공 받을 가입자의 정보를 선택합니다. **\[회원가입 설정]**&#xACFC;정에서 확인하신 가입 항목을 기준으로 꼭 필요한 제공 정보만 필수로 선택합니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FjMbFpj3w8poACOJhNNfw%2F4_%EC%82%AC%EC%9A%A9%20api.png?alt=media&#x26;token=1d039280-1a64-4393-aac9-a858b70b296f" alt=""><figcaption></figcaption></figure>

<table data-header-hidden><thead><tr><th width="149">버리는 항목</th><th width="384"></th><th>필수</th><th>추가</th></tr></thead><tbody><tr><td>항목</td><td>내용</td><td>필수</td><td>추가</td></tr><tr><td><strong>회원이름</strong></td><td>사이트에서 <strong>회원의 이름</strong>을 받는 경우 선택합니다.</td><td>-</td><td>O</td></tr><tr><td><strong>이메일 주소</strong></td><td>사이트에서 <strong>이메일 주소</strong>를 받는 경우 선택합니다.</td><td>O</td><td>-</td></tr><tr><td><strong>별명</strong></td><td>현재 지원되지 않는 항목 입니다.</td><td>미지원</td><td>미지원</td></tr><tr><td><strong>프로필 사진</strong></td><td>현재 지원되지 않는 항목 입니다.</td><td>미지원</td><td>미지원</td></tr><tr><td><strong>성별</strong></td><td>사이트에서 <strong>성별</strong>을 받는 경우 선택합니다.</td><td>-</td><td>O</td></tr><tr><td><strong>생일</strong></td><td>사이트에서 <strong>생년월일</strong>을 받는 경우 선택합니다.</td><td>-</td><td>O</td></tr><tr><td><strong>연령대</strong></td><td>현재 지원되지 않는 항목 입니다.</td><td>미지원</td><td>미지원</td></tr><tr><td><strong>출생연도</strong></td><td>사이트에서 <strong>생년월일</strong>을 받는 경우 선택합니다.</td><td>-</td><td>O</td></tr><tr><td><strong>휴대전화번호</strong></td><td>현재 지원되지 않는 항목 입니다.</td><td>미지원</td><td>미지원</td></tr></tbody></table>

{% hint style="danger" %}
제공 정보 선택 항목에서 선택한 항목과 사이트에서 받는 실제 가입 정보가 다른 경우, 네이버 로그인 검수 과정에서 심사 거절 사유가 됩니다.
{% endhint %}

2-4-4. 로그인 오픈 API 서비스 환경 -  PC웹을 선택합니다.

2-4-5. PC 웹 항목에 **서비스 URL** 과 **Callback URL** 을 입력합니다.

{% hint style="warning" %}
커스텀 도메인이 대표 도메인으로 설정된 경우, 해당 도메인을 반드시 네이버 개발자센터에 등록해야 합니다.
{% endhint %}

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FT9TgNYC3vLGN5wdIRDR1%2FFrame%201707481341.png?alt=media&#x26;token=82100148-d28c-400f-88f5-c13f18c5aae3" alt=""><figcaption></figcaption></figure>

아래 내용을 참고하여 **서비스URL** 과 **Callback URL**을 입력합니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2F60SqxN3EqwXUgxWmS1ac%2F5_PC%EC%9B%B9.png?alt=media&#x26;token=10e8e320-e36a-4570-9316-39145b23ae7a" alt=""><figcaption></figcaption></figure>

<table data-header-hidden><thead><tr><th width="165">버리는 항목</th><th></th></tr></thead><tbody><tr><td>항목</td><td>내용</td></tr><tr><td><strong>서비스 URL</strong></td><td><p><strong>https://도메인</strong> 형식으로 <strong>서비스 URL</strong> 을 입력합니다.</p><ul><li>한글 도메인 연결은 퓨니코드 주소를 입력합니다.</li></ul></td></tr><tr><td><strong>네이버 로그인 Callback URL</strong></td><td><p>아래 형식으로 Callback URL 을 모두 입력합니다. </p><ul><li><strong>https://도메인/api/auth/social/naver/callback</strong></li><li><strong>https://www.도메인/api/auth/social/naver/callback</strong></li></ul></td></tr></tbody></table>

### 2-5. Client ID 및 Client Secret 입력

2-5-1. **\[개요]** 탭에서 애플리케이션 정보를 확인하고, 복사합니다.

{% hint style="info" %}
보기 버튼을 클릭하여 Client Secret 값을 확인할 수 있습니다.
{% endhint %}

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FuY7FuGpsWBK3xdE8fv6n%2F7_Client%20ID.png?alt=media&#x26;token=a81d52ac-1f45-426c-933b-1d9dd54fba5e" alt=""><figcaption></figcaption></figure>

2-5-2. **관리자페이지 \[상점설정 > 회원가입] -** 소셜로그인 페이지에 접속합니다.

{% hint style="danger" %}
네이버 개발자센터 브라우저 탭은 아직 종료하지 마세요.
{% endhint %}

2-5-3. NAVER 로그인 **사용함** 체크 후 2-5-1.에서 복사한 값을 입력합니다. 우측 상단 저장하기 버튼을 클릭합니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FNDypBF0XyAE0vKkoctH5%2FFrame%201707481342.png?alt=media&#x26;token=84d7adf8-20be-49aa-a508-2e1248231522" alt=""><figcaption></figcaption></figure>

### 2-6. 로고 이미지 등록

2-6-1. **네이버 개발자센터** 탭으로 돌아가 **API 설정** 탭을 클릭합니다.

2-6-2. **로그인 오픈 API 서비스 환경** 항목에서 **로고 이미지**를 등록합니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FmBmwOsEaIwYO0l02hSk9%2F9_%EB%A1%9C%EA%B3%A0%20%EB%93%B1%EB%A1%9D.png?alt=media&#x26;token=0432b829-c77f-4ef2-a622-4c92bfda52c8" alt=""><figcaption></figcaption></figure>

2-6-3. 페이지 하단의 \[**수정]** 버튼을 클릭합니다. (등록한 로고가 저장됩니다.)

2-6-4. **네이버 로그인 플러스** 항목은 OFF로 설정합니다.

2-6-5. **연결 끊기** 항목은 입력하지않고 비워둡니다.

2-6-6. **애플리케이션 개발 상태** 항목에서 \[**검수요청 하러 가기]** 버튼을 클릭합니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FQTNql8POGIAvnoVw2ChA%2F10_%EA%B2%80%EC%88%98%20%EC%9A%94%EC%B2%AD%20%ED%95%98%EB%9F%AC%20%EA%B0%80%EA%B8%B0.png?alt=media&#x26;token=e42d7943-8b75-40e7-95e4-9b901de8843f" alt=""><figcaption></figcaption></figure>

### 2-7. 검수 요청

<details>

<summary>2-7-1. 검수 신정 전 가이드 확인을 체크합니다. </summary>

[검수 요청 가이드](https://developers.naver.com/docs/login/verify/verify.md)를 클릭하여 사전 검수 가이드 내용을 확인해 주세요.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2Fztn99lnYYuxyF4zeadKQ%2F11_%EA%B2%80%EC%88%98%20%EC%9A%94%EC%B2%AD%20%EA%B0%80%EC%9D%B4%EB%93%9C%20%ED%99%95%EC%9D%B8.png?alt=media&#x26;token=36e2c785-0d91-4881-9834-ae1b2aef5ee4" alt=""><figcaption></figcaption></figure>

</details>

<details>

<summary>2-7-2. 제공 정보 활용처 확인을 합니다.</summary>

제공 정보는 이전 **\[API 설정]**&#xACFC;정에서 선택한 정보가 표시가 되며, 설정 정보 확인 및 해당 정보가 보여지는 실제 화면을 캡쳐하여 등록합니다.

1. 네이버로부터 제공받을 제공 정보 항목을 모두 체크합니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FZR11OzaztdQXhVhRzFpL%2F12_%EC%A0%9C%EA%B3%B5%20%EC%A0%95%EB%B3%B4%20%ED%99%9C%EC%9A%A9%EC%B2%98.png?alt=media&#x26;token=eecb2c8a-2b5d-4949-b7c8-32b2fe29d629" alt=""><figcaption></figcaption></figure>

2. 운영중인 사이트 **\[마이페이지 > 나의 정보 > 개인 정보 관리]**&#xB97C; 클릭 후, 아래 예시 이미지와 같이 개인 정보 관리 내용을 캡쳐합니다.

{% hint style="warning" %}
파일 첨부 시 불필요한 개인정보가 노출되지 않도록 반드시 **마스킹 처리 후 첨부**해 주시기 바랍니다.
{% endhint %}

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FYjhAFhydqxw2YhVRWcuS%2F13_%EC%A0%95%EB%B3%B4%20%EC%88%98%EC%A0%95%ED%8E%98%EC%9D%B4%EC%A7%80.png?alt=media&#x26;token=0b4d0487-9ab6-46e2-a3e0-78841017c55f" alt=""><figcaption></figcaption></figure>

3. 네이버 검수 페이지로 돌아가, **\[파일선택]** 버튼을 클릭 후 캡쳐한 파일을 등록합니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FoTny7VH21InlYIbb3Uaa%2F14_%ED%8C%8C%EC%9D%BC%20%EC%84%A0%ED%83%9D.png?alt=media&#x26;token=7aa1f8d7-7490-4f1e-9601-49428f5500f8" alt=""><figcaption></figcaption></figure>

</details>

<details>

<summary>2-7-3. 서비스 적용 형태 확인</summary>

1. **네이버 로그인을 통한 신규 회원 가입에 적용**을 체크합니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FefFONCrm7ca2Bd7nI9Bs%2F15_%EC%84%9C%EB%B9%84%EC%8A%A4%20%EC%A0%81%EC%9A%A9%20%ED%98%95%ED%83%9C.png?alt=media&#x26;token=ced9d892-fab6-44dc-85d3-27c1c1bbd068" alt=""><figcaption></figcaption></figure>

2. 네이버 로그인 이용 절차가 담긴 이미지를 하나의 이미지로 제작하여 이미지 파일을 첨부합니다.

{% hint style="info" %}
제작한 이미지에는 아래 내용이 포함되어야 합니다.

* 네이버 로그인이 적용된 페이지 스크린샷
* 회원가입 시 상세정보 입력 페이지 스크린샷
* 회원가입 완료 후 개인정보 페이지 스크린샷
  {% endhint %}

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FlcE4nirxg4YdtVv1wjGc%2F16_%EC%98%88%EC%8B%9C%20%EC%9D%B4%EB%AF%B8%EC%A7%80.png?alt=media&#x26;token=982041d3-53b2-44d5-8e42-43d507dc1fb7" alt=""><figcaption></figcaption></figure>

{% hint style="info" icon="plus" %}
네이버 로그인 절차 확인을 위해 **\[멤버관리]** 탭에서 테스터 ID를 등록할 수 있습니다.
{% endhint %}

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2Fc8OZZSz2I7w4NU80RwRw%2Fimage.png?alt=media&#x26;token=1a5334d5-1a68-4e8d-b780-11b302277755" alt=""><figcaption></figcaption></figure>

3. **\[파일선택]** 버튼 클릭 후, 위 과정에서 만든 이미지 파일을 업로드 합니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2F6ez6dz5tcCoixjhimQQT%2F17_%EC%A0%84%EC%B2%B4%20%EA%B3%BC%EC%A0%95%20%ED%8C%8C%EC%9D%BC%20%EC%84%A0%ED%83%9D.png?alt=media&#x26;token=5f56e809-18f0-4dab-bdcc-87633df65854" alt=""><figcaption></figcaption></figure>

</details>

<details>

<summary>2-7-4. 추가 제출 서류 확인</summary>

업종에 따라 네이버 로그인을 사용하기 위해서는 추가서류를 제출해야 합니다.&#x20;

사이트의 업종에 해당하는 항목 선택 후, 추가서류를 제출합니다.

* 해당되는 항목이 없다면 **없음**을 선택합니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FkU4zL9NTUEjGFtug3NxJ%2F18_%EC%B6%94%EA%B0%80%20%EC%A0%9C%EC%B6%9C%20%EC%84%9C%EB%A5%98.png?alt=media&#x26;token=be71b618-6dbf-40f4-a7c4-9c971346a341" alt=""><figcaption></figcaption></figure>

</details>

<details>

<summary>2-7-5. 검수 요청하기</summary>

* 페이지 가장 아래 **\[검수 요청]** 버튼을 클릭합니다.

  <figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FOOIvECVtPvvHwW6rcMIy%2F19_%EA%B2%80%EC%88%98%20%EC%9A%94%EC%B2%AD.png?alt=media&#x26;token=37d76b37-d0d5-4c04-8649-319d11d698f3" alt=""><figcaption></figcaption></figure>

</details>

### 2-8. 신청 완료

모든 과정이 완료되었습니다.&#x20;

네이버 로그인 검수는 약 3\~4일 정도의 시간이 소요될 수 있으며, 네이버 개발자센터에 로그인 한 계정으로 검수결과가 통보됩니다.