Dernièrement, j’ai contribué a un projet Open source PHP-OAuth2, qui fournit un client OAuth2 pour PHP5. Le projet est initié et développé par Pierrick Charron et est disponible sur GitHub. Le client permet de se connecter et de consommer n’importe quelle API qui supporte le protocole OAuth2. Dans ce post, nous allons voir comment installer, utiliser et étendre cet outil pour des besoins spécifiques.

Installation

L’installation est simple. Il suffit en fait de récupérer le script via Git :

git clone git://github.com/adoy/PHP-OAuth2.git

Utilisation

Pour utiliser le client, assurez vous tout d’abord que le client est accessible depuis votre code (include, include_path, autoload etc.). Par la suite, vous devez definir 5 constantes :

• CLIENT_ID : votre identifiant client.
• CLIENT_SECRET : votre cle secrete.

vous récupérez ces deux valeurs depuis le serveur OAuth2 (Facebook Apps par exemple)

• REDIRECT_URI : l’url de redirection de votre application.
• AUTHORIZATION_ENDPOINT : L’url du service d’autorisation
• TOKEN_ENDPOINT : L’url du service de recuperation des jetons d’acces.

require('client.php');

const CLIENT_ID     = 'your client id';
const CLIENT_SECRET = 'your client secret';

const REDIRECT_URI           = 'http://url/of/this.php';
const AUTHORIZATION_ENDPOINT = 'https://graph.facebook.com/oauth/authorize';
const TOKEN_ENDPOINT         = 'https://graph.facebook.com/oauth/access_token';

$client = new OAuth2\Client(CLIENT_ID, CLIENT_SECRET);
if (!isset($_GET['code']))
{
    $auth_url = $client->getAuthenticationUrl(AUTHORIZATION_ENDPOINT, REDIRECT_URI);
    header('Location: ' . $auth_url);
    die('Redirect');
}
else
{
    $params = array('code' => $_GET['code'], 'redirect_uri' => REDIRECT_URI);
    $response = $client->getAccessToken(TOKEN_ENDPOINT, 'authorization_code', $params);
    parse_str($response['result'], $info);
    $client->setAccessToken($info['access_token']);
    $response = $client->fetch('https://graph.facebook.com/me');
    var_dump($response, $response['result']);
}

Explication

On instancie tout d’abord le client en lui passant l’identification du client ainsi que la cle secrète. Il y a deux cas a gérer par la suite:

1. En accédant au script (sans spécifier de code dans l’url), on récupère l’url d’authentification via la méthode getAuthenticationUrl(), et on redirige l’utilisateur vers cette addresse (Dans notre exemple, c’est l’adresse d’authentification de l’utilisateur sur Facebook).
2. Une fois l’utilisateur authentifié, le serveur le redirige vers notre script en lui fournissant un code d’accès. Dans ce cas, en récupérant le code depuis $_GET, nous allons récupérer un jeton d’accès depuis le service de récupération de jetons. Ceci est effectué via la méthode getAccessToken().
3. Une fois le jeton d’accès récupéré, il est alors possible de consommer l’api via la méthode fetch().

Assez simple non?

Comment je peux définir des nouveaux types d’accès ?

Si vous utilisez l’API de Facebook, vous n’avez probablement pas besoin d’utiliser ce genre d’opérations. Dans le cas ou vous connectez a un autre service, il est possible que ce dernier vous offre des modes d’accès personnalisés. Il est alors possible d’étendre le client OAuth2 pour supporter ces appels. Il suffit d’écrire alors une nouvelle classe pour ce faire. Voici un exemple :

namespace OAuth2\GrantType;

/**
 * MyCustomGrantType Grant Type
 */
class MyCustomGrantType implements IGrantType
{
    /**
     * Defines the Grant Type
     *
     * @var string  Defaults to 'my_custom_grant_type'.
     */
    const GRANT_TYPE = 'my_custom_grant_type';

    /**
     * Adds a specific Handling of the parameters
     *
     * @return array of Specific parameters to be sent.
     * @param  mixed  $parameters the parameters array (passed by reference)
     */
    public function validateParameters(&$parameters)
    {
        if (!isset($parameters['first_mandatory_parameter']))
        {
            throw new \Exception('The \'first_mandatory_parameter\' parameter must be defined for the Password grant type');
        }
        elseif (!isset($parameters['second_mandatory_parameter']))
        {
            throw new \Exception('The \'seconde_mandatory_parameter\' parameter must be defined for the Password grant type');
        }
    }
}

Vous pouvez alors utiliser la méthode getAccessToken en lui spécifiant le nouveau type d’accès :

$response = $client->getAccessToken(TOKEN_ENDPOINT, 'my_custom_grant_type', $params);

Si vous avez des questions ou des commentaires sur l’utilisation du script ou par rapport au protocole OAuth2, n’hesitez pas!

• Téléchargement : git clone git://github.com/adoy/PHP-OAuth2.git
• Documentation : https://github.com/adoy/PHP-OAuth2

Si vous utilisez twitter sur iPhone, vous vous serez peut etre rendus compte que leur application web (si vous visitez twitter via votre navigateur web) est assez fluide. Eh bien, les gens chez twitter ont release en Open source le code qu’ils utilisent pour cette application : Bootstrap. Bootstrap est un ensemble d’outils front-end pour vos applications web. C’est une collection de styles CSS et de conventions HTML. Le « framework » couvre la typographie, les formulaires, les boutons, les tables et grilles, la navigation etc. La taille est relativement petite (6k avec gzip).

Bootstrap est hébergé sur  Github il utilise aussi LessCSS qui est un pre-processeur qui offre plus de flexibilite au code CSS (declarations imbriquees, variables, fonctions etc.).

Open Scholar est une plateforme Open Source qui permet de créer des communautés académiques (universités, collèges, lycées ec.). Elle permet entre autres aux professeurs et étudiants de creer leur propre espace au sein du portail de l’institution.
L’application est basée sur Drupal et présente des fonctionnalités intéressantes comme:

• les Blogs
• Les Booklets (creation de manuels – utile pour les projet etudiants )
• La gestion des classes (informations reliees a la classe, semestre etc.)
• La gestion des évènements
• Galerie de photos
• Collaboration sociale
• Curriculum vitae
• Liens etc.

Des universités comme Harvard ont adopté le projet, Pourquoi pas les nôtres?

Ce tutoriel est le premier dans une serie de tutoriaux exposant les possibilites de HTML5 que vous retrouverez sur ce blog. Dans cette premiere partie, je vais aborder du sujet de l’API de communication postMessage via des exemples. Dans un post futur,  je presenterai l’objet XMLHttpRequest niveau 2, la version amelioree de XMLHttpRequest.

L’API postMessage

La communication entre les cadres, onglets et fenêtres sur un navigateur était entièrement interdite. Ceci est notamment liée aux problèmes de sécurité qui peuvent subvenir en allouant l’accès et l’usurpation a d’autres données. Par ailleurs, avec l’avenue des « mashups » – une combination de differentes applications comme ceux de google maps, il  existe des scénarios d’utilisation légitimes.
Pour ce fait, les éditeurs des navigateurs se sont accordées pour présenter une nouvelle fonctionnalité : la communication inter documents (Cross Document Messaging). Cette fonctionnalité permet une communication sécurisée entre des sources différentes via cadres, ongles et fenêtres.

L’api est supportée dans

• Chrome   :  depuis la version 2.0
• Firefox    : depuis la version 3.0
• IE             : depuis la version 8.0
• Opera      : depuis la version 9.6
• Safari      : depuis la version 4.0

Pour envoyer un message. Il suffit d’utiliser  sur l’object JavaScript window:

1

postMessage('Hello, world', 'http://www.example.com/');

Pour recevoir ce message, il faut ajouter un gestionnaire d’évènements dans votre page. Quand le message arrive, vous pourrez alors déterminer son origine et effectuer votre traitement.

Exemple

Dans cet exemple, nous allons avoir deux fichiers html. le premier fichier situé a : http://demo.acrossmontreal.com/html5/crossMessaging/index.html, et qui représente le client, se compose d’un formulaire et d’un iframe.
Le formulaire permet de poster vers une page qui se trouve sur un autre domaine http://demo.berejeb.com/html5/crossMessaging/index.html. Cette même page est chargée dans le iframe du client, ce qui permet de suivre les modifications au moment du post. Voici le code :

1
2
3
4
5

<div id="_mcePaste">form id="myForm" action="/"</div>
<div id="_mcePaste">input type="text" id="myMessage" value="Your message"</div>
<div id="_mcePaste">input type="submit" value="post Message to the frame!"</div>
<div id="_mcePaste">/form</div>
<div id="_mcePaste">iframe id="iFrame" src="http://demo.berejeb.com/html5/crossMessaging/index.html"/iframe</div>

On va maintenant ajouter le bout de script JavaScript qui permettra de poster le message :

1
2
3
4
5
6
7
8
9
10

          window.onload = function () {
                var widget = document.getElementById("iFrame").contentWindow,
                form = document.getElementById("myForm"),
                myMessage = document.getElementById("myMessage");
                myMessage.select();
                form.onsubmit = function () {
                    widget.postMessage(myMessage.value, "http://demo.berejeb.com/html5/crossMessaging/index.html");
                    return false;
                };
            };

1. Au chargement de la page, Le script récupère la fenêtre du iframe via l’objet contentWindow, ainsi que le formulaire et le champs a envoyer.
2. Au moment du submit, le iframe va poster le contenu du champs vers l’adresse : http://demo.berejeb.com/html5/crossMessaging/index.html

C’est tout ce qu’il ya a faire au niveau du client. Passons au serveur (http://demo.berejeb.com/html5/crossMessaging/index.html), cette page va écouter les messages provenant d’un call postMessage, et va filtrer le contenu selon la source (le client). Au début, la page affiche un message :

1

div id="content"Nothing for the moment../div

Ajoutons le script Javascript qui permet d’écouter et de reagir :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

function handleMessage (e) {
    var message;
    if (e.origin !== "http://demo.acrossmontreal.com") {
        message = "You are not allowed to post to this page!";
    }
    else {
        message = "Received: " + e.data + " from the client" + e.origin;
    }
    document.getElementById("content").innerHTML = message;
}
 
if (window.addEventListener) {
    window.addEventListener("message", handleMessage, false);
}
else {
    window.attachEvent("onmessage", displayMessage);
}

Le point a noter ici c’est l’évènement « message » (ou « onmessage » pour d’autres navigateus ).

A la réception d’un message, la méthode handleMessage est exécutée. en testant sur la propriété origin, on peut alors bloquer l’accès pour les sites non connues.
C’est tout ce qu’il y’a a faire!

Pour voir ce que cela donne, visitez : http://demo.acrossmontreal.com/html5/crossMessaging/

Notez bien que des problèmes de CSRF peuvent toujours subvenir surtout si on accepte du contenu html, il ne faut jamais se fier au contenu parvenant de l’extérieur meme si vous connaissez la provenance. Ajoutez des mécanismes de sécurité dans votre application pour palier a ca.

Conclusion

Dans cette premiere partie, on vient de voir comment effectuer de la communication inter documents via l’api postMessage. Dans un article suivant, je vais couvrir comment effectuer des appels Ajax en utilisant la version 2 de l’objet XMLHttpRequest.

Revisitez ce blog!

Cliquez ici pour regarder les conferences en temps reel (peut etre offline)

Journee 4

Improving QA on PHP development projects

Michelangelo van Dam

Embracing Constraints with CouchDB

David zuelke

Building a platform from open source

Dustin Whittle

Grokking REST

Ben Ramsey

MySQL Server Performance Tuning 101

Ligaya Turmelle

Caching on the edge

Fabien Potencier

Dependency injection

Fabien Potencier

Journee 3

XML Versus the New Kids On The Block

David Zuelke

Why Zend Framework powers the enterprise

Michelangelo van Dam

Requirements: The Last Bottleneck

Bill Karwin

Introducing Zend Framework 2.0

Matthew Weier O’Phinney

Why MVC is not an application architecture …

Stefan Priebsch

Continuous Inspection and Integration of PHP Projects

Sebastian Bergmann

Intro to MySQL EXPLAIN

Ligaya Turmelle

Security 202: And you thought you’d be secure

Arne Blankerts

PHP in a mobile ecosystem

Ivo Jansch

Desktop Apps with PHP and Titanium

Ben Ramsey

Building Intelligent Search Applications with Apache Solr

Israel ekpo

Why MVC is not an application architecture

Stephan Priebsch

PHP for Batch Jobs on IBM i

Alan Seiden

Journee 2 :

Documents, documents, documents

Matthew Weier O’Phinney

SQL Injection Myths and Fallacies

Bill Karwin

Unit testing after Zend Framework 1.8

Michelangelo van Dam

Technical Debt

Elizabeth Naramore

The Doctrine Project

Jonathan Wage

Integrating PHP with RabbitMQ

Alvaro Videla

A new approach to object persistence in PHP

Stefan Priebsch

The State of SOAP in PHP

David Zuelke

Advanced Date/Time Handling with PHP

Derick Rethans

Reusable Bootstrap Resources with Zend_Application

Hector Virgen

Demystifying PostgreSQL

Asher Snyder

Journee 1 :

Pas beaucoup de slides disponible pour l’instant! J’imagine que c’est du au fait que c’est une journée lab. Les sessions commencent aujourd’hui! faut attendre encore pour  avoir du stock!

Bad Guy For a Day – A Websecurity hands-on tutorial

Arne Blankerts

Modeling Tips, Tricks and Best Practices

Ralph Schindler

Caching on the edge

Fabien Potencier

Taming the Untestable Beast

Sebastian Bergmann

JavaScript for PHP Developers

Ed Finkler

Notes du lab Ici

Streaming

Addy Osmani a publie un tutoriel dans lequel il montre comment créer une galerie de photos avec jQuery et CSS3. L’effet est intéressant pour afficher des photos « polaroides ».

Screencast: http://screenr.com/Z0W
Démo: http://www.addyosmani.com/resources/shinetime
Telechargement: http://www.addyosmani.com/resources/shinetime/shinetime.1.01.zip

La Presse vient de lancer sa première Application IPhone : La Presse Hockey, Une application gratuite qui suit l’activité de la league de Hockey au Etats Unis et Canada. C’est aussi ma première application puisque j’ai contribué au développement!

Avec La Presse Hockey, vous pouvez

• Accéder aux articles, blogues et vidéos de la presse sur le hockey.
• Clavarder en temps réel avec François Gagnon, mathias brunet et des milliers d’autres internautes pendant les matchs.
• Etre au courant en temps réel du suivi des matchs grace au systeme de push notifications (alertes)
• Obtenir des statistiques détaillées sur l’ensemble du déroulement des matchs de la ligue.
• L’application peut être installée sur IPhone, IPod ou IPAD.

Decouvrir et Installer l’application La Presse Hockey pour votre IPhone, IPod ou IPAD!

Encore un nouveau venu dans la cour des frameworks : Unify. Le framework supporte les téléphones intelligents basés sur iOS, Android et WebOS. Le support des tablettes est planifie pour l’année prochaine. Unify utilise des technologies web comme HTML5, CSS3 et JavaScript. L’utilisateur ne devrait pas faire la différence de rendu entre une application iPhone traditionnelle et une application Unify. Les bénéfices en temps de développement et donc en « time-to-market » seraient évidemment intéressants. Unify est basé sur qooxdoo, Adobe Air, Sass et PhoneGap.

Parmi les fonctionnalites de unify on cite :

• du cache intelligent
• une API de communication avec le layer business
• support de proxy HTTP
• support YQL
• indicateur distractivités
• tabs, scrolls, slides, toolbars et barres de titres
• Support Touch, transitions CSS3
• API de Geo location

Bismillah est un service de Mail gratuit qui offre plusieurs fonctionnalités intéressantes :

• Utilisation en IMAP ou en POP3
• Synchronisation avec les telephones intelligents IPhone et Android
• Utilisation avec MS Outlook, Thunderbird ou Apple Mail
• Une interface Web 2.0 avec des fonctionnalités comme
  • du drag & drop de repertoires
  • une recherche rapide avec la fonctionnalité autocomplete
• Un gestionnaire de groupes supportant des groupes
• Un antispam personnalisable et supportant les techniques liste blanche / liste noire
• Un répondeur automatique et un gestionnaire de forwarding

L’inscription est simple et la création du compte est instantanée!

Je m’inscris a Bismillah.com maintenant!

PHPillow est un client PHP orienté objet pour CouchDB. Le dernier release supporte les versions de PHP supérieures a 5.2. Le client bénéficie aussi de 96% de test coverage. PHPillow est un client leger qui dispose de contraintes de validation de document, une synchronisation automatique des vues ainsi qu’un versionning automatique de documents.
Dans l’article suivant nous allons voir comment nous pouvons facilement manipuler CouchDB avec PHPillow.

Connection a CouchDB

Pour se connecter, utilisez la classe phpillowConnection. Exemple:

1

phpillowConnection::createInstance('localhost', 5984, 'user', 'password');

Une fois créée, cette connection va etre utilisée dans vos classes documents et vues automatiquement.

Definir un document personnalisee

Dans cet exemple, nous allons representer un article, qui peut avoir cette definition :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

class ArticleDocument extends phpillowDocument
{
    protected static $type = 'article';
    protected $requiredProperties = array(
        'title',
        'abstract',
        'author'
    );
 
    public function __construct()
    {
        $this->properties = array(
            'title'     => new phpillowStringValidator(),
            'abstract'      => new phpillowTextValidator(),
            'author'      => new phpillowStringValidator(),
        );
 
        parent::__construct();
    }
    protected function generateId()
    {
        return $this->stringToId( $this->storage->title );
    }
    protected function getType()
    {
        return self::$type;
    }
}

La propriété $type definit le type de document (article dans notre cas). Elle doit être unique dans toute l’application.
Si vous n’êtes pas encore sous PHP 5.3, (qu’attendez vous pour migrer ? ), vous devez implémenter la methode getType() afin de retourner le type de votre document, sinon, le late static binding vous simplifiera la vie, vous pourrez alors implémenter cette methode dans votre classe de base.
Le constructeur associe des validateurs aux propriétés de l’article qui sont déclarées dans la propriété $requiredProperties. PHPillow dispose de plusieurs types de validateurs comme phpillowStringValidator et phpillowTextValidator. Vous comprenez que vous pouvez eventuellement créer des validateurs personnalisées pour votre application par la suite.
Le dernier truc que vous aurez besoin de faire est de générer un identifiant de document. la méthode stringToId() verifiera les requis de CouchDB pour un id de document comme l’unicité.

Utiliser un document

La création du document se fait comme suit :

1
2
3
4
5

$doc = new ArticleDocument();
$doc->title = 'Mon premier article';
$doc->abstract  = 'Ceci est mon premier article';
$doc->author  = 'Anis Berejeb';
$doc->save();

La méthode save() rendra disponible la propriété _id :

1
2

echo $doc->_id;
> article-mon_premier_article

Pour récupérer un Article :

1
2

$doc = new ArticleDocument();
$doc->fetchById( 'article-mon_premier_article' );

Les propriétés _id et _rev représentent respectivement l’identitfiant et la version courante de l’article. L’ensemble des versions est aussi disponible dans un tableau :

1
2

echo $doc->revisions[0]['title'];
> Mon premier article

La propriété $versioned permet d’activer ou de désactiver le versionning d’un document.

Les vues

Dans CouchDB, les vues représentent un moyen d’accéder les documents par leurs propriétés ou par des clés complexes. Vous pouvez créer une vue en étendant la classe phpillowView comme suit :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

class ArticleView extends phpillowView
{
    protected $viewDefinitions = array(
        // Indexer les articles par leur titre et afficher leur auteur
        'entries' => 'function( doc )
{
    if ( doc.type == "article" )
    {
        emit( doc.title, doc._id );
 
        emit( [doc._id, 0], doc._id );
 
        if ( doc.author )
        {
                emit( [doc._id, 1], doc.author );
        }
    }
}',
    );
 
    protected function getViewName()
    {
        return 'vue_auteur';
    }
}

Les définitions de vues sont stockées dans la propriété $viewDefinitions et sont automatiquement écrits dans la base de données. Chaque vue a un nom. Dans la vue, Le code qui effectue l’indexation est écrit en EcmaScript. La fonction emit() de CouchDB prend une clé et du contenu comme paramètres, elle indexe le contenu avec la clé donnée. Normalement, vous ne devez pas stocker des documents complets parce que les vues sont générées. Vous pourrez récupérer le document  via son titre comme suit :

1

$doc = ArticleView::entries( array( 'key' => 'Mon premier article' ) );

Le gestionnaire

Le gestionnaire phpillowManager est un point central pour manipuler vos documents :

1
2
3
4
5
6
7
8

phpillowManager::setDocumentClass( 'article', 'ArticleDocument' );
$doc = phpillowManager::createDocument( 'article' );
// ...
 
$doc = phpillowManager::fetchDocument(
    'article', 'article-mon_premier_aricle'
);
// ....

Plus d’informations, téléchargement et documentation sur

• Phpillow
• CouchDB