비즈니스 로그인 인증

비즈니스 로그인(일반적으로 Facebook 로그인으로 지칭)은 사이트에 있는 버튼을 사용하여 비즈니스 소유주가 플랫폼의 비즈니스를 Facebook 또는 Instagram 프로필에 연결할 수 있는 진입점입니다.

비즈니스 로그인은 플랫폼 화면(일반적으로 사이트의 관리자 패널)에 있고 비즈니스 로그인 플로를 트리거합니다. 비즈니스 소유주는 이 플로를 사용하여 Facebook 프로필과 사이트의 비즈니스 프레즌스를 연결하고 Facebook Business 확장 프로그램(FBE)을 활성화할 수 있습니다.

파트너와 고객 비즈니스를 연결하는 비즈니스 대행(OBO) 솔루션은 FBE 설치 시 생성됩니다. 파트너는 고객 비즈니스 관리자의 관리자 자격 증명(기존 방법) 외에도 파트너 비즈니스 관리자의 관리자 시스템 사용자의 자격 증명을 사용하여 FBE 시스템 사용자 액세스 토큰을 가져올 수 있습니다.

요구 사항

앱은 앱 검수를 완료하고 다음의 권한을 얻어야 할 수 있습니다.

• catalog_management — 앱이 카탈로그 기능을 활성화하는 경우에만 필요합니다. 또는 클라이언트를 대신하여 판매자 광고도 관리하려는 경우 ads_management 권한을 대신 요청할 수 있습니다.
• business_creative_management — Draper API를 사용하는 크리에이티브 앱일 경우에 해당합니다.

로그인 플로 설정

로그인 플로를 설정하려면 다음의 옵션을 검토하세요.

• URL을 통한 비즈니스 로그인 읽어들이기—Facebook JavaScript SDK를 사용하고자 할 경우에 권장합니다. 이 옵션을 사용하려면 각 비즈니스에 동적으로 생성된 URL을 사이트의 버튼에 연결해야 합니다.

• Facebook SDK를 통한 비즈니스 로그인 읽어들이기—Facebook SDK가 공통적인 클라이언트 측 기능을 제공합니다. 이 옵션은 보다 표준화된 방법으로 그와 동일한 플로를 시작하므로 여기에 익숙한 개발자에게 권장합니다.

URL을 통한 비즈니스 로그인 읽어들이기

URL을 통해 비즈니스 로그인을 트리거하려면 사이트에 URL이 열리는 버튼이 있어야 합니다.

비즈니스 로그인 URL은 다음의 쿼리 매개변수가 있어야 합니다.

앱에서 다이내믹 리디렉션 URI를 사용해야 하는 경우 비즈니스 로그인 플로가 완료된 후에 state 매개변수를 사용하여 다이내믹 정보를 리디렉션 URI에 다시 전달합니다.

아래의 예시에서는 올바른 형식의 extras 쿼리 매개변수가 business_config와 setup 개체를 모두 지정합니다.

예시 URL

https://facebook.com/dialog/oauth?
client_id=<FB_APP_ID>
&display=page
&redirect_uri="https://partner-site.com/redirectlanding"
&response_type=token
&scope=manage_business_extension
//   alternatively use catalog_management or ads_management
//   &scope=manage_business_extension,catalog_management,ads_management
&extras={
  "setup": {
    "external_business_id": "foo-123",
    "timezone": "America/Los_Angeles",
    "currency": "USD",
    "business_vertical": "APPOINTMENTS"
  },
  "business_config": {
    "business": {
      "name": "Foo Business"
    },
    "page_cta": {
      "enabled": true,
      "cta_button_text": "Book Now",
      "cta_button_url": "https://partner-site.com/foo-business",
      "below_button_text": "Powered by FBE Partner"
    },
    "page_card": {
      "enabled": true,
      "see_all_text": "See All",
      "see_all_url": "https://partner-site.com/foo-business",
      "cta_button_text": "Book"
    },
    "ig_cta": {
      "enabled": true,
      "cta_button_text": "Book Now",
      "cta_button_url": "https://partner-site.com/foo-business"
    },
    "messenger_menu": {
      "enabled": true,
      "cta_button_text": "Book Now",
      "cta_button_url": "https://partner-site.com/foo-business"
    },
    "thread_intent": {
      "enabled": true,
      "cta_button_url": "https://partner-site.com/foo-business"
    }
  },
  "repeat": false
}

Facebook SDK를 통한 비즈니스 로그인 읽어들이기

1단계. Facebook JavaScript SDK 읽어들이기

SDK를 다운로드해서 플랫폼에 호스팅하거나 Facebook 호스팅 SDK를 받을 수 있습니다. Facebook 호스팅 SDK를 사용하는 것을 권장합니다.

2단계. fbAsyncInit 함수를 Window 개체에 연결해 SDK를 설정합니다.

JavaScript SDK를 읽어들이기 전에 window 개체에 fbAsyncInit 함수가 있어야 합니다. SDK가 이 함수를 호출해 적절히 설정하고, window.fbAsyncInit()을 호출할 것입니다.

이 설정에는 다음과 같은 항목이 포함됩니다.

• appId: Facebook 앱 ID입니다.
• cookie: 쿠키를 활성화하고 서버가 이 세션에 액세스하도록 합니다.
• xfbml: 이 페이지의 소셜 플러그인을 파싱합니다.
• version: 사용할 그래프 API 버전을 SDK에 알립니다(이 문서는 v10.0이 최신 릴리스일 때 작성됨).

JavaScript SDK를 읽어들이기 전에 fbAsyncInit를 window 개체에 연결합니다.

3단계. FB.login() 함수('비즈니스 로그인'이라고도 지칭)를 사용해서 FBE를 시작합니다.

SDK를 읽어들이고 적절한 정보로 초기화한 다음에는 SDK를 사용하여 FB.login()을 읽어들입니다. FB.login() 함수에 전달한 중요한 매개변수는 다음과 같습니다.

1. 응답 콜백 함수
2. scope 및 extras 필드에 대한 개체

자세한 내용은 Facebook Business 확장 프로그램 API 개체 및 유형을 참조하세요.

예:

<script>
    window.fbAsyncInit = function() {
    //2. FB JavaScript SDK configuration and setup
        FB.init({
            appId      : '<app_id>', // FB App ID
            cookie     : true,  // enable cookies to allow the server to access the session
            xfbml      : true,  // parse social plugins on this page
            version    : 'v4.0' // uses graph api version v4.0
        });
    };

    //1. Load the JavaScript SDK asynchronously
    (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "https://connect.facebook.net/en_US/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));

     //3. Facebook login with JavaScript SDK
    function launchFBE() {
        FB.login(function (response) {
            if (response.authResponse) {
                // returns a User Access Token with scopes requested
                const accessToken = response.authResponse.accessToken;
                const message = {
                    'success':true,
                    'access_token':accessToken,
                };
                // store access token for later  
            } else {
              console.log('User cancelled login or did not fully authorize.');
            }
        }, {
            scope: 'catalog_management,manage_business_extension',
          // refer to the extras object table for details
            extras: {
                "setup":{
                  "external_business_id":"<external_business_id>",
                  "timezone":"America\/Los_Angeles",
                  "currency":"USD",
                  "business_vertical":"ECOMMERCE"
                },
                "business_config":{
                  "business":{
                     "name":"<business_name>"
                  },
                  "ig_cta": {
                    "enabled": true,
                    "cta_button_text": "Book Now",
                    "cta_button_url": "https://partner-site.com/foo-business"
                  }
                },
                "repeat":false
            }
        });
    }
</script>

4단계. FBE를 시작할 버튼 또는 링크를 만듭니다.

화면을 읽어들이려면 launchFBE()를 호출하는 onClick 함수의 버튼 또는 링크를 추가합니다.

<button onclick="launchFBE()"> Launch FBE Workflow </button>

모바일

모바일 FBE 구현에 관한 내용은 모바일 문서를 참조하세요.

더 알아보기

• 비즈니스 앱을 통합하는 방법
• Facebook 로그인에 대해 알아보기
• FBE API 개체 및 유형에 대해 알아보기
• 앱 검수 및 권한에 대해 자세히 알아보기
• FBE 제거 방법