본문으로 건너뛰기

Facebook 소셜 로그인을 설정하세요 (Set up social login with Facebook)

Facebook OAuth 2.0 인증 (Authentication) 시스템을 통합하여 Facebook으로 로그인, 계정 연동, Facebook API에 대한 안전한 접근을 활성화하세요.

팁:

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

시작하기 (Get started)​

Facebook 커넥터 (Connector)는 OAuth 2.0 통합을 가능하게 하여 애플리케이션에서 다음을 할 수 있습니다:

  • “Facebook으로 로그인” 인증 (Authentication) 추가
  • 사용자 계정을 Facebook 아이덴티티에 연동
  • Facebook에서 사용자 프로필 정보 동기화
  • Logto Secret Vault에 안전하게 저장된 토큰을 통해 Facebook API에 접근하여 자동화 작업 수행 (예: 스레드에 답변; 앱에서 콘텐츠 및 동영상 게시)

이러한 인증 (Authentication) 기능을 설정하려면 먼저 Logto에서 Facebook 커넥터 (Connector)를 생성하세요:

  1. Logto > 커넥터 (Connector) > 소셜 커넥터 (Social connector)로 이동하세요.
  2. 소셜 커넥터 추가를 클릭하고, Facebook을 선택한 후 다음을 클릭하여 단계별 튜토리얼을 따라 통합을 완료하세요.

1단계: Facebook App Dashboard에서 앱 설정하기​

Facebook을 인증 (Authentication) 제공자로 사용하기 전에, Facebook 개발자 플랫폼에서 앱을 설정하여 OAuth 2.0 자격 증명을 받아야 합니다.

  1. 아직 계정이 없다면 Facebook 개발자 등록을 하세요.
  2. 앱 페이지로 이동하세요.
  3. 기존 앱을 클릭하거나 필요하다면 새 앱을 생성하세요.
팁:

사용 사례(Use case)는 앱이 Meta와 상호작용하는 주요 방식이며, 앱에서 사용할 수 있는 API, 기능, 권한, 제품을 결정합니다. 소셜 인증 (Authentication)만 필요하다면(이메일 및 public_profile 획득), "Authentication and request data from users with Facebook Login"을 선택하세요. Facebook API에 접근하려면 원하는 사용 사례를 선택하세요. 대부분의 경우 앱 생성 후 "Facebook Login for business" 통합도 지원합니다.

  1. 앱 생성 후, 앱 대시보드 페이지에서 Use cases > Facebook Login > Settings 또는 Facebook Login for business > Settings로 이동하세요.
  2. Valid OAuth Redirect URIs에 Logto Callback URI를 입력하세요(Logto Facebook 커넥터에서 복사). 사용자가 Facebook으로 로그인하면, 이곳으로 리디렉션되어 Logto가 인증 (Authentication)을 완료하는 데 필요한 인가 코드가 전달됩니다.
  3. Use cases로 이동하여 사용 사례의 Customize를 클릭해 스코프를 추가하세요. Logto에서 Facebook 로그인을 구현하려면 email과 public_profile 추가를 권장합니다.

2단계: 클라이언트 자격 증명으로 Logto 커넥터 설정​

  1. Facebook App Dashboard에서 사이드바의 App settings > Basic을 클릭하세요.
  2. 패널에서 App ID와 App secret을 확인할 수 있습니다.
  3. App secret 입력란 옆의 Show 버튼을 클릭해 내용을 표시하고 복사하세요.
  4. Logto Facebook 커넥터 설정을 구성하세요:
    • clientId 필드에 App ID를 입력하세요.
    • clientSecret 필드에 App secret을 입력하세요.
    • Logto에서 Save and Done을 클릭해 아이덴티티 시스템을 Facebook과 연결하세요.

3단계: 스코프 구성​

스코프는 앱이 사용자에게 요청하는 권한을 정의하며, 사용자의 Facebook 계정에서 프로젝트가 접근할 수 있는 개인 데이터 범위를 제어합니다.

Facebook App Dashboard에서 스코프 구성​

  1. Facebook App Dashboard > Use cases로 이동하여 Customize 버튼을 클릭하세요.
  2. 앱에 필요한 스코프만 추가하세요. 사용자는 Facebook 동의 화면에서 이 권한을 검토하고 승인합니다:
    • 인증 (Authentication)용(필수): email 및 public_profile
    • API 접근용(선택): 앱에 필요한 추가 스코프(예: Threads API 접근을 위한 threads_content_publish, threads_read_replies). 사용 가능한 서비스는 Meta 개발자 문서를 참고하세요.

Logto에서 스코프 구성​

필요에 따라 다음 방법 중 하나 이상을 선택하세요:

옵션 1: 추가 API 스코프가 필요 없는 경우

  • Logto Facebook 커넥터의 Scopes 필드를 비워 두세요.
  • 기본 스코프 email public_profile이 요청되어 Logto가 기본 사용자 정보를 올바르게 가져올 수 있습니다.

옵션 2: 로그인 시 추가 스코프 요청

  • 원하는 모든 스코프를 Scopes 필드에 공백으로 구분하여 입력하세요.
  • 여기에 입력한 스코프가 기본값을 덮어쓰므로, 항상 인증 (Authentication) 스코프인 email public_profile을 포함하세요.

옵션 3: 나중에 점진적으로 스코프 요청

  • 사용자가 로그인한 후, 페더레이티드 소셜 인가 (Authorization) 플로우를 다시 시작하고 사용자의 저장된 토큰 세트를 업데이트하여 추가 스코프를 요청할 수 있습니다.
  • 이러한 추가 스코프는 Logto Facebook 커넥터의 Scopes 필드에 입력할 필요가 없으며, Logto의 Social Verification API를 통해 달성할 수 있습니다.

이 과정을 따르면, Logto Facebook 커넥터는 앱에 꼭 필요한 권한만 요청합니다.

팁:

앱이 Facebook API에 접근하여 작업을 수행하려면, Logto Facebook 커넥터에서 Store tokens for persistent API access를 활성화하세요. 자세한 내용은 다음 섹션을 참고하세요.

4단계: 일반 설정​

아래는 Facebook과의 연결을 막지는 않지만, 최종 사용자 인증 (Authentication) 경험에 영향을 줄 수 있는 일반 설정입니다.

프로필 정보 동기화​

Facebook 커넥터에서 사용자 이름, 아바타 등 프로필 정보 동기화 정책을 설정할 수 있습니다. 선택지는 다음과 같습니다:

  • 가입 시에만 동기화: 사용자가 처음 로그인할 때 한 번만 프로필 정보를 가져옵니다.
  • 로그인 시마다 항상 동기화: 사용자가 로그인할 때마다 프로필 정보를 업데이트합니다.

Facebook API 접근을 위한 토큰 저장(선택 사항)​

Facebook API에 접근하여 사용자 인가 (Authorization)로 작업을 수행하려면(소셜 로그인 또는 계정 연동을 통해), Logto가 특정 API 스코프를 받아 토큰을 저장해야 합니다.

  1. 위 튜토리얼을 따라 필요한 스코프를 추가하세요.
  2. Logto Facebook 커넥터에서 Store tokens for persistent API access를 활성화하세요. Logto는 Facebook 액세스 토큰을 Secret Vault에 안전하게 저장합니다.
노트:

Facebook은 리프레시 토큰을 제공하지 않습니다. 하지만 토큰 저장이 활성화되면, Logto는 사용자 인증 (Authentication) 시 자동으로 장기 액세스 토큰(60일)을 요청합니다. 이 기간 동안 사용자는 수동으로 액세스 토큰을 철회할 수 있지만, 그렇지 않으면 Facebook API 접근을 위해 재인가가 필요하지 않습니다. 참고: offline_access를 Scope 필드에 추가하지 마세요. 오류가 발생할 수 있습니다.

5단계: Facebook 테스트 사용자로 로그인 테스트(선택 사항)​

테스트, 개발자, 관리자 사용자 계정으로 앱 로그인 테스트를 할 수 있습니다. 앱을 바로 게시하여 모든 Facebook 사용자가 로그인할 수 있도록 할 수도 있습니다.

  1. Facebook App Dashboard에서 사이드바의 App roles > Test Users를 클릭하세요.
  2. Create test users 버튼을 클릭해 테스트 사용자를 생성하세요.
  3. 기존 테스트 사용자의 Options 버튼을 클릭하면 "이름 및 비밀번호 변경" 등 추가 작업을 할 수 있습니다.

6단계: Facebook 로그인 설정 게시​

일반적으로 테스트, 관리자, 개발자 사용자만 앱으로 로그인할 수 있습니다. 실제 환경에서 일반 Facebook 사용자가 앱으로 로그인할 수 있도록 하려면 앱을 게시해야 할 수 있습니다.

  1. Facebook App Dashboard에서 사이드바의 Publish를 클릭하세요.
  2. 필요하다면 Privacy Policy URL 및 User data deletion 필드를 입력하세요.
  3. 오른쪽 하단의 Save changes 버튼을 클릭하세요.
  4. 앱 상단 바의 Live 스위치 버튼을 클릭하세요.

Facebook 커넥터 (Connector) 활용하기​

Facebook 커넥터 (Connector)를 생성하고 Facebook과 연결한 후, 이를 엔드유저 플로우에 통합할 수 있습니다. 필요에 맞는 옵션을 선택하세요:

"Facebook으로 로그인" 활성화​

  1. Logto 콘솔에서 로그인 경험 > 회원가입 및 로그인으로 이동하세요.
  2. 소셜 로그인 섹션에서 Facebook 커넥터 (Connector)를 추가하여 사용자가 Facebook으로 인증 (Authentication)할 수 있도록 하세요.

소셜 로그인 경험에 대해 더 알아보세요.

Account API를 사용하여 앱 내에 맞춤형 계정 센터를 구축하고, 로그인한 사용자가 자신의 Facebook 계정을 연동하거나 연결 해제할 수 있도록 하세요. Account API 튜토리얼을 따라하세요

팁:

Facebook 커넥터 (Connector)는 소셜 로그인을 활성화하지 않고 계정 연동 및 API 접근만을 위해 활성화할 수도 있습니다.

Facebook API 접근 및 작업 수행​

애플리케이션은 Secret Vault에서 저장된 Facebook 액세스 토큰 (Access token)을 가져와 Facebook API를 호출하고 백엔드 작업을 자동화할 수 있습니다 (예: 콘텐츠 게시 또는 게시물 관리). API 접근을 위한 저장된 토큰 조회 가이드를 참고하세요.

사용자의 Facebook 아이덴티티 관리​

사용자가 Facebook 계정을 연동한 후, 관리자는 Logto 콘솔에서 해당 연결을 관리할 수 있습니다:

  1. 사용자 관리로 이동하여 사용자의 프로필을 엽니다.
  2. 소셜 연결 항목에서 Facebook 항목을 찾아 관리를 클릭하세요.
  3. 이 페이지에서 관리자는 사용자의 Facebook 연결을 관리하고, Facebook 계정에서 제공 및 동기화된 모든 프로필 정보를 확인하며, 액세스 토큰 (Access token) 상태를 확인할 수 있습니다.
노트:

Facebook의 액세스 토큰 (Access token) 응답에는 구체적인 스코프 (Scope) 정보가 포함되어 있지 않으므로, Logto는 사용자가 부여한 권한 (Permission) 목록을 직접 표시할 수 없습니다. 그러나 사용자가 인가 (Authorization) 과정에서 요청된 스코프 (Scope)에 동의했다면, 애플리케이션은 Facebook API에 접근할 때 해당 권한 (Permission)을 갖게 됩니다. 필요한 스코프 (Scope)를 Facebook 개발자 콘솔과 Logto 모두에 정확히 설정하여 앱이 필요한 접근 권한을 갖도록 하는 것이 좋습니다.

참고 자료 (Reference)​

Facebook for Developers - Documentation Facebook Login Documentation