Dans les chapitres précédents, j'ai volontairement laissé de côté l'interaction avec Facebook, autrement dit l'authentification et le partage. En effet, il me semblait essentiel que nous nous concentrions d'abord sur les notions essentielles à connaître sur Flask.
Mais vous êtes maintenant des pros ! Il est donc temps de plonger dans Facebook.
Configurez une app Facebook
Créez une application test et une autre de production
Vous avez déjà créé une application sur Facebook Developers au premier chapitre. Nous allons maintenant la configurer.
Rendez-vous sur le site de Facebook pour développeurs et cliquez sur "Mes apps". Sélectionner l'application créée précédemment.
L'application actuelle sera utilisée en production, autrement dit lorsque vous mettrez votre site en ligne. Mais que se passera-t-il si vous voulez ajouter une nouvelle fonctionnalité ? Vous ne voudrez certainement pas continuer à travailler avec l'application Facebook qui contient de vraies données.
L'idéal est de créer une application "test" dont le but sera d'essayer les nouvelles fonctionnalités de votre application.
Les apps tests vous permettent de déboguer et tester les changements en développement sans affecter le comportement de votre application de production.
En clair : lorsque vous développez en local, utilisez une application test. Lorsque vous êtes en ligne, liez votre code à une application qui manipulera de vraies informations.
Comment faire cela ? Créez simplement une nouvelle application dans Facebook mais indiquez dans le titre qu'elle ne sera utilisée qu'à des fins de développement.
Dans Paramètres > Général, ajoutez l'adresse http://localhost:5000 dans le champ URL du site. Facebook a besoin de connaître l'URL que vous autorisez pour éviter que votre application ne soit utilisée ailleurs. Enregistrez les modifications.
Enfin, copiez l'ID et remplacez l'ancien dans config.py.
Bravo, vous venez de créer votre première application test !
Créez un utilisateur test dans Facebook apps
Vous n'allez pas tester le parcours utilisateur avec votre compte indéfiniment ! Facebook vous permet de créer un vrai compte pour de faux. Hé oui, vous avez bien lu : vous pouvez créer un utilisateur test qui n'aura d'existence que dans l'application test que vous aurez créée.
Retournez sur l'espace d'administration de votre application test sur Facebook. Cliquez sur "Rôles" et "Utilisateurs test". Cliquez sur "Ajouter". Cochez l'option "autoriser l'application".
Un utilisateur a été créé ! Cliquez sur "modifier" pour changer le nom et le mot de passe de l'utilisateur. Vous en aurez besoin !
Vous pouvez maintenant tester le projet avec l'utilisateur test.
Ajoutez l'authentification et le partage à une application Facebook for Developers
À présent, cliquez sur "Ajouter un produit" et sélectionnez "Facebook Login". Cliquez sur "Next" jusqu'à la fin.
Vous n'avez pas à implémenter le Facebook Login car je l'ai déjà fait pour vous !
Concernant le bouton de partage, vous n'avez rien à configurer.
Comprenez l'authentification en JavaScript
Revenons à notre code. Ouvrez le template index.html pour comprendre le code que je vous ai fourni.
index.html
...
<!-- Bouton de connexion Facebook -->
<!-- Si le script Facebook est mal initialisé, il n'apparait pas. -->
<!-- Appelle la fonction `checkLoginState()` pendant l'authentification grâce à l'attribut `onlogin`. -->
<div class="fb-login-button" data-max-rows="1" data-size="large" data-button-type="continue_with" data-show-faces="false" data-auto-logout-link="true" data-use-continue-as="true" onlogin='checkLoginState()'></div>
...
<!-- Cette balise est modifiée par le script Facebook quand il est initialisé. N'y touchez pas. -->
<div id="fb-root"></div>
<script>
// Cette fonction est appelée par la fonction FB.getLoginStatus(), elle-même appelée juste après l'initialisation du script.
function statusChangeCallback(response) {
if (response.status === 'connected') {
callAPI();
}
}
// Fonction appelée après que l'utilisateur a appuyé sur le bouton "Continuer avec Facebook".
// L'appel se fait deux fois mais nous ne voulons le faire qu'une seule fois, d'où le compteur.
var counter = 0;
function checkLoginState() {
counter += 1
if (counter == 1) {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
}
// Initialisation du script.
window.fbAsyncInit = function() {
FB.init({
appId : '{{ config['FB_APP_ID'] }}',
cookie : true, // enable cookies to allow the server to access
// the session
xfbml : true, // parse social plugins on this page
version : 'v2.8' // use graph api version 2.8
});
// Cette fonction est appelée quand le script a fini de s'initialiser et que Facebook renvoie l'état de connexion de l'utilisateur.
FB.getLoginStatus()(function(response) {
statusChangeCallback(response);
});
};
// Ajout des fichiers source dans le DOM.
(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/fr_FR/sdk.js#xfbml=1&version=v2.9&appId={{ config['FB_APP_ID'] }}";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
// Cette fonction est appelée par statusChangeCallback() si l'utilisateur est connecté.
function callAPI() {
console.log('Welcome! Fetching your information.... ');
// Appel à l'API de Facebook et demande d'accès à l'identifiant, au prénom et au genre de l'utilisateur.
// L'utilisateur doit accepter dans une popup.
FB.api('/me', {fields: 'id, first_name, gender'}, function(response) {
console.log('Successful login for: ' + response.first_name);
// Si l'utilisateur accepte, l'authentification réussit.
// Dans ce cas, nous construisons l'url de redirection.
var url = window.location.href + 'result?first_name=' + response.first_name + '&id=' + response.id + '&gender=' + response.gender;
// Puis nous redirigeons l'utilisateur vers la page de résultats.
window.location.href = url;
});
}
</script>Relancez le serveur. Le bouton d'initialisation de Facebook s'affiche bien !
Comprenez le partage en JavaScript dans un template
Intéressez-vous maintenant au partage. Ouvrez le template result.html.
result.html
...
<a class="btn btn-lg btn-outline big-button facebook_button" id="FbShare">
Partager sur Facebook
</a>
...
<!-- Cette balise est modifiée à l'initialisation du script Facebook. -->
<!-- N'y touchez pas. -->
<div id="fb-root"></div>
<script>
// Initialisation de l'application.
window.fbAsyncInit = function() {
FB.init({
appId : '{{ config['FB_APP_ID'] }}',
cookie : true, // enable cookies to allow the server to access
// the session
xfbml : true, // parse social plugins on this page
version : 'v2.8' // use graph api version 2.8
});
};
// Ajout au DOM des fichiers source.
(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/fr_FR/sdk.js#xfbml=1&version=v2.9&appId={{ config['FB_APP_ID'] }}";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
// Au clic sur l'élément dont l'id est FBShare,
// ouverture de la fenêtre de partage.
$('#FbShare').click(function(){
FB.ui({
method: 'share',
// URL à partager. Nous devons la créer maintenant !
href: {{ og_url }},
}, function(response){});
});
</script>Comme vous pouvez le constater, l'URL n'est pas encore indiquée. Pourquoi ? Car nous ne voulons pas que l'utilisateur partage l'URL actuelle, avec ses informations, mais plutôt le lien de la page d'accueil pour que ses amis cliquent dessus et fassent également le test !
Néanmoins, ce lien sera un peu particulier car il devra inclure la photo à partager sur Facebook ! Afin de bien comprendre comment Facebook lit une page à partager, intéressons-nous à l'OpenGraph.
Utilisez l'OpenGraph et les métadonnées
Selon la documentation officielle, l'OpenGraph est "un protocole qui permet à toute page web de devenir un objet enrichi dans un graphe social.".
Qu'est-ce que cela veut dire ?
Très simplement, l'OpenGraph aide Facebook à comprendre votre page et vous donne plus de contrôle sur la manière dont elle sera partagée. Vous pouvez indiquer le titre, l'URL, la photo... Bref, tous les éléments qui constitueront la carte de partage sur Facebook.
Comment indiquer ces éléments ? Grâce à des métadonnées à ajouter dans le head de votre page :
<html prefix="og: http://ogp.me/ns#">
<head>
<meta property="og:url" content="http://www.nytimes.com/2015/02/19/arts/international/when-great-minds-dont-think-alike.html" />
<meta property="og:type" content="article" />
<meta property="og:title" content="When Great Minds Don’t Think Alike" />
<meta property="og:description" content="How much does culture influence creative thinking?" />
<meta property="og:image" content="http://static01.nyt.com/images/2015/02/19/arts/international/19iht-btnumbers19A/19iht-btnumbers19A-facebookJumbo-v2.jpg" />
...
</head>
...
</html>Ces métadonnées permettront de générer la carte suivante sur Facebook :
Comment utiliser ces balises dans notre projet ? Vous n'avez (presque) rien à faire ! Je les ai déjà ajoutées pour vous. Modifiez simplement les valeurs :
base.html
<head>
...
<meta property="og:title" content="{{ page_title }}" />
<meta property="og:type" content="website" />
<meta property="og:url" content="{{ og_url }}" />
<meta property="og:image" content="{{ og_image }}" />
<meta property="og:description" content="{{ og_description }}" />
<meta property="fb:app_id" content="{{ config['FB_APP_ID'] }}">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">Modifiez maintenant la vue :
views.py
@app.route('/')
@app.route('/index/')
def index():
...
page_title = "Le test ultime"
og_url = url_for('index', _external=True)
og_image = url_for('static', filename='tmp/sample.jpg')
og_description = "Découvre qui tu es vraiment en faisant le test ultime !"
return render_template('index.html',
user_name='Julio',
user_image=url_for('static', filename='img/profile.png'),
description=description,
blur=True,
page_title=page_title,
og_url=og_url,
og_image=og_image,
og_description=og_description)Bien ! Nous pouvons désormais modifier les métadonnées lues par Facebook lors du partage. Mais comment lui spécifier d'utiliser la photo de l'utilisateur ?
Configurez l'image utilisée pendant le partage
L'image partagée sera de la forme suivante :
Elle sera créée dans la vue result, avant l'affichage du template. Nous pouvons donc voir quatre étapes :
1 : création de l'image dans
result2 : ajout du lien de partage dans le template
result.html. Il sera de la forme suivante :localhost:5000/index?img=<cheminverslimage>3 : récupération du lien vers l'image dans
index4 : ajout du lien vers l'image dans le template
index.html
Dans le chapitre suivant nous verrons comment générer l'image suivante automatiquement. Passons donc directement à la seconde étape.
Ajoutez un lien de partage dans la vue "result"
Pour l'instant, utilisez l'image sample.jpg présente dans le dossier tmp.
Modifiez la vue result :
views.py
...
img = 'tmp/sample.jpg'
og_url = url_for('index', img=img, _external=True)
return render_template('result.html',
user_name=user_name,
user_image=profile_pic,
description=description,
og_url=og_url)Pourquoi ajouter le paramètre _external=True à la méthode url_for()?
Par défaut cette méthode génère une URL relative de la forme suivante : /index?img=myfilename.jpg. Autrement dit elle n'inclut pas le nom de domaine et le protocole. Néanmoins, il faut indiquer à Facebook l'URL complète pour que le partage fonctionne !
Le paramètre _external=True génère une URL absolue de la forme suivante : http://www.nomdedomaine.tld/index?img=myfilename.jpg.
Récupérez un lien dans la vue "index"
Vous savez déjà comment récupérer des arguments car nous l'avons vu précédemment ! Utilisez l'objet request, tout simplement.
Néanmoins, ajoutons une petite subtilité : si img est présent dans la requête, utilisez cette image, sinon indiquez-en une par défaut :
views.py
def index():
if 'img' in request.args:
img = request.args['img']
og_url = url_for('index', img=img, _external=True)
og_image = url_for('static', filename=img, _external=True)
else:
og_url = url_for('index', _external=True)
og_image = url_for('static', filename='tmp/sample.jpg', _external=True)
...Prêts à tester que tout fonctionne ? :-)
Testez le partage
Facebook met à disposition un outil formidable pour tester que nous avons bien implémenté les métadonnées attendues : le programme de débogage du partage.
Vous avez vu dans ce chapitre comment ajouter des métadonnées pour Facebook. La méthode est très similaire pour les autres réseaux sociaux tels que Twitter. Pour en savoir plus, lisez le chapitre Ajouter les metatags du cours Découper et intégrer une maquette.
Récupérez le code de ce chapitre
Le code de ce chapitre est disponible à cette adresse.
En résumé
Dans ce chapitre, vous avez vu comment connecter votre application à Facebook. Vous êtes maintenant capable de :
Créer une application Facebook de test et de la lier à votre application Flask
Dans les paramètres de l’application de test, configurer l’adresse locale
http://localhost:5000Dans les rôles de l’application de test, ajouter un utilisateur test
Puis activer le Facebook Login en ajoutant un produit
De mettre en pratique l’Open Graph dans la vue et le template de votre application pour créer une carte de partage optimisée pour Facebook
L’Open Graph est un protocole permettant d’optimiser le rendu d’une page web grâce à des balises HTML spécifiques qu’il faut ajouter dans le template
Facebook fourni un outil pour vérifier que les metatags requis sont bien présents sur la page et qu’il n’y a pas d’erreur, mais d’autres existent
Passons maintenant au développement de la dernière fonctionnalité de l’application.
