# 페이스북 로그인 연동하기

## 목차 

* [페이스북 로그인 사용하기](#id-1)
  * [페이스북 새 앱 ID 만들기](#id-1-1.-id)
  * [제품 설정하기](#id-1-2)
  * [앱 설정하기](#id-1-3)
  * [애드온 사용하기](#id-1-4)

## 1. 페이스북 로그인 사용하기

{% hint style="info" %}
페이스북 로그인 기능을 사용하시려면 페이스북 계정이 있어야 합니다. [지금 가입하기](https://www.facebook.com/)
{% endhint %}

### 1-1. 페이스북 새 앱 ID 만들기

#### **Step 1.** [페이스북 디벨로퍼스 웹사이트](https://developers.facebook.com/)에 방문 후 화면 우측 상단 '내 앱' 메뉴를 누르세요. 

<figure><img src="https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ld5OD2VFGhsB7IF4FTG%2Fuploads%2FV0osQV9TtDunmopsmn5v%2F1-1_1.png?alt=media&#x26;token=5290e8cb-fe6b-4c7d-8e32-69c4d44413b6" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
오른쪽 상단에 '내 앱' 메뉴가 노출되지 않으면 '시작하기'를 클릭하여 Facebook 개발자 계정을 생성하고 다음 과정을 진행해 주세요.&#x20;
{% endhint %}

#### **Step 2.** 앱 페이지에서 \[앱 만들기]를 클릭해 주세요.

<figure><img src="https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ld5OD2VFGhsB7IF4FTG%2Fuploads%2FgGFV8ikct5EFFngFh5qF%2F1-1_2.png?alt=media&#x26;token=3db26a93-3b80-4ec0-a0d2-0714398024cc" alt=""><figcaption></figcaption></figure>

#### **Step 3.** 앱에 필요한 기능  중 \[Facebook 로그인을 통한 인증 및 사용자의 데이터 요청]을 선택해 주세요.

<figure><img src="https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ld5OD2VFGhsB7IF4FTG%2Fuploads%2FhmXbBNCYazizwynlpjSL%2F%ED%8E%98%EC%9D%B4%EC%8A%A4%EB%B6%81%EB%A1%9C%EA%B7%B8%EC%9D%B81.png?alt=media&#x26;token=ead4047a-fef3-483d-93f2-050c99aeae51" alt=""><figcaption></figcaption></figure>

#### **Step 4.** Login type 항목에 '아니요. 게임을 빌드하지 않습니다.'를 선택해 주세요.

<figure><img src="https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ld5OD2VFGhsB7IF4FTG%2Fuploads%2FQyHIKVEDAykdUnnAQPkr%2F%ED%8E%98%EC%9D%B4%EC%8A%A4%EB%B6%81%EB%A1%9C%EA%B7%B8%EC%9D%B82.png?alt=media&#x26;token=30d4831f-1a8b-41e1-9098-b36c7c1ec34f" alt=""><figcaption></figcaption></figure>

**Step 5. 상세 정보를 입력하고 \[앱 만들기]를 클릭해 주세요.**

<figure><img src="https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ld5OD2VFGhsB7IF4FTG%2Fuploads%2FrDOVGWLVLhiHHNkkh8dH%2F%ED%8E%98%EC%9D%B4%EC%8A%A4%EB%B6%81%EB%A1%9C%EA%B7%B8%EC%9D%B83.png?alt=media&#x26;token=cbe18571-177b-44aa-ab14-ee54e789194c" alt=""><figcaption></figcaption></figure>

| 설정 항목                                                                         |
| ----------------------------------------------------------------------------- |
| <p><strong>앱 이름 추가</strong><br>상점 이름을 입력해 주세요.</p>                            |
| <p><strong>앱 연락처 이메일</strong><br>페이스북 로그인 정책, 상태 정보를 받을 이메일 주소를 입력해 주세요. </p> |
| <p><strong>비즈니스 계정</strong><br>비즈니스 관리자 계정을 선택해 주세요.</p>                      |

### 1-2. 제품 설정하기

#### **Step 1 .** \[왼쪽 메뉴 > 대시보드]에서 Facebook 로그인 버튼 추가 맞춤 설정을 선택해 주세요.

<figure><img src="https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ld5OD2VFGhsB7IF4FTG%2Fuploads%2FIzocSG0cILBgypDSzEuO%2F%ED%8E%98%EC%9D%B4%EC%8A%A4%EB%B6%81%EB%A1%9C%EA%B7%B8%EC%9D%B84.png?alt=media&#x26;token=deefa8dc-d9f7-4ec8-b54a-b941e911ab75" alt=""><figcaption></figcaption></figure>

#### **Step 2 .** Facebook 로그인의 설정 항목에서 \[설정 페이지로 이동]을 선택해 주세요.

<figure><img src="https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ld5OD2VFGhsB7IF4FTG%2Fuploads%2Fq8VmEobvm8tjceyybVbx%2F%ED%8E%98%EC%9D%B4%EC%8A%A4%EB%B6%81%EB%A1%9C%EA%B7%B8%EC%9D%B85.png?alt=media&#x26;token=c4a651be-2a0c-4bbe-bd9b-4be01057df27" alt=""><figcaption></figcaption></figure>

#### Step 3 . JavaScript SDK에 허용된 도메인 설정을 '예'로 선택하고 상점 도메인을 입력해 주세요.

<figure><img src="https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ld5OD2VFGhsB7IF4FTG%2Fuploads%2FjfwS1vO3ctuxxM0o6Vf3%2F%ED%8E%98%EC%9D%B4%EC%8A%A4%EB%B6%81%EB%A1%9C%EA%B7%B8%EC%9D%B86.png?alt=media&#x26;token=a7916d5d-0355-4257-b958-e932dec930bb" alt=""><figcaption></figcaption></figure>

| 설정 항목                                                                    |
| ------------------------------------------------------------------------ |
| <p><strong>JavaScript SDK로 로그인</strong><br>예</p>                         |
| <p><strong>JavaScript SDK에 허용된 도메인</strong><br><https://www.상점도메인주소></p> |

### **1-3. 앱 설정하기**

#### **Step 1 .** \[왼쪽 메뉴 > 앱 설정 > 기본 설정]에서 아래를 참고하여 정보를 입력해 주세요.

<figure><img src="https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ld5OD2VFGhsB7IF4FTG%2Fuploads%2FCbVknSrJhV2xSnyyLF9I%2F1-3_1.png?alt=media&#x26;token=c143cfa7-899e-4076-b3d3-44dce1a0ee41" alt=""><figcaption></figcaption></figure>

| 설정 항목                                                                             |
| --------------------------------------------------------------------------------- |
| <p><strong>앱 도메인</strong> <br>[www.상점도메인주소](http://www.상점도메인주소)</p><p>상점도메인주소</p> |
| <p><strong>개인정보처리방침 URL</strong><br><https://www.상점도메인주소/privacy></p>             |
| <p><strong>서비스 약관 URL</strong><br><https://www.상점도메인주소/policy></p>                |
| <p><strong>사용자 데이터 삭제</strong> </p><p><https://www.상점도메인주소>  </p>                 |
| <p><strong>카테고리</strong> </p><p>쇼핑</p>                                            |

#### **Step 2 .** 기본 설정 페이지 하단 \[+ 플랫폼 추가]를 클릭하고, Website에 체크하여 \[다음] 버튼을 클릭한 후 상점 도메인 주소를 입력해 주세요.

<figure><img src="https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ld5OD2VFGhsB7IF4FTG%2Fuploads%2F4vSQdIf1FVxjFzBzDUh1%2F1-3_2.png?alt=media&#x26;token=1dc16d62-d00d-4bd8-bffe-68714676e50b" alt=""><figcaption></figcaption></figure>

| 설정 항목                                                    |
| -------------------------------------------------------- |
| <p><strong>사이트 URL</strong><br><https://www.상점도메인주소></p> |

{% hint style="warning" %}
아래 이미지처럼 Website 항목이 비활성화되어 체크할 수 없다면, 이미 웹사이트 정보가 등록된 상태입니다. \[취소] 후, 웹사이트 정보 오른쪽의 \[X] 아이콘으로 기존 정보를 삭제하고 재시도해 주세요.
{% endhint %}

<figure><img src="https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ld5OD2VFGhsB7IF4FTG%2Fuploads%2FyPE0li6srdGQeKPUdcdB%2F%ED%8E%98%EC%9D%B4%EC%8A%A4%EB%B6%81%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EC%88%98%EC%A0%95%EC%82%AC%ED%95%AD.png?alt=media&#x26;token=bbcca9ad-9187-413b-855b-510f77965006" alt=""><figcaption></figcaption></figure>

#### **Step 3.** \[왼쪽 메뉴 > 게시하기]에서 \[게시]를 클릭해 주세요.

{% hint style="danger" %}
**2023년 2월 1일부터 페이스북 로그인은 인증된 비즈니스와 연결되어야 사용할 수 있습니다.**\
게시하기에서 비즈니스 인증 오른쪽 \[인증 시작]을 눌러 비즈니스 인증을 완료해 주세요.\
비즈니스 인증은 서류 제출 후 약 2영업일 소요됩니다.
{% endhint %}

비즈니스 인증을 위해 상점 정보 확인에 필요한 문서가 필요합니다.

<details>

<summary>비즈니스 인증에 허용되는 문서</summary>

* 상장서/정관
* 비즈니스 등록 문서 또는 사업자 등록증&#x20;
* 정부 발급 비즈니스 납세 관련 문서
  * 납세 증명서도 해당됩니다. 직접 작성한 세무 문서는 허용되지 않습니다.
* 비즈니스 은행 명세서
* 공과금 청구서
  * 비즈니스 주소 및 전화번호를 확인하는 용도로만 허용됩니다. 공과금 청구서에 법적 비즈니스 이름이 명시되어 있어야 합니다. 공과금 청구서는 법적 비즈니스 이름을 확인하는 용도로는 허용되지 않습니다.

</details>

<figure><img src="https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ld5OD2VFGhsB7IF4FTG%2Fuploads%2FRPs6CromYzbTDhLQUCnG%2F%ED%8E%98%EC%9D%B4%EC%8A%A4%EB%B6%81%EB%A1%9C%EA%B7%B8%EC%9D%B87.png?alt=media&#x26;token=db084baf-9552-4d12-93f0-9d29a34af8c6" alt=""><figcaption></figcaption></figure>

#### **Step 4.** Step.3 이미지의 ③의 앱 ID 숫자를 클릭하여 복사해 주세요.

### 1-4. 애드온 사용하기

\[식스샵 > 애드온 > 소셜 로그인]의 '페이스북' 항목에 복사한 앱 ID를 붙여넣고 '변경사항 저장하기' 버튼을 눌러주시면 페이스북 로그인 설정이 완료됩니다.

<figure><img src="https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ld5OD2VFGhsB7IF4FTG%2Fuploads%2FndzUyXmLjq6gDKCBFyXY%2Fimage.png?alt=media&#x26;token=20dc7d22-5a32-452e-bc4a-fbf7d2abc380" alt=""><figcaption></figcaption></figure>