Facebook 로그인 연결하기

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

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

먼저 복사해 둘 주소

손님이 Facebook에서 로그인을 마치면, Facebook은 그 결과를 정해진 주소로 돌려보냅니다. 이 주소를 Facebook에 등록해야 하므로 먼저 복사해 두세요. 3단계에서 붙여 넣습니다.

아래에서 내 Space를 고르면 식별자가 채워진 주소가 됩니다.

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

직접 채우고 싶다면 {spaceId} 자리에 내 Space의 식별자를 넣으세요. 콘텐츠 스튜디오에서 그 Space를 열고 브라우저 주소창을 보면, /spaces/ 다음에 오는 값이 식별자입니다.

이 주소는 내 사이트 주소가 아니라 WEEGLOO가 로그인 결과를 받는 자리입니다. 그래서 내 사이트를 아직 만들지 않았어도 지금 확정됩니다. 콘텐츠 스튜디오에서 Facebook을 켰다면 Step 1에 같은 주소가 보이므로, 거기서 복사해도 됩니다.

Facebook에서 값 두 개 받기

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

1

앱 만들기

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에 문의를 받을 주소를 입력하세요.

  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 화면에서 지금까지 고른 내용을 확인하고 앱을 만드세요.

App contact email은 Facebook이 앱에 대해 연락할 때 쓰는 주소입니다. 비즈니스 포트폴리오는 화면 설명대로 나중에 추가할 수 있습니다.

2

이메일 권한 추가하기

WEEGLOO는 손님이 Facebook으로 로그인할 때 이메일을 함께 받아 회원에 담습니다. email 권한을 추가하지 않으면 Facebook이 이메일을 넘겨주지 않으므로, 이 단계를 건너뛰지 마세요.

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

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

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

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

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

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

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

같은 Space에서는 한 이메일로 한 번만 가입할 수 있습니다.

3

로그인 주소 등록하기

화면에 나오는 OAuth는 Facebook 계정으로 로그인하게 해 주는 방식의 이름입니다.

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

  2. Valid OAuth Redirect URIs 칸에 먼저 복사해 둘 주소에서 복사한 주소를 붙여 넣으세요.

  3. Save Changes를 누르세요.

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

여기 넣을 것은 위에서 복사한 주소 하나뿐입니다. 같은 화면 위쪽의 Redirect URI Validator에서는 Redirect URI to check에 주소를 넣고 Check URI를 눌러 그 주소를 확인해 볼 수 있습니다.

4

App ID와 App secret 복사하기

값 두 개는 앱의 기본 설정 화면에 있습니다.

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

  2. Basic을 누르세요.

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

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

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

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

App ID는 이 화면에 그대로 남아 있고, App secret은 Show를 누를 때마다 다시 볼 수 있습니다. 값을 옮겨 적지 못한 채 화면을 벗어나도 새로 만들 필요가 없습니다. 다만 App secret은 비밀 값이니 남에게 알려 주거나 공개된 곳에 적어 두지 마세요.

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

심사를 통과해야 손님 전체가 로그인할 수 있습니다

방금 만든 앱은 아직 심사를 받지 않았습니다. 심사를 통과하기 전에는 앱을 만든 계정으로만 로그인됩니다.

WEEGLOO 연결은 심사를 기다리지 않아도 됩니다. 값 두 개를 넣으면 로그인은 그 자리에서 동작합니다.

손님 입장에서 시험해 보려면 왼쪽 메뉴에서 App roles를 펼쳐 Test users를 누르고, Create test users로 시험용 계정을 만드세요.

Test users 화면. Facebook Accounts 계정 수 옆에 Create test users 버튼이 있습니다

손님 전체에게 열 준비가 되면 Review의 App Review에서 제출합니다. 이 화면에는 앞에서 다룬 email과 public_profile이 Not submitted로 올라와 있습니다.

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

필요한 자료와 심사 기준은 Meta 문서에 있습니다.

받은 값을 WEEGLOO에 넣기

이제 손에 값 두 개가 있습니다. 두 값이 콘텐츠 스튜디오의 어느 칸에 들어가는지는 이렇습니다.

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

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

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

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

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

다음으로 할 일

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