Facebook 로그인 연결하기

내 서비스 이용자가 Facebook 계정으로 가입하게 하려면, Facebook에 내 서비스를 등록하고 App ID와 App secret을 받아 와야 합니다.

이 페이지는 App ID와 App secret을 받는 순서를 안내합니다. 받은 두 값을 WEEGLOO에 넣는 방법은 App ID와 App secret을 WEEGLOO에 넣기에 있습니다.

Facebook에서 App ID와 App secret 받기

Facebook 계정으로 로그인한 뒤, 아래 네 단계를 차례로 진행하세요. 여기서 하는 일에는 비용이 들지 않습니다.

1

앱 만들기

이미 쓰던 앱이 있고 그 앱의 Use cases 화면에 Facebook Login 항목이 있다면, 새로 만들지 않고 그 앱을 그대로 써도 됩니다. 그때는 이 단계를 건너뛰고 이메일 권한 추가하기로 가세요.

App details, Use cases, Business, Requirements, Overview 다섯 화면을 차례로 지납니다.

  1. 앱 목록 화면(https://developers.facebook.com/apps (새 탭에서 열림))을 여세요.

  2. Create App을 누르세요.

    앱이 하나도 없는 Apps 화면. 가운데에 No apps yet 안내와 Create App 버튼이 있습니다

  3. App name에 나중에 알아볼 이름을 입력하세요(예: 포근한 옷장).

  4. App contact email에 문의를 받을 주소를 입력하세요. Facebook이 이 앱에 대해 연락할 때 쓰는 주소입니다.

  5. Next를 누르세요.

    단계별로 채우는 화면의 App details 단계. App name 칸과 App contact email 칸이 있고 오른쪽 아래에 Next 버튼이 있습니다

  6. Authenticate and request data from users with Facebook Login에 체크하세요.

  7. Next를 누르세요.

    단계별로 채우는 화면의 Use cases 단계. 여섯 항목 중 Authenticate and request data from users with Facebook Login에 체크되어 있습니다

  8. I don’t want to connect a business portfolio yet. 항목을 고르세요. 비즈니스 포트폴리오는 화면 설명대로 나중에 추가할 수 있습니다.

  9. Next를 누르세요.

    단계별로 채우는 화면의 Business 단계. I don’t want to connect a business portfolio yet. 선택지와 비즈니스가 없다는 안내가 보입니다

  10. Requirements 화면의 내용을 읽고 Next를 누르세요. 입력할 것은 없습니다.

    단계별로 채우는 화면의 Requirements 단계. Publishing requirements 아래에 Business verification과 App Review가 나열되어 있습니다

  11. 마지막 Overview 화면에서 지금까지 고른 내용을 확인하고 앱을 만드세요.

2

이메일 권한 추가하기

WEEGLOO는 이용자가 Facebook으로 로그인할 때 이메일을 함께 받아 회원에 담습니다. 같은 Space에서는 한 이메일로 한 번만 가입할 수 있습니다. email 권한을 추가하지 않으면 Facebook이 이메일을 넘겨주지 않으므로, 이 단계를 건너뛰지 마세요.

  1. 앱 화면이 열려 있지 않다면, 앱 목록 화면(https://developers.facebook.com/apps (새 탭에서 열림))에서 로그인에 사용할 앱을 누르세요.

  2. 왼쪽 메뉴에서 Use cases를 누르세요.

  3. Facebook Login 항목의 Customize를 누르세요.

  4. 왼쪽에서 Permissions and features를 누르세요.

  5. email 행의 + Add를 누르세요.

    Permissions and features 목록. email 행은 Status에 아무 표시가 없고 Action에 + Add 버튼이, public_profile 행은 Ready for testing이 보입니다

  6. email과 public_profile 두 행의 Status가 모두 Ready for testing인지 확인하세요.

    같은 목록. email과 public_profile 두 행 모두 Status가 Ready for testing입니다

3

로그인 주소 등록하기

  1. Customize use case 화면이 열려 있지 않다면, 앱 목록 화면(https://developers.facebook.com/apps (새 탭에서 열림))에서 로그인에 사용할 앱을 누르세요. 그다음 왼쪽 메뉴의 Use cases에서 Facebook Login 항목의 Customize를 누르세요.

  2. 왼쪽에서 Settings를 누르세요.

  3. Valid OAuth Redirect URIs 칸에 아래 주소를 붙여 넣으세요. 내 Space를 고르면 식별자가 채워집니다.

    Space
    https://auth.weegloo.com/v1/spaces/{spaceId}/login/oauth2/code/facebook

    내 Space가 무엇인지 모르겠고 AI 에이전트에게 연동을 맡겨 두었다면, 에이전트에게 물어보는 방법도 있습니다. 대화창에 "Facebook 로그인에 등록할 리디렉션 주소 알려 줘"라고 요청하면 완성된 주소를 받습니다.

    같은 화면 위쪽의 Redirect URI Validator는 주소를 등록하는 자리가 아닙니다. Redirect URI to check에 주소를 넣고 Check URI를 누르면 그 주소를 확인해 볼 수 있습니다.

  4. Save Changes를 누르세요.

    Settings 화면. 위쪽에 Redirect URI Validator가, 아래쪽 Client OAuth settings에 Valid OAuth Redirect URIs 칸이 있습니다

4

App ID와 App secret 복사하기

App ID와 App secret은 앱의 기본 설정 화면에 있습니다.

이 화면 위에 빨간 Currently ineligible for submission 배너가 보일 수 있습니다. App icon, Privacy policy URL, Category가 비어 있다는 안내입니다. 세 항목은 심사를 제출할 때 필요한 것이고, 지금 로그인을 연결하는 데는 필요하지 않습니다.

  1. 앱 화면이 열려 있지 않다면, 앱 목록 화면(https://developers.facebook.com/apps (새 탭에서 열림))에서 로그인에 사용할 앱을 누르세요.

  2. 왼쪽 메뉴에서 App settings를 누르세요.

  3. Basic을 누르세요.

  4. App ID에 적힌 값을 복사해 두세요.

  5. App secret 오른쪽의 Show를 누르세요.

  6. 나타난 값을 복사해 두세요.

    App settings의 Basic 화면. App ID 값이 보이고 App secret은 점으로 가려진 채 오른쪽에 Show 버튼이 있습니다

두 값 모두 이 화면에서 언제든 다시 볼 수 있습니다. App secret은 Show를 누르면 되므로, 옮겨 적지 못한 채 화면을 벗어나도 새로 만들 필요가 없습니다. 다만 App secret은 비밀 값이니 남에게 알려 주거나 공개된 곳에 적어 두지 마세요.

시험해 볼 사람을 Tester로 추가하기

WEEGLOO 연결은 심사를 기다리지 않아도 됩니다. App ID와 App secret을 WEEGLOO에 넣으면 로그인은 그 자리에서 동작합니다.

다만 방금 만든 앱은 아직 심사를 받지 않아서, 그 전에는 앱을 만든 계정으로만 로그인됩니다. 다른 사람도 로그인해 보게 하려면 그 사람을 앱에 Tester로 추가하세요.

  1. 왼쪽 메뉴에서 App roles를 펼쳐 Roles를 누르세요.

  2. 오른쪽 위의 Add People을 누르세요.

    App roles 화면. All roles, Administrators, Developers, Testers, Analytics Users 탭이 있고 오른쪽 위에 Add People 버튼이 있습니다

  3. Tester를 고르세요.

  4. 아래 칸에 추가할 사람의 이름이나 Facebook ID를 입력하고 Add를 누르세요.

    Add people to your app 창. Administrator, Developer, Tester, Analytics User 중 Tester가 선택되어 있고 아래에 사람을 찾는 입력칸이 있습니다

바로 아래의 Test users 메뉴는 동작하지 않습니다.

모든 이용자에게 열려면 심사를 받습니다

Tester로 추가한 사람 말고 이용자 누구나 로그인하게 하려면 Facebook의 심사를 거쳐야 합니다. 준비가 되면 왼쪽 메뉴의 Review를 펼쳐 App Review를 여세요. 앞에서 추가한 email과 public_profile이 Not submitted에 올라와 있습니다. 두 권한이 맞는지 확인하고 오른쪽 아래의 Next를 누르면 제출 절차로 넘어갑니다.

Review 아래 App Review 화면. Not submitted 목록에 email과 public_profile이 올라와 있습니다

Next 뒤로도 여러 단계가 이어지는데, 이 페이지는 제출을 시작하는 데까지만 안내합니다. 나머지 절차와 심사 기준은 Meta 문서 (새 탭에서 열림)에 있습니다. 심사를 통과하면 그때부터 이용자 누구나 이 앱으로 로그인할 수 있습니다.

App ID와 App secret을 WEEGLOO에 넣기

이제 App ID와 App secret이 준비됐습니다. 두 값이 콘텐츠 스튜디오의 어느 칸에 들어가는지는 이렇습니다.

Facebook 화면콘텐츠 스튜디오
App ID앱 ID
App secret앱 시크릿 코드

여기서부터는 지금까지 어떻게 작업해 왔는지에 따라 갈립니다.

콘텐츠 스튜디오에서 직접 설정하고 있었다면 이렇게 진행하세요.

  1. 서비스 회원 로그인의 소셜 로그인 켜기로 돌아가세요.
  2. Facebook을 켜세요.
  3. Step 2의 앱 ID 칸에 App ID를 넣으세요.
  4. 앱 시크릿 코드 칸에 App secret을 넣으세요.
  5. 저장을 누르세요.

AI 에이전트에게 연동을 맡겨 두고 App ID와 App secret을 받아 오라는 안내를 받았다면, 받아 온 두 값을 대화창에 그대로 붙여 넣고 하던 작업을 이어 가세요. 남은 설정은 에이전트가 이어서 처리합니다.

다음으로 할 일

  • 서비스 회원 로그인: 받아 온 값을 콘텐츠 스튜디오에 넣고, 회원 로그인의 나머지 설정을 마칩니다.
  • 회원 역할과 권한: 가입한 회원이 무엇을 보고 쓸 수 있는지 정하는 ServiceUserRole을 만듭니다.
  • Auth API: 로그인을 내 사이트 코드에 붙일 때 필요한 요청 형식 같은 기술 명세를 다룹니다.