본문으로 건너뛰기

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

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

팁:

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

시작하기​

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

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

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

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

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

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

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

사용 사례는 앱이 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 Developer Documentation을 참고하세요.

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 커넥터 활용하기​

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

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

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

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

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

팁:

Facebook 커넥터를 소셜 로그인 없이 계정 연결 및 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)을 갖게 됩니다. 앱이 필요한 접근 권한을 갖도록 Facebook 개발자 콘솔과 Logto 양쪽 모두에서 필요한 스코프 (Scope)를 정확히 설정하는 것이 좋습니다.

참고 자료​

Facebook for Developers - 문서 Facebook 로그인 문서