Wpis ten pokazuje w jaki sposób możemy uruchomić możliwość logowania przez konto Facebook na naszej stronie – ściślej: jak możemy pobrać dane użytkownika z jego konta na Facebooku.
Na końcu wpisu znajduje się link do całego kodu na koncie GitHub
1. Stworzenie aplikacji Facebook
Pierwszym krokiem jaki musimy zrobić jest stworzenie aplikacji na Facebook-u.
Będąc zalogowanym na swoim koncie Facebook przechodzimy pod adres: https://developers.facebook.com/ W górnym prawym rogu z menu wybieramy pozycję „Dodaj nową aplikację” -> „Strona internetowa” -> Wpisujemy nazwę naszej aplikacji (dowolna) i klikamy na „Create new Facebook App ID” -> Wpisujemy email kontaktowy oraz wybieramy kategorię (dowolna) -> „Create App ID” -> w górnym prawym rogu klikamy na „Skip Quick Start”.
Otworzy się okno edycji aplikacji na Facebook-u. Z menu po lewej stronie wybieramy „Ustawienia” i w polu „App Domains” wpisujemy domenę naszej strony. Następnie klikamy na „Dodaj platformę” -> „Strona internetowa” i w polu „Site URL” ponownie wpisujemy adres URL naszej strony ze skryptem. Klikamy na „Zapisz zmiany”.
Następnie z menu po lewej stronie wybieramy „Recenzja aplikacji” i pod górnym napisem „Udostępnić aplikację publicznie?” wybieramy „Tak”, zapisujemy zmiany.
Zobaczmy tam pola „Identyfikator aplikacji” oraz „Klucz tajny aplikacji” – będą one nam niezbędne do uruchomienia naszego skryptu.
2. Zapisanie Api i Secret
Na serwerze tworzymy plik index.php i kopiujemy do niego następującą treść:
<?php
define('FACEBOOK_API','');
define('FACEBOOK_SECRET','');
define('REDIRECT_URI','');
$facebook_redirect_uri = 'https://www.facebook.com/v2.2/dialog/oauth?client_id='.FACEBOOK_API.'&redirect_uri='.urlencode(REDIRECT_URI).'&sdk=php-sdk-4.0.12&scope=email';
?>Uzupełniamy odpowiednie wartości: FACEBOOK_API to nasz „Identyfikator aplikacji”, FACEBOOK_SECRET to „Klucz tajny aplikacji” a REDIRECT_URI to adres bazowy naszej aplikacji. W niektórych przypadkach należy na jego końcu dodać znak /
Tworzymy też zmienną $facebook_redirect_uri, która zawiera adres URL przekierowujący do strony logowania w Facebook z ustawionym scope=email – dzięki temu będziemy mogli pobrać adres email użytkownika.
3. Dodanie linku do logowania przez Facebook
Następny krok to dodanie linku do logowania na naszej stronie www. Dodajemy w naszym pliku index.php po zamykającym tagu ?> następującą zawartość:
<!doctype html>
<html lang="pl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<a href="<?= $facebook_redirect_uri; ?>">Login by Facebook!</a>
</body>
</html>Po odświeżeniu strony w przeglądarce zobaczymy na niej link do logowania. Po kliknięciu zostaniemy przekierowani na konto Facebook (jeśli nie jesteśmy zalogowani na FB, to będziemy musieli teraz to zrobić) i zapytani o przydzielenie uprawnień do tej aplikacji. Po wyrażeniu zgody zostaniemy z powrotem przekierowani na naszą stronę. W zmiennej GET zostanie przekazany parametr CODE, w następnym kroku wykorzystamy go do pobrania Access Token.
4. Pobieranie Access Token.
Zanim będziemy mogli pobrać dane użytkownika musimy uzyskać jednorazowy Access Token na podstawie zmiennej CODE, którą otrzymaliśmy od Facebook.
Dodajemy do naszego kodu PHP (przed zamykający ?>) następujący kod:
if(!empty($_REQUEST['code'])){
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, "https://graph.facebook.com/oauth/access_token?fields=email,name&client_id=".FACEBOOK_API."&redirect_uri=".urlencode(REDIRECT_URI)."&client_secret=".FACEBOOK_SECRET."&code=".$_REQUEST['code']);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$fb_params = json_decode(curl_exec($ch));
curl_close($ch);
if(isset($fb_params->access_token)){
die($fb_params->access_token);
}
}Kod ten pobiera poprzez żądanie CURL jednorazowy Access Token na podstawie zmiennej CODE w tablicy GET. Access Token umożliwi nam pobranie wartości email oraz name użytkownika Facebook. Po odświeżeniu strony zobaczmy wyprintowany długi, jednorazowy kod.
5. Pobieranie danych użytkownika
Teraz możemy już przejść do pobrania poprzez CURL danych użytkownika.
Zmieniamy kod:
die($fb_params->access_token);
Na następujący:
$ch = curl_init(); curl_setopt($ch, CURLOPT_URL, "https://graph.facebook.com/me?fields=email,name&access_token=".$fb_params->access_token); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); $output = curl_exec($ch); $fb_user = json_decode($output); curl_close($ch);
Od tego momentu w zmiennej $fb_user będą przechowywane dane użytkownika. Aby się do nich dostać wykorzystujemy następujące komendy:
$fb_user->name; $fb_user->email;
6. Kompletny kod przykładu
Poniżej znajduje się przykładowy kod strony wykorzystujący logowanie przez konto Facebook:
<?php
define('FACEBOOK_API','');
define('FACEBOOK_SECRET','');
define('REDIRECT_URI','');
$facebook_redirect_uri = 'https://www.facebook.com/v2.2/dialog/oauth?client_id='.FACEBOOK_API.'&redirect_uri='.urlencode(REDIRECT_URI).'&sdk=php-sdk-4.0.12&scope=email';
$fb_user = '';
if(!empty($_REQUEST['code'])){
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, "https://graph.facebook.com/oauth/access_token?fields=email,name&client_id=".FACEBOOK_API."&redirect_uri=".urlencode(REDIRECT_URI)."&client_secret=".FACEBOOK_SECRET."&code=".$_REQUEST['code']);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$fb_params = json_decode(curl_exec($ch));
curl_close($ch);
if(isset($fb_params->access_token)){
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, "https://graph.facebook.com/me?fields=email,name&access_token=".$fb_params->access_token);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$output = curl_exec($ch);
$fb_user = json_decode($output);
curl_close($ch);
}
}
?>
<!doctype html>
<html lang="pl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<?php
if($fb_user){
?>
<p>Witaj <?= $fb_user->name ?>!</p>
<p>Twój adres email to <?= $fb_user->email ?></p>
<?php
}else{
?>
<a href="<?= $facebook_redirect_uri; ?>">Login by Facebook!</a>
<?php
}
?>
</body>
</html>
Mam nadzieję, że wpis ten pomoże Wam w integracji swojej strony z kontem FB!
Link do skryptu na GitHub: https://github.com/kamilwyremski/logowanie-facebook/