Prendre un Café - Tag - flash

Partager la session utilisateur entre Flash/Flex et symfony avec AmfPHP

NiKo — Fri, 25 Jul 2008 17:07:00 +0200

Pour les besoins d'un projet récent, j'ai eu besoin de valider la possibilité de gérer l'authentification et l'accès à la session symfony (côté serveur) depuis une interface générée par Adobe Flex (en Flash, donc côté client).

Pour cela, j'ai utilisé la librairie AmfPHP en version 1.9beta2, certes pas très récente mais suffisament fonctionnelle pour satisfaire à ce besoin précis. Voyons comment ça se passe concrètement. L'avantage de la démonstration ci-dessous est qu'elle ne nécessite pas d'installer Flex puisque AmfPHP fournit un navigateur de services (browser) qui nous suffira pour valider notre concept.

Installation du plugin sfGuard

Je pars du principe que tout le monde a une installation de symfony 1.1 nanti d'une application main, ainsi qu'un projet et un virtual host apache fonctionnels pointant sur local.mademo.org. Si ce n'est pas le cas, voila de quoi vous mettre à jour.

On commence par installer le plugin sfGuard, qui se chargera de la persistance des droits et permissions utilisateurs en base de données, et fournira les utilitaires d'authentification et de manipulation de la session côté serveur :

$ ./symfony plugin:install sfGuardPlugin
$ ./symfony propel-build-all
$ ./symfony cc

On charge quelques données de test dans notre base de données nouvellement mise à jour :

$ mkdir data/fixtures 
$ cp plugins/sfGuardPlugin/data/fixtures.yml.sample data/fixtures/fixtures.yml
$ ./symfony propel:data-load main

Ce jeu de données de test nous fournit par défaut un compte admin (mot de passe admin) qui nous servira à tester notre service d'authentification.

Ensuite, il nous faut modifier notre classe apps/main/lib/myUser.php gérant la session utilisateur afin qu'elle étende désormais la classe sfGuardSecurityUser, fournie par le plugin sfGuard :

<?php
// Fichier apps/main/lib/myUser.php
class myUser extends sfGuardSecurityUser
{
}

Installation et configuration d'AmfPHP

Nous allons installer la librairie AmfPHP dans le sous-répertoire web/ de notre projet^[1], et aménager quelque peu notre arborescence pour accueillir les services AmfPHP :

$ cd /path/to/project
$ svn export https://amfphp.svn.sourceforge.net/svnroot/amfphp/tags/1.9beta2 web/amfphp
$ mkdir lib/amfphp-services
$ mv web/amfphp/services/amfphp lib/amfphp-services/

Ceci fait, nous allons éditer plusieurs fichiers d'amfphp afin de l'adapter à notre environnement symfony. Tout d'abord, commençons par éditer la valeur de la variable $servicesPath dans le fichier web/amfphp/globals.php :

<?php
// ...
$servicesPath = dirname(__FILE__).'/../../lib/amfphp-services/';

Enfin, il nous faut "patcher"^[2] le fichier web/amfphp/core/amf/app/Filters.php, qui initialise la session PHP sans définir le nom de la session. Ici, nous utiliserons le nom de la session symfony par défaut, "symfony" (ligne 105 du fichier) :

102     //Fix for godaddy not allowing ini_get
103     $sessionName = "PHPSESSID";
104   }
105   session_name('symfony');
106   session_start();
107   $session_id = session_id();

Création d'un service permettant le partage de la session utilisateur

Voila, nous pouvons maintenant créer un service de gestion de l'authentification, que nous nommerons pompeusement UserSessionService et que nous enregistrerons dans le fichier lib/amfphp-services/UserSessionService.php :

<?php
require_once dirname(__FILE__).'/../../config/ProjectConfiguration.class.php';
 
/**
 * This class tests the symfony session within an AmfPHP context
 *
 */
class UserSessionService
{
  /**
   * Symfony context
   * @var sfContext
   */
  protected $context = null;
  
  /**
   * Symfony session
   * @var sfGuardSecurityUser
   */
  protected $user = null;
  
  /**
   * Public constructor
   *
   */
  public function __construct()
  {
    $configuration = ProjectConfiguration::getApplicationConfiguration('main', 'dev', true);
    $this->context = sfContext::createInstance($configuration);
    $this->user = $this->context->getUser();
  }
  
  /**
   * Checks wheter user is authenticated or not
   *
   * @return boolean
   */
  public function isAuthenticated()
  {
    return $this->getUser()->isAuthenticated();
  }
  
  /**
   * Authenticates user
   *
   * @param  string  $username
   * @param  string  $password
   * @return boolean True if user has been successfully authenticated
   */
  public function login($username, $password)
  {
    if ($this->isAuthenticated())
    {
      return true;
    }
    
    $user = sfGuardUserPeer::retrieveByUsername($username);
    
    if (!is_null($user) && $user->checkPassword($password))
    {
      $this->getUser()->signIn($user);
      return true;
    }
    
    return false;
  }
  
  /**
   * Signs out a user 
   *
   */
  public function logout()
  {
    return $this->getUser()->signOut();
  }
  
  /**
   * Retrieves the current symfony context
   *
   * @return sfContext
   */
  protected function getContext()
  {
    return $this->context;
  }
  
  /**
   * Retrieves the current symfony user session
   *
   * @return sfGuardSecurityUser
   */
  protected function getUser()
  {
    return $this->user;
  }
}

Pour tester notre service, utilisons le navigateur de service proposé par AmfPHP. Pour cela, il faut lancer un navigateur sur http://local.mademo.org/amfphp/browser/index.html :

Via cette interface, elle même réalisée en Flex, on peut tester les méthodes publiques définies dans notre service, manipuler les arguments, et constater que nous arrivons à nous authentifier et que nous accédons bien à la même session utilisateur que dans symfony : login, logout et test du statut d'authentification.

En conclusion

On pourrait aller beaucoup plus loin dans cet exemple, en proposant par exemple une classe proxy en ActionScript 3 représentant un utilisateur du système (dans notre cas, une instance de la classe sfGuardUser), cette dernière reproduisant tout ou partie de ses méthodes et propriétés, et donc d'utiliser l'ORM Propel directement depuis Flash... Je vous laisse faire vos tests si le coeur vous en dit.

D'autre part, même si la librairie AmfPHP semble un peu passée au niveau architecture, elle reste néanmoins très efficace pour publier des services PHP dans Flash au travers du protocole AMF. J'ai eu vent d'autres librairies comme WebORB ou SabreAMF, mais je ne sais pas vraiment ce qu'elles valent... Des avis dans l'assistance ?

Notes

[1] Du coup, on expose certains scripts AmfPHP, mais la librairie n'est malheureusement que prévue pour fonctionner en ce sens...

[2] Oui, c'est terriblement crade, je ne comprend d'ailleurs pas qu'AmfPHP n'aie pas prévu ce cas de figure...

Je vais tuer votre productivité quotidienne (gnark)

NiKo — Thu, 17 Jul 2008 09:50:00 +0200

MotionTwin vient de sortir un nouveau buzzgame dont ils ont le secret, labrute. L'idée est très sympa, vous créez un personnage que vous lancez dans une arène virtuelle face à un adversaire qu'il devra combattre pour éventuellement acquérir de nouvelles compétences et armes diverses.

Si vous voulez combattre mon perso, c'est par là que ça se passe

Seul petit regret, le nombre de combats est limité à 3 par jour, c'est un peu juste et ça va inciter les gens à créer beaucoup de personnages différents.

Un dernier conseil, une fois votre personnage créé, attribuez-lui tout de suite un mot de passe, je me suis fait déposséder de ma première brute en étant un peu trop confiant sur la nature humaine

Présentation de Flex

NiKo — Sun, 19 Aug 2007 13:04:00 +0200

Pour les besoins du boulot, j'ai du me mettre à Flex, le framework d'Adobe orienté RIA en Flash.

Je pensais que mon passé de flasheur m'aiderait à monter rapidement en compétence sur cette techno, ben non : c'est tout à fait autre chose que ce que je connaissais de l'IDE traditionnel, dont je m'étais arrêté à la version 8. Avec Flex on a affaire à un framework complet de génération d'interfaces riches basées sur l'emploi de composants décrits et paramétrés en XML et de la dernière mouture du langage ActionScript en version 3. Quelques exemples d'applications réalisées avec Flex sont disponibles, et pour certaines, ça en jette carrément.

Le langage MXML

La description des interfaces s'opère au moyen du langage MXML^[1], basé sur XML un peu comme ce que proposent XUL ou XAML ou même XHTML (qui reste une implémentation particulière et standardisée d'XML). Deux types principaux de composants sont disponibles : les conteneurs (boîtes, panneaux, fenêtres, etc.) et les éléments de contrôle (champs texte, listes, datagrids, tree, etc.)

Le nombre de conteneurs et de contrôles est impressionnant, on se prend à rêver de la même richesse en HTML ^[2]. La plupart des composants sont visibles sur l'explorateur de composants Flex, sur le site d'Adobe. Et le meilleur reste sans doute à venir quand on voit le catalogue de composants supplémentaires open source comme ceux du projet FlexLib...

Le format généré après compilation d'un ensemble de fichiers MXML constituant une application Flex est le SWF, le format natif d'Adobe Flash, lisible par tout bon Flash Player 9 qui se respecte, implanté sur plus de 80% du parc machines desktop mondial d'après les dernières statistiques disponibles sur le site d'Adobe.

Voila un exemple de code MXML décrivant l'interface d'une application simpliste :

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
   <mx:Panel title="Dire bonjour" x="10" y="10" layout="absolute" width="303">
      <mx:TextInput id="firstname" x="10" y="10"/>
      <mx:Button label="Dire bonjour" click="result.text='Bonjour, '+firstname.text" x="178" y="10"/>
      <mx:Label id="result" x="10" y="40" width="265"/>
   </mx:Panel>
</mx:Application>

Le code est assez parlant, mais voici quelques éléments significatifs :

Le conteneur principal de l'application déclare l'espace de noms mx, ce qui nous permettra d'utiliser les composants natifs de Flex
L'application déclare un conteneur sous la forme d'un Panel contenant trois contrôles :
- un InputText, champs de saisie textuelle
- un Button, un bouton d'action
- un Label, un champs de texte potentiellement dynamique
Chaque élément peut se voir nanti d'un attribut id qui doit être unique si renseigné ; il permet de référencer facilement un élément de l'arbre DOM
La gestion des évènements peut se faire directement en MXML : ici, quand on clique sur le bouton, le contenu texte du label est modifié en fonction de la valeur textuelle du champs de saisie.

Style et mise en forme

Dans l'exemple précédent, on voit que les styles sont appliqués sous forme d'attributs XML. C'est une solution pratique à court terme mais qui peut rapidement s'avérer problématique à maintenir dès que votre application grossit. Aussi, pour séparer la couche de présentation de la description des contenus, tout comme en HTML, Flex permet l'utilisation de feuilles de styles CSS embarquées ou externalisées. Beaucoup de propriétés CSS ont du être créées ou adaptées aux spécificités du balisage MXML et des composants proposés, mais le résultat est une grande souplesse d'utilisation et une large palette de mise en forme disponible. Pour preuve, un petit tour du côté de l'explorateur de styles Flex s'impose.

Le langage ActionScript 3

ActionScript 3 est l'évolution logique des précédentes versions, étendant le périmètre fonctionnel et accentuant son caractère professionnel, notamment dans l'implémentation objet, les types natifs et l'organisation en packages des différents objets de programmation.

Composants personnalisés

Une des grandes forces de Flex à mes yeux est la simplicité avec laquelle on peut créer ses propres composants en héritant de composants basiques préexistants et de les manipuler via son propre espace de noms. Par exemple, la création d'un composant dérivé d'un formulaire présentant un champs de login/mot de passe donne à peu près ceci :

<?xml version="1.0" encoding="utf-8"?>
<mx:Form xmlns:mx="http://www.adobe.com/2006/mxml" width="280" height="105">
   <mx:FormItem label="Login">
      <mx:TextInput id="username"/>
   </mx:FormItem>
   <mx:FormItem label="Mot de passe">
      <mx:TextInput id="password" displayAsPassword="true"/>
   </mx:FormItem>
   <mx:FormItem>
      <mx:Button label="Connexion"/>
   </mx:FormItem>
</mx:Form>

Si on nomme notre fichier de composant LoginForm.mxml et qu'on le stocke dans le répertoire ./components de notre projet Flex, on va pouvoir l'utiliser de la façon suivante dans une application :

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
   xmlns:mx="http://www.adobe.com/2006/mxml" 
   xmlns:niko="components.*"
   layout="absolute">
   <mx:Panel title="Connexion">
      <niko:LoginForm id="loginform"/>
   </mx:Panel>
</mx:Application>

On a déclaré un nouvel espace de noms, ici niko (mais on aurait pu mettre ce qu'on veut) pointant vers les fichiers sous le répertoire components du projet. Simple, non ? En tout cas, cela devient un jeu d'enfant de produire des composants réutilisables.

Le nerf de la guerre, l'accès aux données distantes

Flex propose trois modes d'accès aux données distantes, par le biais de trois composants :

L'objet HTTPService, comme son nom l'indique, permet d'effectuer des requêtes HTTP sur une url et d'en récupérer la réponse. Un objet bien pratique quand on veut s'interfacer avec une architecture REST, par exemple.
L'objet WebService permet de s'interfacer avec un webservice au format WSDL via SOAP. Quand on dispose de tels service, c'est un plaisir de se baser dessus depuis Flex puisqu'on a qu'à réferencer les méthodes à utiliser et les déclencher depuis leur référence.
Mais l'objet de loin le plus intéressant à mes yeux est RemoteObject, implémentation du protocole RPC dans Flex, pendant Flash/ActionScript du RMI en Java. Comme je fais peu de Java, j'ai tendance à plutôt utiliser AMFPHP^[3] pour publier mes services en utilisant PHP. Un très bon tuto de mise en oeuvre du couple AMFPHP/Flex se chargera d'illustrer le concept plus efficacement que je ne le fais ici.

FlexBuilder

Adobe propose un IDE dédié à la réalisation d'applications Flex, FlexBuilder. Cet outil, basé sur le célebrissime Eclipse, permet de disposer d'un environnement complet de développement comprenant entre autres un éditeur de code (MXML en mode source/wysiwyg, ActionScript, CSS, etc.), un débogueur avancé à la Java, un gestionnaire de projets, la compilation automatique et surtout un accès à l'immense catalogue des plugins Eclipse. D'ailleurs, FlexBuilder est également disponible sous la forme d'un plugin à installer sur une instance d'Eclipse existante : de quoi travailler sur vos projets Flex/PHP de façon centralisée, par exemple.

Inconvénient majeur de cet outil, il est payant. Et coûte relativement cher, puisque proposé aux alentours de 500€. Néanmoins, le SDK de Flex étant gratuit, vous pouvez tout à fait vous passer de FlexBuilder et compiler vos applications à la main. Une bonne nouvelle ne venant jamais seule, Adobe a décidé de publier la prochaine mouture du framework sous licence libre ^[4], aussi nous devrions voir fleurir des alternatives à FlexBuilder et assister à un taux d'adoption plus conséquent de la technologie.

Organisation du code, frameworks

Au vu de l'étendue fonctionnelle de Flex et des différents formats de fichiers mis en oeuvre ainsi que de leurs interactions potentielles, il est clair que maintenir la moindre petite application peut vite relever du cauchemar les développements avançant. Pour faire face à cette problématique, Adobe propose un surframework du nom de Cairngorm mettant en oeuvre les bonnes pratiques d'architecture logicielle en implémentant le motif de conception MVC bien connu des utilisateurs de frameworks de développement rapide orientés web.

Même si le projet semble extrêmement intéressant, je n'ai pas encore pour l'heure pu jouer avec.

Conclusion

Pour l'heure et après avoir pas mal ~~galéré~~ tâtonné avec l'outil au début, je dois reconnaître maintenant et avec un peu de recul que c'est assez efficace. C'est relativement déstabilisant pour quelqu'un qui comme moi avait l'habitude de l'IDE Flash Authoring classique, mais au final FlexBuilder semble beaucoup plus sérieux pour tout ce qui concerne la programmation et l'organisation des fichiers (Eclipse oblige.) Même le templating y gagne à mon sens, mais par contre impossible de faire de la création graphique avancée directement dans FlexBuilder, l'outil n'est clairement pas l'ami des infographistes de vocation.

Pour enfoncer le clou, j'ai pu comparer l'utilisation de Flex et de XUL, ayant enchaîné deux projets coup sur coup les mettant en oeuvre. L'excellente documentation de Flex et la richesse des outils gravitant autour de la techno font que pour l'heure Flex me semble l'un des meilleurs choix pour développer une RIA, si l'on écarte le couple HTML/Ajax qui garde une toujours une place de choix dans mon arsenal webdeuzéroesque

Notes

[1] Je ne sais pas à quoi correspond la lettre M de l'acronyme, Macromedia sans doute.

[2] En attendant HTML5, les antiflash pourront aller zieuter du côté d'extjs ou de YUI.

[3] Attention à bien utiliser la dernière version 1.9 beta compatible avec Flex2

[4] Sous licence MPL plus précisément.

LineRider

NiKo — Thu, 26 Oct 2006 17:10:00 +0200

Addictif.

Flash Player 9 beta pour Linux

NiKo — Thu, 19 Oct 2006 13:05:00 +0200

Flash Player 9 beta pour Linux est sorti ! Pour installer le plugin pour Firefox sur Ubuntu, c'est relativement simple (même si par la suite un véritable installeur devrait être disponible) :

$ wget -c http://www.adobe.com/go/fp9_update_b1_installer_linuxplugin
$ tar xvzf FP9_plugin_beta_101806.tar.gz
$ mkdir ~/.mozilla/plugins # créera le répertoire s'il n'existe pas
$ sudo mv flash-player-plugin-9.0.21.55/libflashplayer.so ~/.mozilla/plugins/

Et ça devrait rouler.

Edit: Ménage.

Objectif Respect

NiKo — Wed, 18 Oct 2006 18:32:00 +0200

[Via Fast Clemmy]

La RATP bien inspirée, ça donne ça. C'est drôle, extrêmement bien réalisé (par Upian) et c'est surtout extrêmement vrai.

CMS, bonhomme en mousse, Rollex et tout ce qui s'en suit

NiKo — Tue, 10 Oct 2006 08:14:00 +0200

Yooggle, Gootube, bref, je ne vais pas revenir sur l'acquisition de l'année. La question qu'on peut raisonnablement se poser reste POURQUOI FAIRE BORDEL ?
Pep nous signale un excellent article sur Vitamin concernant le mythe du CMS ; cet article résume très bien ce que je pense depuis pas mal de temps, à savoir qu'aucun système de gestion de contenu (CMS) ne saura jamais gérer entièrement la complexité de vos contenus (ou ceux de vos clients), et que l'y pousser est AMHA totalement contre-productif en regard de l'utilisation d'outils plus bas niveau comme les frameworks, associés aux méthodes de développement agiles.
Cette image sans fin est de toute beauté (Flash.)
Le petit hardos en mousse, déjà dans les bacs (Via ScoopekNo')
Une recherche d'images sur Google pour les mots-clé Rollex watches renvoie des résultats surprenants.
Heureusement pendant ce temps-là, la science progresse et assène des évidences qui n'avaient échappé à personne
Sinon sans transition, entrez cette petite ligne de javascript dans la barre d'adresse de votre navigateur sur n'importe quel site, pour voir (via) :

javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; DI=document.images; DIL=DI.length; function A(){for(i=0; i<DIL; i++){DIS=DI[ i ].style; DIS.position='absolute'; DIS.left=Math.sin(R*x1+i*x2+x3)*x4+x5; DIS.top=Math.cos(R*y1+i*y2+y3)*y4+y5}R++}setInterval('A()',5); void(0);

Vacances again + Vrac

NiKo — Fri, 18 Aug 2006 14:32:28 +0000

D'ici quelques heures, les commentaires et trackbacks de ce blog prendront à nouveau congé une petite semaine, de même que votre hôte. C'est pas que je suis à plat, mais pas loin.

En attendant, les nouvelles du front :

Flash Player 9 pour Linux, le bout du tunnel ?
We are the web : Fighting for Net Neutrality and Internet Freedom.
Dappit.com : un générateur de webservices à partir de services en ligne existants, comme Google. C'est bêta, mais prometeur.
J'ai pris une Dédibox. Pour le prix, c'est quand même drôlement royal.
Y'a pas à chier, Java ça craint.
Je ne sais toujours pas gérer les trolls, et ne peux pas m'empêcher d'en lancer malgré moi (cf. point précédent.)
Je suis crevé.

A bientôt pour de nouvelles zaventures.

Edit : Je ne resiste pas à relater deux informations du journal télévisé de ce soir :

La doyenne des français est décédé ce matin à l'âge de 114 ans : mme Mornet lui succède donc à l'âge de 112 ans,
Mickaël Gelabale se dit confiant pour l'imminent championnat du monde de basketball.

Oui, un rien m'amuse.

Edit : Reviendu (snif.)