Résumé

  • Socket
  • Javascript
  • Http / Web
  • Wikipedia / Chat
  • Google
  • Cloud
  • ...

Technologies

Langages

  • Programmation : JavaScript
  • Description : Html / Css
  • Communication : Http

Technologies

Infrastructures

  • Communication : TCP / IP
  • Documentation : Web / Html
  • Execution : node.js
  • Services : github, wikipedia, chat, google ...

Facebook

Technologie --> Infrastructure --> Référence

Réseau Social

Facebook v0

Initialement un système de gestion de journal personnel

Réseau Social

pour utilisateur v0

  • Gestion d'identification
    • L'utilisateur
    • Ses relations
  • Gestion des publications
    • Production
    • Stockage
    • Diffusion

Réseau Social

Facebook v1

Du journal aux activités

Réseau Social

pour utilisateur v1

  • Journal de groupe
    • Gestion d'activités de groupe
    • Creation de pages
  • Point d'accès aux applications
    • Gestion des droits d'accès
    • Fourniture de données aux applications
    • Informations d'applications dans le journal
    • Mais aussi système d'hébergement

Un petit parallèle

Votre OS

  • Gère vos fichiers
  • Gère l'accès à vos données
  • Gère vos applications

Votre FaceBook

  • Gère vos données
  • Gère l'accès à vos données
  • Gère vos applications

Facebook

est fondamentalement un OS distribué...

  • 24/7
  • Accès universel
  • Très longue durée de stockage
  • API / Posix
  • User space / Kernel Space

Facebook

qui fournit des services de
très très très haut niveau

  • Authentification longue durée
  • Diffusion massive
  • Résilience
Et c'est normal...
  • Stanford
  • Silicon valley
  • Entrée en bourse

Un peu de
technique

Facebook V0

Création d'une page Facebook

Tout le monde sait faire ...
Télécom
Mais ce n'est pas ma question ...

Facebook V1

Les API du noyau

  • Support à la diffusion : "like", "recommandations" ...
  • Support à l'extraction de données : applications, OAuth ...
  • Support à la génération de données : opengraph ...

Chapitre I

La diffusion

  • Tout est dans le navigateur
  • Le client diffuse l'information sur Facebook

Entête JavaScript 

<html>
  <head>
    <title> Bienvenue! </title>
      <script>
        (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 = "http://connect.Facebook.net/fr_FR/all.js#xfbml=1";
          fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'Facebook-jssdk'));
      </script>
  </head>
  ...
</html>

Plugin Facebook

...
  </script>
  </head>
  <body>
    <div id="fb-root"></div>
    <div class="fb-like"
         data-href="http://www.insa-lyon.fr/" 
         data-send="false" 
         data-layout="button_count" 
         data-width="20" 
         data-show-faces="true"></div>
  </body>
</html>
In Action
Plus d'informations sur Le site developpeur de Facebook
API similaires : Recommandation, Activity

Exercice / Question

Combien de lignes de code pour faire un site et une page web qui permettent de diffuser de l'information sur ma page Facebook ?

Diffusion

Conclusion

  • L'utilisateur doit être connecté
  • Ne nécessite rien d'autre

Chapitre II

Extraction

  • Il faut que l'utilisateur soit d'accord
  • On passe alors par un 'point d'accès'
  • Extraction dans le navigateur ou sur un serveur

Chapitre II

Extraction

Soit...
  • Le client
  • Le serveur

Dans tous les cas, il faut déclarer l'application à Facebook.
  • ~Installer une application sur son OS
  • Jeton d'accès à mon site
  • Gérée par l'utilisateur
  • L'application doit respecter ses autorisations d'accès, mais ce n'est pas contrôlable

Extraction 1/4

Création d'une application

Site Développeurs
Au plus simple, la création d'une application id représentant l'accès à votre site web. L'application id, permet de donner à un utilisateur le droit d'autoriser ou non une application à accéder aux données de son compte Facebook. Le type de droit est géré au moment des accès.

Extraction 2/4

Tout dans le client

... 
<html>
  <head>
    <title> Bienvenue! </title>
  </head>
<body>
  <div id="fb-root"></div>
  <script>
    window.fbAsyncInit = function() {
      FB.init({
        appId      : '140004429471204', // App ID
        channelUrl : '//tc-net2.insa-lyon.fr/fb/channel.html', 
        status     : true, // check login status
        cookie     : true, // enable cookies to allow session
        xfbml      : true  // parse XFBML
      });

      FB.getLoginStatus(function(response) {
        FB.api('/me', function(user) {
          var image = document.getElementById('image');
          image.src = 'https://graph.Facebook.com/' + user.id + '/picture';
          var name = document.getElementById('name');
          name.innerHTML = user.name
        });
      }, true);
    };
    (function(d) {
      var js, id = 'Facebook-jssdk', fjs = d.getElementsByTagName('script')[0];
      if (d.getElementById(id)) return;
      js = d.createElement('script'); js.id = id;
      js.src = "http://connect.Facebook.net/en_US/all.js";
      fjs.parentNode.insertBefore(js, fjs);
    }(document));

  </script>
  <div class="fb-login-button" scope="user_birthday" autologoutlink="true"></div>
  <div align="center">
    <img id="image"/>
    <div id="name"> </div>
  </div>
</body>
</html>
In Action

En image

Extraction 3/4

Transmission au serveur

Le client utilise ses données pour les transférer au serveur.
(Je ne sais pas si c'est très autorisé)

En image


In Action (Connecté)
In Action (Non Connecté)
Le résultat

Extraction 3/4

Commentaire

Transparent pour l'utilisateur
Transparent pour le navigateur
Indiqué dans la grille d'acceptation de l'utilisateur

Extraction 4/4

Transmission de données

hors Facebook vers un serveur

Récupérer des données spécifiques à la phase d'acceptation
Transmettre au service des données spécifiques 
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div id="fb-root"></div>
<script>(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 = "//connect.Facebook.net/fr_FR/all.js#xfbml=1&appId=142947120";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'Facebook-jssdk'));</script>
<fb:registration 
  fields="[
   {'name':'name'},
   {'name':'email'},
   {'name':'birthday'},
   {'name':'noEtudiant','description':'Numéro d\'étudiant','type':'text'}
   ]"
  redirect-uri="https://tc-net2.insa-lyon.fr/"
  width="530">
</fb:registration>
</body>
</html>
In Action

En image


Une zone d'ombre, mais la donnée peut être encodée par le client, c'est toujours du texte.

Extraction

Conclusion

Outil de collecte d'information authentifié
Simplicité d'utilisation et de mise en oeuvre
Nécessité de respecter les droits CNIL
Facebook peut collecter les informations additionnelles

Chapitre III

Production d'information

Au titre de Facebook
Dans le compte de l'utilisateur Facebook

Un cas d'école

"Tamponner un CV insa sur Facebook"
Tout comme :
L'utilisateur xx a aimé ABBA sur spotify
L'utisateur a suivi le cours Java sur INSA Lyon

OpenGraph

Graph : Base de données Facebook
Open : Extension proposées par une application et validées

  • Courir le marathon de New York
  • Cuisiner un boeuf bourguignon
  • Suivre un cours de Java

Contrainte : l'action doit être publique.

  • fiche ECTS                                                  

Page publique 

<html>
<head prefix="og: http://ogp.me/ns#
              fb: http://ogp.me/ns/fb#
     insatelecom: http://ogp.me/ns/fb/insatelecom#">
 <meta property="fb:app_id" content="121204"/> 
 <meta property="og:type"   content="insatelecom:lecture"/> 
 <meta property="og:url"    content="http://tc-net2.insa-lyon.fr/aff/fb/test-2.html"/> 
 <meta property="og:title"  content="Sample 2"/> 
 <meta property="og:image"  content="https://devsite/attachment_blank.png"/> 
</head
<body>
  <embed src="http://tc-net2.insa-lyon.fr/aff/fb/ects-jav.pdf"
       width="700px"
      height="800px"\>
</body>
</html>
Stéphane a suivi MID 
<html>
<head prefix="og: http://ogp.me/ns# insatelecom: http://ogp.me/ns/apps/insatelecom#">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Bienvenue sur Télécom</title>
  <script type="text/javascript">
    function generateCV() {
      FB.api('/me/insatelecom:follow',
        'post',
        { lecture: 'http://tc-net2.insa-lyon.fr/aff/fb/test-2.html' });
    }
  </script>
</head>

<body>
<div id="fb-root"></div>
<script>
(function(d){
 var js, id = 'Facebook-jssdk'; if (d.getElementById(id)) {return;}
 js = d.createElement('script'); js.id = id; js.async = true;
 js.src = "//connect.Facebook.net/en_US/all.js#xfbml=1&appId=140004429471204";
 d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>

Voulez-vous valider votre cv télécom ?
<form> <input type="button" value="JAV" onclick="generateCV()" /> </form>

</body>
</html>

Résumé FB V2

  • Définition de fonctions
  • Publications sur le compte utilisateur
  • Validation de cv...

Conclusion

Système d'exploitation de 2020
  • Gère des id de connexion
  • Gère des données sur des durées très longues
  • Héberge des applications et des accès à des applications
  • Fournit une API d'interaction et un noyau

Et cela ne me fait pas spécialement plaisir...