페이스북 로그인 설정하기

방문자가 Facebook 계정으로 내 사이트에 가입하고 로그인할 수 있도록 Facebook 로그인을 설치할 수 있습니다. 이 도움말에서는 Facebook 로그인을 설치하는 방법을 단계별로 안내합니다.

주의: 2019년 3월부터 Facebook 정책 변경에 따라 Facebook 로그인을 사용하기 위해선 SSL 보안서버 인증서를 설치해야 합니다. 자세한 설치방법은 SSL 보안서버 인증서 설치하기 도움말에서 확인할 수 있습니다.

시작에 앞서

페이스북 로그인을 사용하기 위해선 아래와 같은 몇 가지 선행 작업이 필요합니다.

같은 이름(닉네임)으로 중복 가입 옵션 해제하기

내 사이트 관리자 페이지에서 같은 이름(닉네임)으로 중복 가입 방지 옵션을 해제해 주세요. 소셜 로그인 가입자는 대부분 가입된 플랫폼의 이름(닉네임)을 그대로 사용하는 경향이 있으며, 소셜 로그인 플랫폼에서는 동일 이름(닉네임) 사용이 허용하기에, 해당 옵션을 해제해 주셔야 원활한 가입이 진행됩니다.

같은 이름(닉네임)으로 중복 가입 방지 또는 해제하기

SSL 보안서버 인증서 설치하기

페이스북 로그인을 정상적으로 사용하려면 내 사이트에 SSL 보안서버 인증서를 설치해야 합니다. SSL 보안서버 인증서가 설치된 사이트는 브라우저 주소창에 자물쇠 아이콘이 표시되며, https 로 접속됩니다.

설정방법

1단계: Meta for Developers 로그인하기

  1. Meta for Developers에 접속합니다.
  2. 오른쪽 상단의 로그인을 클릭해 Facebook 개발자 계정으로 로그인합니다.
    참고: Facebook 로그인을 설정하기 위해선 Facebook 개발자 계정이 필요합니다. 오른쪽 상단의  시작하기 를 클릭해 Facebook 개발자 계정을 생성해 주세요.

2단계: 앱 만들기

  1. 오른쪽 상단의 내 앱을 클릭합니다.

  2. 앱 만들기 버튼을 클릭합니다.
  3. 앱 유형 선택에서 소비자를 선택하고, 다음 버튼을 클릭합니다.

  4. 표시 이름을 작성하고, 앱 만들기 버튼을 클릭합니다.

  5. 보안을 위해 페이스북 계정 비밀번호를 입력 후 제출 버튼을 클릭합니다.

3단계: 제품 추가 및 Facebook 로그인 설정하기

  1. Facebook 로그인에서 설정 버튼을 클릭합니다.

  2. 왼쪽 메뉴에서 [제품 > Facebook 로그인 > 설정]을 클릭합니다.

  3. 클라이언트 OAuth 설정에서 유효한 OAuth 리디렉션 URI에 https://내도메인/oauth 형식으로 OAuth 리디렉션 URL를 입력하고, 아래 변경 내용 저장 버튼을 클릭합니다.
    참고: OAuth 리디렉션 URI 주소는 보유 중인 도메인에 따라 2개 이상 추가할 수 있으며, 반드시 https 로 시작해야 합니다.

4단계: 앱 기본 설정하기

  1. 왼쪽 메뉴에서 [설정 > 기본 설정]을 클릭합니다.

  2. 아래 그림과 설명을 참고해 앱 기본 설정 정보를 추가합니다.

    1. 표시 이름: 방문자가 Facebook 로그인 시 표시될 이름을 작성합니다.
    2. 앱 도메인: 내 사이트의 대표 도메인을 입력합니다.
    3. 연락처 이메일: 중요 업데이트, 정책에 관해 알고, 계정 복원 등에 사용할 이메일 주소를 입력합니다.
    4. 개인정보처리방침 URL: https://내도메인/?mode=privacy 형식으로 입력합니다.
    5. 서비스 약관 URL: https://내도메인/?mode=policy 형식으로 입력합니다.
    6. 사용자 데이터 삭제: 데이터 삭제 안내 URL을 선택하고, https://내도메인/?mode=policy 형식으로 입력합니다.
    7. (선택 사항) 앱 아이콘: 방문자가 Facebook 로그인 시 표시될 아이콘을 추가합니다. 아이콘은 심볼만 표시되도록 배경은 투명하게 처리하고, PNG 형식으로 올려야 합니다.
    8. 카테고리: 해당되는 카테고리를 선택합니다.
    9. 앱 목적: 회원님 또는 소유한 비즈니스를 선택합니다.
  3. 마우스 휠 스크롤을 움직여 페이지 하단에서 + 플랫폼 추가 버튼을 클릭합니다.

  4. Website(웹사이트)를 선택하고, 다음 버튼을 클릭합니다.

  5. https 를 포함하여 사이트 URL을 입력합니다.

  6. 변경 내용 저장 버튼을 클릭합니다.

5단계: 앱 ID와 앱 시크릿 코드 복사하기

  1. 페이지 상단으로 올라가 앱 ID와 앱 시크릿 코드를 복사합니다. (앱 시크릿 코드는 보기 버튼을 클릭해야 표시됩니다.)

  2. 복사한 코드는 메모장 등에 메모해 둡니다.

6단계: 권한 및 기능 설정하기

  1. 왼쪽 메뉴에서 [앱 검수 > 권한 기능]을 클릭해 이동합니다.

  2. public_profile 에서 고급 액세스 이용하기 버튼을 클릭합니다.

  3. public_profile에 대한 고급 액세스 확인 창이 나오면 동의 항목을 체크하고, 확인 버튼을 클릭합니다.

  4. 개발자 계정 비밀번호를 입력하고, 제출 버튼을 클릭합니다.

7단계: 사이트의 Facebook 로그인 사용 설정하기

  1. 새 브라우저 탭을 열어줍니다.
  2. 캠페이너스 사이트 관리자 페이지에 접속합니다. 
  3. 왼쪽 메뉴에서 [환경설정 > 소셜 로그인 / API 설정]을 클릭합니다.
  4. Facebook 로그인 항목으로 이동 후 사용을 선택합니다.
  5. 앱 ID와 앱 시크릿 코드 입력칸에 위 5단계에서 복사한 값을 붙여넣습니다.

  6. 저장 버튼을 클릭해 적용합니다.

8단계: 앱 검수 시작하기

  1. Meta for Developers 탭으로 돌아갑니다.
  2. 상단에 앱 모드 라디오 버튼을 클릭합니다. 앱 모드가 라이브로 전환됩니다.

  3. 만약 카테고리를 선택하지 않았으면 앱 상태가 라이브로 전환되지 않습니다. 카테고리를 선택하고 모드 전환 버튼을 클릭해 주세요.
  4. 앱 모드를 라이브로 전환하는 과정에서 데이터 사용 확인 및 Facebook 플랫폼 약관 및 정책과 관련해 동의 절차가 추가됩니다. 각 항목에 동의하고 제출하세요.

  5. 앱 모드가 라이브로 전환되었는지 확인합니다.

  6. 이제 내 사이트에서 Facebook 로그인을 사용할 수 있습니다.