Facebook Graph-API: Permanent Page Access Token erzeugen

In diesem Blogbeitrag zeigen wir, wie man in PHP per Facebook-Authentifizierung (OAuth 2.0) einen permanenten Facebook Page Access Token erzeugt. Diese Funktionalität verwenden wir in unserer TYPO3 Social-Media Extension, um die Tokens für die Abfrage aus Facebook und Instagram zu generieren.

Damit mittels Graph API auf Daten aus Facebook oder Instagram zugreifen zu können, benötigt man über einen sogenannten "Token" zur Authentifizierung. Für den Zugriff auf Unternehmensdaten benötigt man einen sogenannten "Page Access Token", die normalerweise ein Ablaufdatum (= nach diesem Zeitpunkt ist der Token nicht mehr gültig) haben. Es besteht allerdings auch die Möglichkeit einen "permaneten Page Access Token" zu erzeugen, dieser läuft niemals ab. Mit diesem Token kann also immer die Graph API initialisiert werden und damit Daten aus Facebook und/oder Instagram abgefragt werden. Mithilfe dieser Schritt-für-Schritt Anleitung ist es möglich Daten aus der eigenen Facebook- und Instagram-Seite per Graph-API abzufragen und auf der eigenen Website anzuzeigen.

1. Schritt: Facebook App erstellen

Eine Facebook-App kann auf der Facebook-Developer-Seite erstellt werden. Gehen Sie dazu wie folgt vor:

  • Schritt 1
    • Button „App erstellen“ klicken
  • Schritt 2
    • Art bzw. App-Typ: Keiner
  • Schritt 3
    • Wechseln Sie zu "Einstellungen -> Allgemein"
    • Anzeigename eintragen
    • Kontakt-E-Mail-Adresse der App eintragen
    • Zweck der App: Du oder dein eigenes Unternehmen
    • Unternehmenskonto: Hier die gewünschte Seite auswählen – Ihr Unternehmenskonto
Faebook App erstellen
Facebook App im Facebook Developer Portal erstellen

2. Schritt: Serverseitiger Code (PHP) - Facebook Authenticate

Um einen permanent Page Access Token zu erstellen, muss Serverseitig folgender PHP-Code ausgeführt werden. Dieser wird für die Authentifizierung mittels OAuth2 verwendet udn auch um die Access-Tokens auszutauschen:

  • Short-Lived Access Token gegen Long-Lived Access Token
  • Long-Lived Access Token gegen Permanent Access Token

Der folgende Aufruf wird hier als TYPO3-Plugin-Controller implementiert. Dieser kann aber auch 1:1 so in irgendeiner anderen serverseitigen PHP-Datei verwendet werden:

public function loginAction(){	session_start();	$facebookAppId = "[APP-ID]";	$facebookAppSecret = "[APP-Secret]";	$fb = new Facebook([		'app_id' => $facebookAppId,		'app_secret' => $facebookAppSecret,		'default_graph_version' => 'v2.5',	]);	$helper = $fb->getRedirectLoginHelper();	$permissions = ['public_profile', 'pages_show_list', 'pages_read_user_content', 'pages_read_engagement', 'pages_messaging', 'pages_manage_posts'];	if (isset($_SESSION['facebook_access_token'])) {		$accessToken = $_SESSION['facebook_access_token'];	} else {		try {			$accessToken = $helper->getAccessToken();		} catch (\Exception $e) {			$accessToken = null;		}	}	if (isset($accessToken)) {		if (isset($_SESSION['facebook_access_token'])) {			$fb->setDefaultAccessToken($_SESSION['facebook_access_token']);			if (!empty($_GET['code'])) {				session_destroy();				$url = strtok($_SERVER['REQUEST_URI'], '?');				header('Location: ' . $url);			}		} else {			// getting short-lived access token			$_SESSION['facebook_access_token'] = (string)$accessToken;			// OAuth 2.0 client handler			$oAuth2Client = $fb->getOAuth2Client();			// Exchanges a short-lived access token for a long-lived one			$longLivedAccessToken = $oAuth2Client->getLongLivedAccessToken($_SESSION['facebook_access_token']);			$_SESSION['facebook_access_token'] = (string)$longLivedAccessToken;			// setting default access token to be used in script			$fb->setDefaultAccessToken($_SESSION['facebook_access_token']);			//get permanent page access token			$resp = $fb->sendRequest('GET', '/me', array(				'fields' => 'id',			), $longLivedAccessToken);			$userId = json_decode($resp->getBody())->id;			$resp = $fb->sendRequest('GET', '/' . $userId . '/accounts', array(				'acccess_token' => $longLivedAccessToken,			), $longLivedAccessToken);			$respDataPageToken = json_decode($resp->getBody())->data;			$permanentPageAccessToken = $respDataPageToken[0]->access_token;			$this->view->assign('access_token', $permanentPageAccessToken);			$this->view->assign('success', true);		}	} else {		if (!empty($_GET['code'])) {			session_destroy();			$url = strtok($_SERVER['REQUEST_URI'], '?');			header('Location: ' . $url);		}		$loginUrl = $helper->getLoginUrl($this->uriBuilder->getRequest()->getRequestUri(), $permissions);		$this->view->assign('login_url', $loginUrl);	}}

Im obigen Snippet muss noch [APP-ID] und [APP-Secret] mit ihren Daten aus der Facebook-App ersetzt werden (welche in Schritt 1 erstellt wurde).

Bei dein Permissions im obigen Snippet, können Sie ihre individuell benötigten Berechtigungen angeben - eine übersicht aller Facebook Berechtigungen finden sie unter diesem Link.

3. Schritt: Frontend-Template

Das Frontend-Template ist wirklich sehr einfach gehalten. Entweder zeigen wir an:

  • einen Link zum Facebook-Login
  • generierten Facebook permanent Page Access Token inkl. Link zum Facebook Access Token Debugger

Hierbei handelt es sich auch wieder um ein TYPO3-Fluid-Template, welches aber sehr leicht umgebaut werden kann:

<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"			data-namespace-typo3-fluid="true"><f:layout name="Default"/><f:section name="main">	<div class="va--section">		<div class="va--row">			<div class="va--col-2 va--col-offset-0 va--col-xxs-6 va--col-offset-xxs-0 va--col-s-12 va--col-offset-s-0">				<div class="ce-bodytext">					<h2 class="h2 text-center">Facebook Login Page</h2>				</div>			</div>		</div>		<div class="va--row">			<f:if condition="{success}">				<f:then>					<h3 class="h3 text-center">Permanent Page Access Token</h3>                  <p>{access_token}</p>					<p>You can check and debug the token here: <a  target="_blank" href="https://developers.facebook.com/tools/debug/accesstoken/?access_token={access_token}&version=v13.0">Debug Page Access Token</a>.</p>				</f:then>				<f:else>					<a href="{login_url}">Log in with Facebook here</a>.				</f:else>			</f:if>		</div>	</div></f:section>

4. Schritt: Facebook-App konfigurieren

In diesem Schritt werden wir nun die Facebook-App richtig konfigurieren und für den Login vorbereiten. Dazu wieder auf die Facebook-Developer Website wechseln und die in Schritt 1 angelegte App öffnen. 

  • Einstellungen -> Allgemein
    • In das Feld App-Domains die Website-URL eintragen
    • Änderungen speichern

Nun muss noch der Facebook-Login konfiguriert werden:

  • Produkt hinzufügen
  • Facebook Login -> Einrichten
  • Web auswählen
  • Seiten-URL eingeben
  • Speichern
  • Zu Facebook Login -> Einstellungen wechseln
  • Gültige OAuth Redirect URIs hier die Seiten-URL mit dem Facebook-Login eingeben – zB.
  • Änderungen speichern
  • App-Modus kann auf „In Entwicklung“ belassen werden

Der Facebook App-Modus kann auf "In Entwicklung" belassen werden, wenn man nur auf eigene Seiten und Benutzer zugreifen möchte.

Facebook App - Login Konfiguration

5. Schritt: Permanent Page Access Token erzeugen

Wenn man nun auf den Link im Template klicken, öffnet sich der Facebook Login-Dialog, welcher anschließend die Berechtigungen und Seiten abfrägt. Der Token wird von Facebook an den Server gesendet und im Frontend wieder ausgegeben. Diesen kann man nun mittels des Facebook Token Debuggers überprüfen:

Facebook - Access Token Debugger - Page Token - permanenter Zugriff
Facebook - Access Token Debugger - Page Token - permanenter Zugriff

Social Media Extension

Sie wollen auf Ihrer Website die Daten von Facebook, Instagram, Youtube, Twitter und co. auslesen? Dann ist unsere TYPO3-Socia-Media-Extension genau das richtige für Sie!

Wir entwickeln digitale Lösungen mit Leidenschaft

Warum wir das tun? Weil die Verwirklichung Ihrer Vision unser größter Anspruch und die schönste Anerkennung ist. Deshalb nehmen wir uns gerne ausreichend Zeit für die Realisierung Ihres digitalen Projekts.

Kontaktieren Sie uns, wir sind gerne für Ihre Fragen da:

Passend zu diesem Thema:

TYPO3 Social Media Extension

TYPO3 Social Media Extension

Wir haben eine TYPO3-Extension entwickelt, welche Content von verschiedenen Social Media Kanälen (Facebook, Instagram, Twitter, Youtube, Pinterest, RS…

TYPO3 Social Media Extension

TYPO3 Social Media Extension

Für einige unserer Projekte haben wir in der Vergangenheit eine Anbindung an Social Media Kanäle zur Integration eines Social-Streams auf einer TYPO3 …

VKB Immobilien / Relaunch

VKB Immobilien / Relaunch

Anfang des Jahres hatten wir die Gelegenheit den Relaunch der Immobilien-Plattform der VKB Bank durchzuführen. Als Teil dieses spannenden Projekts ent…