본문으로 건너뛰기

Facebook 소셜 로그인을 설정하세요

Facebook 소셜 로그인에 대한 공식 Logto 커넥터입니다.

:

이 가이드는 Logto 커넥터에 대한 기본적인 이해를 전제로 합니다. 익숙하지 않은 분들은 커넥터 가이드를 참조하여 시작하세요.

시작하기

Facebook 커넥터는 애플리케이션이 Facebook의 OAuth 2.0 인증 시스템을 사용할 수 있는 간결한 방법을 제공합니다.

Facebook 개발자 계정 등록

Facebook 개발자로 등록하세요. 아직 계정이 없다면 등록하세요.

Facebook 앱 설정

  1. 페이지를 방문하세요.
  2. 기존 앱을 클릭하거나 필요하다면 새로 생성하세요.
    • 선택한 앱 유형은 자유롭게 선택할 수 있지만, Facebook 로그인 제품이 포함되어야 합니다.
  3. 앱 대시보드 페이지에서 "제품 추가" 섹션으로 스크롤하여 "Facebook 로그인" 카드의 "설정" 버튼을 클릭하세요.
  4. Facebook 로그인 빠른 시작 페이지를 건너뛰고, 사이드바 -> "제품" -> "Facebook 로그인" -> "설정"을 클릭하세요.
  5. Facebook 로그인 설정 페이지에서 "유효한 OAuth 리디렉션 URI" 필드에 ${your_logto_origin}/callback/${connector_id}를 입력하세요. connector_id는 Logto 관리자 콘솔 커넥터 세부 정보 페이지의 상단 바에서 찾을 수 있습니다. 예를 들어:
    • 프로덕션의 경우 https://logto.dev/callback/${connector_id}
    • 로컬 환경에서 테스트할 경우 https://localhost:3001/callback/${connector_id}
  6. 오른쪽 하단 모서리의 "변경 사항 저장" 버튼을 클릭하세요.

커넥터 JSON 작성

  1. Facebook 앱 대시보드 페이지에서 사이드바 -> "설정" -> "기본"을 클릭하세요.
  2. 패널에서 "앱 ID"와 "앱 비밀"을 볼 수 있습니다.
  3. 앱 비밀 입력 상자 옆의 "보기" 버튼을 클릭하여 내용을 복사하세요.
  4. Logto 커넥터 설정을 작성하세요:
    • App ID에서 가져온 문자열로 clientId 필드를 작성하세요.
    • App secret에서 가져온 문자열로 clientSecret 필드를 작성하세요.
    • 권한의 쉼표 또는 공백으로 구분된 목록으로 scope 필드를 문자열로 작성하세요. 스코프를 지정하지 않으면 기본 스코프는 email,public_profile입니다.

Facebook 테스트 사용자로 로그인 테스트

테스트, 개발자, 관리자 사용자의 계정을 사용하여 개발 및 라이브 앱 모드에서 관련 앱으로 로그인 테스트를 할 수 있습니다.

또한 앱을 라이브로 전환하여 모든 Facebook 사용자가 앱으로 로그인할 수 있도록 할 수 있습니다.

  • 앱 대시보드 페이지에서 사이드바 -> "역할" -> "테스트 사용자"를 클릭하세요.
  • "테스트 사용자 생성" 버튼을 클릭하여 테스트 사용자를 생성하세요.
  • 기존 테스트 사용자의 "옵션" 버튼을 클릭하면 "이름 및 비밀번호 변경" 등 더 많은 작업을 볼 수 있습니다.

Facebook 로그인 설정 게시

일반적으로 테스트, 관리자, 개발자 사용자만 개발 모드에서 관련 앱으로 로그인할 수 있습니다.

프로덕션 환경에서 일반 Facebook 사용자가 앱으로 로그인할 수 있도록 하려면, 앱 유형에 따라 Facebook 앱을 *라이브 모드*로 전환해야 할 수도 있습니다. 예를 들어, 순수 비즈니스 유형 앱은 "라이브" 전환 버튼이 없지만 사용을 차단하지는 않습니다.

  1. Facebook 앱 대시보드 페이지에서 사이드바 -> "설정" -> "기본"을 클릭하세요.
  2. 필요하다면 패널에서 "개인정보 보호 정책 URL" 및 "사용자 데이터 삭제" 필드를 작성하세요.
  3. 오른쪽 하단 모서리의 "변경 사항 저장" 버튼을 클릭하세요.
  4. 앱 상단 바의 "라이브" 전환 버튼을 클릭하세요.

구성 유형

이름유형
clientIdstring
clientSecretstring
scopestring

참고 자료