Authentifizierung bei Unternehmens-Login

Der Unternehmens-Login (im Allgemeinen als Facebook Login bekannt) ermöglicht es Unternehmensinhaber/innen, über einen Button auf deiner Site ihr Unternehmen auf deiner Plattform mit ihren Facebook- oder Instagram-Profilen zu verknüpfen.

Der Unternehmens-Login befindet sich auf der Oberfläche deiner Plattform (in der Regeln in einem internen Administrationsbereich auf deiner Site) und löst den Unternehmens-Login-Vorgang aus. Unternehmensinhaber können mit diesem Vorgang ihre Facebook-Profile mit ihrer Unternehmenspräsenz auf deiner Website verknüpfen und dadurch FBE-Features (Facebook Business Extension) aktivieren.

Eine OBO-Business-Lösung (On Behalf Of; im Namen für), die das Partner- und die Kunden-Unternehmen miteinander verknüpft, wird bei der FBE-Installation erstellt. Darüber kann der Partner mit den Anmeldedaten eines Business Manager-Admin-Systemnutzers (zusätzlich zur bislang genutzten Methode über die Anmeldedaten des Business Manager-Admins des Kunden) ein Token für den Nutzerzugriff auf das FBE-System abrufen.

Anforderungen

Deine App muss möglicherweise den App Review abschließen, um die folgenden Berechtigungen zu erhalten:

• catalog_management: nur wenn deine App Katalogfunktionen aktiviert. Alternativ kannst du die Berechtigung ads_management anfordern, wenn du im Auftrag des Kunden auch Anzeigen von Händlern verwalten möchtest.
• business_creative_management: wenn es sich bei deiner App um eine Werbeanzeigen-App handelt, die die Draper-API nutzt.

Login-Vorgang einrichten

Zur Einrichtung des Login-Vorgangs stehen dir folgende Optionen zur Verfügung:

• Unternehmens-Login über URL laden: Empfohlen, wenn du das Facebook JavaScript-SDK nicht nutzen möchtest. Bei dieser Option musst du eine dynamisch erstellte URL pro Unternehmen über einen Button auf deiner Website verknüpfen.

• Unternehmens-Login über Facebook-SDK laden: Das Facebook-SDK bietet gängige clientseitige Funktionalität. Wir empfehlen diese Option für Entwickler*innen, die stärker damit vertraut sind, da sie eine standardisiertere Herangehensweise beim Start desselben Vorgangs bietet.

Unternehmens-Login über URL laden

Füge auf deiner Website einen Button hinzu, über den eine URL geöffnet wird, um das Unternehmens-Login über URL auszulösen.

Die Unternehmens-Login-URL muss diese Abfrageparameter aufweisen:

Wenn deine App dynamische Weiterleitungs-URIs erfordert, übergebe die dynamischen Informationen nach Abschluss des Unternehmens-Login-Vorgangs mit dem state-Parameter zurück an die Weiterleitungs-URI.

Im nachstehenden Beispiel ist der Abfrageparameter extras richtig formatiert und gibt das business_config- und das setup-Objekt an.

Beispiel-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
}

Unternehmens-Login über Facebook-SDK laden

Schritt 1: Lade das Facebook JavaScript-SDK.

Du kannst das SDK herunterladen und auf deiner Plattform hosten oder das von Facebook gehostete SDK herunterladen. Wir empfehlen, das von Facebook gehostete SDK zu verwenden.

Schritt 2: Hänge die fbAsyncInit-Funktion an das Window-Objekt an, um die SDK-Einstellungen einzurichten.

Bevor du das JavaScript-SDK lädst, muss die fbAsyncInit-Funktion auf dem window-Objekt vorhanden sein. Das SDK ruft die Funktion window.fbAsyncInit() zur Einrichtung auf.

Diese Einrichtung umfasst Folgendes:

• appId: Facebook-App-ID.
• cookie: Aktiviert Cookies, damit der Server auf diese Sitzung zugreifen kann.
• xfbml: Parst soziale Plugins auf dieser Seite.
• version: Teilt dem SDK mit, welche Graph API-Version verwendet werden soll (dieses Dokument wurde erstellt, als v10.0 die aktuelle Version war)

Bevor du das JavaScript-SDK lädst, musst du die fbAsyncInit-Funktion an das window-Objekt anhängen.

Schritt 3: Starte FBE über die FB.login()-Funktion (auch als „Unternehmens-Login“ bezeichnet).

Nach dem Laden des SDK und der Initialisierung mit den richtigen Informationen nutzt du das SDK zum Laden von FB.login(). Die wichtigen Parameter, die an die FB.login()-Funktion übergeben werden müssen, sind:

1. Antwort-Rückruf-Funktion
2. Objekt für scope- und extras-Feld

Nähere Informationen findest du unter Facebook Business Extension: API-Objekte und -Typen.

Beispiel:

<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>

Schritt 4: Erstelle einen Button oder Link zum Starten von FBE.

Füge zum Laden des Bildschirms einen Button hinzu oder verknüpfe die onClick-Funktion, mit der launchFBE() aufgerufen wird:

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

Mobilgeräte

Informationen zur FBE-Implementierung auf Mobilgeräten findest du in der Dokumentation zu Mobile.

Mehr dazu

• So funktioniert eine Business-Apps-Integration
• Weitere Informationen zu Facebook Login
• Facebook Business Extension: API-Objekte und -Typen anzeigen
• Weitere Informationen zu App Review und Berechtigungen
• Deinstallation von FBE