Integracja Facebook Connect z Django

10 July 2009 Comments

Pod nazwą Facebook Connect kryje się cała gama usług i API umożliwiających społeczną integrację swoich stron z Facebookiem. Za pomocą Facebook Connect możemy umożliwić logowanie do serwisu za pomocą konta z Facebooka, zapraszać znajomych takiego użytkownika, czy też umieszczać powiadomienia w jego feedzie o dokonaniach na naszej stronie (np. opublikował recenzję i informacja pojawi się także na Facebooku). Jak opisuje podana wcześniej strona Connect ma spore możliwości:

Dzielenie się zawartością: Wystarczy prosta wstawka JavaScript na naszych stronach by umożliwić bardzo łatwe dzielenie się zawartością z użytkownika Facebooka. Za pomocą meta tagów można doprecyzować jej działanie i stworzyć bardzo efektywny mechanizm promocji w tym serwisie:
Przekaz treści: Connect pozwala także na bardziej rozbudowany przekaz treści zawierającej grafiki, linki, elementy flashowe.
Przenośne komentarze: Jeżeli umożliwisz komentowanie treści za pomocą Facebookowych identyfikatorów to będziesz mógł przenieść ich wypowiedzi do Facebooka.
Autoryzacja: za pomocą prostego "przycisku" użytkownicy Facebooka mogą zyskać możliwość zalogowania/zarejestrowania się na twojej stronie, co znacznie upraszcza dla nich ten proces.
Targetowanie zawartości: mając dostęp do podstawowych danych użytkownika Facebooka (np. pochodzenie) można lepiej targetować zawartość strony. Mając dostęp do przyjaciół użytkownika można sugerować treść, jaka spodobała się przyjaciołom.
Aktywność znajomych: możesz publikować użytkownikowi doniesienia o aktywności jego znajomych w twoim serwisie.

Pełna dokumentacja znajduje się na wiki Facebooka. Warto zapoznać się z wymogami formalnymi stosowania tej usługi. Connect oparty jest o JavaScript i XFBML. Nie jest bezpośrednio potrzebny język server-side.

Implementacja Facebook Connect w Django

Zaczynamy od stworzenia aplikacji po stronie Facebooka
Potrzeby będzie nam klucz API (API Key) tej aplikacji. Także w zakładce "Połącz" (Connect) należy podać adres do strony, która będzie używała Facebook Connect (pod Connect URL)

Następnie należy stworzyć plik xd_receiver.htm w katalogu przeznaczonym na pliki związane z implementacją Facebook Connect. Zawartość tego pliku to:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <body> <script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/XdCommReceiver.js" type="text/javascript"></script> </body> </html>

W przypadku Django, gdzie pojęcie katalogów nie istnieje wystarczy wystawić taką stronę pod odpowiednim URLem. W tym przykładzie wykorzystam własny serwis. Profil użytkownika i wszystkie związane z nim akcje wykonuje aplikacja "userpanel" dostępna poprzez URL /user/, np. www.rkblog.rk.edu.pl/user/. /user/ w tym przypadku będzie "katalogiem" zawierającym kod implementujący Facebook Connect. Dlatego tworzę szablon xd_receiver.htm i wystawiam go poprzez konfigurację URLi tej aplikacji Django:
```
(r'^xd_receiver.htm', direct_to_template, {'template': 'userpanel/xd_receiver.htm'}),
```
Dzięki czemu pod adresem /user/xd_receiver.htm zostanie wyświetlony opisywany kod.

Drugi etap to stworzenie testowego szablo, gdzie możemy przetestować działanie usługi. Potrzebna jest nam strona HTML zawierająca tag "html" w postaci:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">

W sekcji "body" musimy umieścić:

<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>

A pod koniec sekcji body:

<script type="text/javascript">  FB.init("TUTAJ KLUCZ API", "/user/xd_receiver.htm"); </script>

Gdzie /user/xd_receiver.htm to ścieżka do pliku xd_receiver.htm, który zrobiliśmy wcześniej. Poza tym możemy używać dobrodziejstw szablonów Django. W tym przykładzie mój szablon testowy wygląda tak:

{% extends "pages/body.html" %}
{% load i18n %}

{% block xmlns %}<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">{% endblock %}
{% block content %}
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>

<fb:login-button></fb:login-button>

<script type="text/javascript">  FB.init("TUTAJ KLUCZ API", "/user/xd_receiver.htm"); </script>
{% endblock %}
{% block crumb %}<a href="/">{% trans "Home" %}</a> > <a href="/user/">{% trans "User Panel" %}</a>{% endblock %}
{% block on_user %} id="current"{% endblock %}

fb:login-button to tag XFBML, który wyświetli przycisk "Connect" do połączenia się z Facebookiem z tą stroną (możemy używać dowolnych tagów XFBML):

Jeżeli udaje nam się "zapisać" za pomocą Facebooka na naszą stronę to jesteśmy na dobrej drodze do wykorzystania tej usługi do czegoś funkcjonalnego.

Powiedzmy że chcemy wyświetlić informacje o zalogowanym użytkowniku. Żeby tego dokonać za pomocą Facebook Connect musimy zaszaleć z JavaScriptem. Oto gotowy kod (używający biblioteki jQuery):

{% block content %}
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<div id="infobox">
	<fb:login-button></fb:login-button>
</div>
<div id="profil"></div>

<script type="text/javascript">

FB_RequireFeatures(["XFBML"], function()
	{
	FB.Facebook.init("API KEY APLIKACJI", "/user/xd_receiver.htm");
	FB.Facebook.get_sessionState().waitUntilReady(function()
		{
		$("#infobox").html("Witaj użytkowniku <b>Facebooka</b>");
		var uid = FB.Facebook.apiClient.get_session().uid;
		if (uid)
			{
			var viewer  = FB.Facebook.apiClient.fql_query('SELECT name, pic_square_with_logo,profile_url FROM user WHERE uid='+uid,
				function(results) {
							$("#profil").html('Nazywasz się: <b>' + results[0].name + '</b><br /><img src="' + results[0].pic_square_with_logo + '" alt="" /><br /><a href="' + results[0].profile_url + '">Zobacz swój profil</a>');
							}
				);
			}
		});
	});

</script>
{% endblock %}

Facebook connect umożliwia m.in. komentowanie wpisów na twoje stronie z opcją automatycznego umieszczenia ich na Feedzie autora komentarza. Autoryzacja dla Django użytkownika zalogowanego w Facebook connect możliwa jest m.in. za pomocą odpowiedniego middleware, czy aplikacji django-fbconnect.

RkBlog

Django, 10 July 2009