비즈니스 앱 인증

Facebook 화면에서 제공되는 비즈니스 앱은 소규모 기업이 타사 비즈니스 앱을 발견 및 연결하여 적은 기술 비용으로 비즈니스 도구를 쉽게 설정함으로써 비즈니스를 성장시키고 목표를 달성할 수 있도록 합니다.

비즈니스 로그인과 달리 비즈니스 앱 플로는 Facebook 화면에서 시작되기 때문에 사용자가 팝업 브라우저를 통해 사이트에 로그인하여 인증하고, 연결할 비즈니스(개발자가 정의한 external_business_id로 식별)를 선택해야 하는 추가적인 단계를 거쳐야 합니다. 인증이 성공하면 사용자가 플로로 다시 돌아와 등록을 완료합니다.

비즈니스 앱 화면에 앱을 표시하고 싶다면 인증 URL, Webhooks 엔드포인트를 구축하고 개발자 패널에서 설정 및 검증해야 합니다.

모든 앱은 통합 검수를 신청해야 합니다. FBE 통합이 승인되고 나면 앱이 일반 사용자에게 제공됩니다.

인증 URL 구현

비즈니스 앱이 Facebook 페이지 화면, Instagram 및 Facebook Business Suite에서 비즈니스 로그인과 유사한 플로를 시작합니다. 이 플로를 활성화하고 플로에 앱을 등록하려면 맞춤 설정 인증 UI를 제공해야 합니다. 이 맞춤 설정 UI에서 사용자가 사이트에서 비즈니스를 선택한 다음, Facebook, Instagram 또는 Facebook Business Suite 플로로 리디렉션할 수 있습니다.

사용 방법

1. 플랫폼의 인증 플로를 읽어들이는 맞춤 설정 URL 엔드포인트(인증 URL)를 제공합니다.
• 인증 URL을 통해 사용자(비즈니스 소유주)가 플랫폼의 로그인 플로로 이동해야 합니다.
• 플랫폼에서 새 계정을 등록할 수 있는 옵션을 제공합니다(즉, '가입'). 등록이 끝나면 사용자는 Facebook으로 돌아가 계정 연결을 완료하게 됩니다.
• 플랫폼에서 계정 1개당 여러 비즈니스를 지원할 경우 로그인에 성공한 후 인증 URL이 띄우는 UI에서 사용자가 플랫폼에 등록된 비즈니스 중 어느 것을 Facebook 자산과 연결할지 선택할 수 있어야 합니다.
예 — 인증 URL

https://yourwebsite.com/fbe-auth

2. Facebook이 등록 플로 중에 제공된 인증 URL을 읽어들이고 redirect_uri 쿼리 매개변수를 끝에 첨부합니다(이는 추가적 쿼리 매개변수를 포함할 수 있는 리디렉션 URI입니다).

   https://yourwebsite.com/fbe-auth?redirect_uri=<an_encoded_redirect_uri_with_query_params>

   예 — redirect_uri 쿼리 매개변수에서 첨부할 수 있는 인코딩된 리디렉션 URI입니다.

   https://www.facebook.com/local/dev/transaction_tool_selector/redirect?app_id=<int_value>&app_name=<string_value>&page_id=<int_value>

   이 단계가 끝날 무렵에 Facebook이 다음과 같이 인코딩된 redirect_uri 쿼리 매개변수가 첨부된 인증 URL을 읽어들입니다.

   https://yourwebsite.com/fbe-auth?redirect_uri=https%3A%2F%2Fwww.facebook.com%2Flocal%2Fdev%2Ftransaction_tool_selector%2Fredirect%3Fapp_id%3D123%26app_name%3DSample%26page_id%3D456

   중요 참고: 다른 대상에게 사용자 데이터가 공유되지 않도록 다음의 정규식과 일치할 경우에만 redirect_uri로 리디렉션합니다.

   https?:\/\/(www\.|m\.|l\.|web\.|business\.)?(\d{4,5}\.od\.)?(business\.)?(facebook|instagram|whatsapp)\.com(\/.*)?

3. 사용자가 로그인/가입을 완료하고 플랫폼에서 비즈니스를 선택하고 나면(해당하는 경우), 쿼리 매개변수(비즈니스 로그인에 사용하는 것과 동일)로 인코딩된 extras 개체를 추가하고 그 안에 business_config와 setup을 정의한 다음(구현하려는 등록 구성에 따라 달라짐), redirect_uri에서 해당 URL로 리디렉션합니다.

   https://www.facebook.com/local/dev/transaction_tool_selector/redirect?app_id=<int_value>&app_name=<string_value>&page_id=<int_value>&extras=<an_encoded_json_string>

iframe 인증

비즈니스 앱 내에서 더욱 원활한 사용자 환경을 지원하고 플랫폼에서 새로운 계정 생성을 더욱 잘 지원하려면 인증 URL이 Facebook 화면에서 iframe으로 읽어들여지도록 해야 합니다. iframes 문서에서 구현 가이드라인과 메시지 후 사양을 참조하세요.

Webhooks 구현

Webhooks를 사용하면 Facebook 소셜 그래프에 있는 특정 개체의 변경 사항에 대한 실시간 HTTP 알림을 받을 수 있습니다. FBE의 경우 사용자가 앱(예: 비즈니스 앱)을 사용하여 FBE를 설치하거나 제거한 후 해당 행동에 대한 자세한 정보를 Webhooks를 통해 수신합니다.

Facebook의 요청을 처리할 수 있는 안전한 서버에 엔드포인트를 빌드해야 합니다. 이는 비즈니스 앱에서 앱을 제공하고자 하는 모든 플랫폼 파트너에게 필수입니다. 이 엔드포인트를 빌드하는 방법에 대한 자세한 내용은 Webhooks 구현 가이드를 참조하세요.

Webhooks 설정 및 검증

Webhooks 엔드포인트가 준비되면 다음과 같은 단계를 거쳐 설정 및 검증해야 합니다.

1. Facebook Business 확장 기능에서 Webhooks 카드를 사용하고 앱 대시보드의 설정 섹션에서 엔드포인트를 검증한 다음, fbe_install Webhooks를 구독합니다. 자세한 내용은 Webhooks 구현 가이드를 참조하세요.
2. Webhooks 제품이 올바르게 구성되면 카드 오른쪽 상단의 원이 녹색으로 바뀌고 체크 표시 아이콘이 보여야 합니다.

개발자 패널을 통한 설정 및 검증

Facebook Business 확장 프로그램 개발자 패널은 개발자 앱 대시보드의 제품입니다. 앱에 FBE 기능을 부여하고 나면 개발자 패널을 사용해서 인증 URL과 Webhooks 엔드포인트를 설정 및 검증하고 앱에서 비즈니스에 제공하는 기능에 대한 상세 정보를 추가합니다.

인증 URL 설정 및 검증

인증 URL이 준비되면 다음과 같은 단계를 거쳐 설정 및 검증해야 합니다.

1. 앱 대시보드에서 FBE 개발자 패널로 이동합니다. 참고: 아직 구성하지 않았다면 지침에 따라 이를 추가하세요.
2. 설정 탭을 클릭하고 비즈니스 앱 화면 카드를 찾습니다.
3. 비즈니스 앱 화면에 내 앱 표시 확인란을 선택합니다.
4. 인증 URL 입력에 인증 URL을 입력합니다.
5. 테스트 인증 버튼을 클릭합니다.
• 팝업 창이 열리고 Facebook이 비즈니스 앱 화면에서 사용하는 방식과 비슷하게 URL을 읽어들입니다.
• 로그인과 비즈니스 선택을 진행합니다(해당할 경우).
• 리디렉션이 끝나면 팝업 창이 닫힙니다. 구현에 오류가 있을 경우(예: extras의 잘못된 값) 이 카드 하단에 표시되므로 수정해야 하는 내용을 알 수 있습니다. 테스트 인증 기능은 redirect_uri에 대한 입력만 검증하고 실제로 FBE를 설치하지 않습니다.
6. 구현 단계와 extras 구성이 의도한 대로 구현되고 나면 이 단계가 유효한 것으로 표시됩니다(카드 오른쪽 상단 모서리의 녹색 체크). 그러면 Facebook에서 직접 이 등록 플로(FBE 설치)를 전체적으로 테스트하는 기능이 활성화됩니다(아래의 섹션 참조).

엔드투엔드 테스트

인증 URL과 Webhooks 엔드포인트가 개발자 패널에서 성공적으로 설정 및 검증되고 나면 앱을 라이브 모드로 전환하기 전에 앱에서 지원하는 등록 플로를 전반적으로 테스트할 수 있습니다. 이는 Facebook Business Suite 또는 Facebook 페이지 화면에서 다음과 같이 직접 실행할 수 있습니다.

Facebook Business Suite 사용

1. Facebook Business Suite로 이동합니다.
2. 왼쪽 레일에서 더 많은 도구를 클릭한 다음, 비즈니스 앱을 클릭합니다.
3. 모든 사용 가능한 앱이 나열됩니다. 개발자 패널 설정 탭에서 업종으로 선택한 카테고리에서 자신의 앱을 확인할 수 있습니다.
4. 앱에는 테스트 전용 - 비공개 레이블이 있을 것입니다. 앱에서 역할이 부여된 사용자에게만 테스트용으로 제공하고 아직 일반 사용자에게는 제공하지 않는다는 뜻입니다.
5. 연결을 클릭하고 인증 URL에서 제공하는 경험을 테스트하기 시작합니다.
   • 등록 플로는 실제 FBE를 설치하고 Webhooks 알림을 실행합니다.

Facebook 페이지 화면 사용

1. 관리자 액세스 권한이 있는 Facebook 페이지로 이동합니다.
2. Facebook 페이지의 왼쪽 레일에서 비즈니스 앱을 클릭합니다.
3. 모든 사용 가능한 앱이 나열됩니다. 개발자 패널 설정 탭에서 업종으로 선택한 카테고리에서 자신의 앱을 확인할 수 있습니다.
4. 앱에는 테스트 전용 - 비공개 레이블이 있을 것입니다. 앱에서 역할이 부여된 사용자에게만 테스트용으로 제공하고 아직 일반 사용자에게는 제공하지 않는다는 뜻입니다.
5. 연결을 클릭하고 인증 URL에서 제공하는 경험을 테스트하기 시작합니다.
   • 등록 플로는 실제 FBE를 설치하고 Webhooks 알림을 실행합니다.

더 알아보기

• FBE용 비즈니스 로그인을 사용하는 방법
• extras
• business_config
• setup
• FBE 제거 방법