Inscrivez et connectez vos membres en un clic !

Formation

En Ligne

Prix sur demande

Appeler le centre

Avez-vous besoin d'un coach de formation?

Il vous aidera à comparer différents cours et à trouver la solution la plus abordable.

Description

  • Typologie

    Formation

  • Méthodologie

    En ligne

Grâce à cette formation vous pourrez acquérir les connaissances nécessaires qui vous permettrons d’ajouter des compétences à votre profil et obtenir de solides aptitude qui vous offriront de nombreuses opportunités professionnelles.

Questions / Réponses

Ajoutez votre question

Nos conseillers et autres utilisateurs pourront vous répondre

À qui souhaitez-vous addresser votre question?

Saisissez vos coordonnées pour recevoir une réponse

Nous ne publierons que votre nom et votre question

Les Avis

Le programme

Introduction du cours

Vous venez de finir de modifier votre script de connexion pour donner la possibilité aux utilisateurs de se souvenir de leur pseudo, et vous êtes persuadés d'avoir tout fait pour simplifier au maximum la tâche de vos membres ? Détrompez-vous : il existe un moyen pour les identifier d'un seul clic.

Dis, tu deviens pas un peu fou, là o_O ? Si on clique juste sur un bouton, tout le monde pourra se connecter sur mon site !

En fait, il y a une astuce : vos membres sont déjà identifiés sur d'autres sites plus connus que le vôtre, tels que Google, Facebook ou Windows Live, pour ne citer que les plus utilisés. Tous ces sites proposent une fonctionnalité intéressante : délivrer, avec l'accord de l'utilisateur, des données concernant leurs membres. Vous pouvez récupérer ces informations pour identifier vos membres.
De plus, vous pourrez proposer l'option « inscription-minute » : vous pourrez aller chercher les infos du visiteur directement dans son profil MSN ou Facebook !

Présentation de JanrainJanRain

JanRain avait comme nom RPX avant le 16 juin 2010.

JanRain est un site qui permet de mettre en place gratuitement, rapidement et facilement un module permettant à vos membres de se connecter sur votre site en un clic !
De nombreux sites l'utilisent : vous pouvez voir la liste complète ici. Par exemple, le Site du Zéro l'utilisait :

Lorsqu'on clique sur les petites icônes, une fenêtre apparaît :

Vous avez le choix entre plusieurs fournisseurs OpenID. Un fournisseur est un gros site, comme Windows Live, Google, Facebook... Il permet à ses membres de délivrer, avec leur accord, des informations les concernant. Si vous êtes déjà connectés sur un de ces fournisseurs, on vous propose directement de vous loguer sur le SdZ :

Vous avez juste à cliquer sur le bouton « Connecter » pour vous identifier sur le SdZ !

Avantages
  • Connexion et inscription en un clic !

  • Support de nombreux fournisseurs OpenID.

  • Simple à mettre en place.

Inconvénients
  • Le temps de chargement est très long : le visiteur est d'abord redirigé vers le site de Janrain, puis vers le fournisseur, puis il retourne sur Janrain... Bref, c'est parfois plus rapide de se connecter directement

  • Vous ne pouvez pas personnaliser l'interface utilisateur pour l'adapter a votre site.

  • Votre site dépend de JanRain : si un problème technique survient, ou pire, si cette entreprise disparaît, votre script ne fonctionnera plus.

Comment ça marche ?
  • Étape 1 : l'utilisateur clique sur une des icônes de fournisseurs sur votre site.

  • Étape 2 : JanRain redirige le visiteur vers le site du fournisseur pour l'authentification.

  • Étape 3 : le fournisseur renvoie des infos à JanRain, qui les sauvegarde dans sa BDD.

  • Étape 4 : votre site envoie une requête vers la BDD de JanRain qui lui renvoie des infos sur le membre en question.

Convaincus ? Alors c'est parti !

La base du système

Lorsqu'un membre tente de se connecter avec un site externe, ce site retourne automatiquement un ID et une adresse internet. Il est possible de récupérer certaines informations sur le membre, telles que son adresse e-mail, son avatar, etc...
Par exemple, voici un lien pour Google (j'ai choisi un id au hasard) :

https://www.google.com/accounts/o8/id?id=fbf83cgfryqm8f73nqzf8rng3irxmg43qmf

On appelle ce lien l'identifier. On ne va pas utiliser l'ID, car deux utilisateurs différents peuvent avoir un ID similaire, l'un étant sur Google, l'autre sur Facebook. En revanche, l'identifier est unique, quel que soit le site externe.
On peut donc utiliser l'identifier pour lier un compte externe à un compte sur votre site : ainsi, lorsque un utilisateur se connecte avec Janrain, on vérifiera si l'identifier est déjà stocké dans la BDD.
Par exemple, la table membres :

id

pseudo

mail

identifier

1

BrianMan692

brianman692@gmail.com

https://www.google.com/accounts/o8/id? [...] ng3irxmg43qmf

2

$imon

simon@gmail.com

https://www.google.com/accounts/o8/id? [...] ng3irxmg53qmg

On a rajouté une colonne identifier pour mémoriser le lien renvoyé par la BDD de JanRain. Il servira à stocker l'identifier lors de l'inscription et à le comparer avec celui renvoyé par JanRain lors de la connexion.
Nous allons créer une page pour gérer l'inscription avec JanRain, on va l'appeler inscriptionjanrain.php. On aura besoin d'en créer une autre pour la connexion : connexionjanrain.php.

Étape 1 : ajoutez des fournisseurs !

Vous l'avez bien vu, lorsque la boîte de connexion est affichée, on a le choix entre plusieurs fournisseurs.
Tout d'abord, vous devez créer un compte sur cette page. Si vous ne voulez pas payer, il y a une version gratuite limitée : cliquez sur « Sign up » pour vous inscrire (oui, JanRain n'est disponible qu'en anglais ). Et... une fenêtre comme sur le SdZ s'ouvre ! Eh oui, le site de JanRain lui-même utilise ses propres services ! Si vous possédez déjà un compte OpenID, il suffit de cliquer sur son icône. Sinon, il est temps de s'inscrire sur un des fournisseurs !
Il vous suffit de remplir les informations demandées pour vous inscrire. On vous demandera le nom de votre application, vous pouvez mettre le nom de votre site web (cela n'a pas une grande importance).
Vous vous retrouvez ensuite devant le panneau de configuration de votre application :

Pour commencer à modeler votre nouvelle application, cliquez sur « Sign-in for Web », dans le menu « Deployment » :

sign-in for Web" /

Vous vous retrouvez face à un autre formulaire :

Dans la première liste, vous pouvez choisir d'avoir le code soit pour ouvrir une fenêtre (« modal »), soit pour insérer un cadre (« embedded »).

Pourquoi certaines fonctionnalités sont-elles grisées ?

Janrain est un service payant, et certaines options sont réservées aux membres « Pro ». Les options grisées sont juste la dans le but de vous faire saliver !

Pour ajouter des fournisseurs, cliquez sur la liste « Providers » en bas a gauche, puis faites un glisser-déposer d'un fournisseur vers la grille.

Tous les fournisseurs accompagnés de l'icône

sur leur droite demandent des paramètres spéciaux. Les autres peuvent s'ajouter en un seul clic sans pré-requis (un seul glisser-déplacer en l'occurrence ;) ).

Pour Facebook

Vous devez en premier lieu être inscrits sur Facebook. Connectez-vous et allez à l'adresse : http://www.facebook.com/developers/. Cliquez sur « Accepter », puis sur

en haut à droite. Donnez le nom que vous voulez à votre application, cela n'a pas d'importance. N'oubliez pas de cocher « J'accepte les conditions d'utilisation » et validez.
Du côté du site de JanRain, il faut cliquer deux fois sur « Next ». Une page s'affiche ensuite avec différents renseignements. Faites un copier-coller de :

  • Clé API vers API key (Facebook => JanRain) ;

  • Secret vers Application Secret.

Cochez la case « Yes! I want to receive my users email addresses. » pour recevoir les adresses e-mail des membres qui vont se connecter sur votre site avec Facebook.

Pour Windows Live ID

Pour Windows Live ID, c'est un peu plus compliqué. Vous devez tout d'abord posséder un compte Windows Live. Lorsque vous faites un glisser-déplacer avec Windows Live ID, on vous demande une Privacy Policy URL. C'est la page vers la politique de confidentialité de votre site Web.
Ensuite, allez sur la page de création d'une application Windows Live. Connectez-vous à l'aide de votre identifiant Windows Live. Vous vous retrouvez devant une page en anglais ( :-° ) ; le système est le même qu'avec Facebook.
Je vous laisse remplir les deux premiers champs (titre et langue), vous avez l'habitude maintenant. ;)
Vous pouvez ensuite valider en cliquant sur « I accept », vous devez arriver sur une page de confirmation :

Revenez sur le site de JanRain, cliquez sur « Next » jusqu'à la troisième étape. On vous fournit un renseignement : Return URL. Revenez sur le site de Windows Live, cliquez sur « Application Settings Page » puis « API Settings » :

Il faut maintenant entrer Return URL dans le champ « Redirect domain ».

Cliquez ensuite sur « Next » sur le site de JanRain. Faites un copier-coller de « Application Id » et de « Secret Key » dans le formulaire qui s'affiche.
Cliquez sur « Save » pour enregistrer les infos.

Pour les autres fournisseurs

La manipulation est quasiment la même que pour Facebook, ou aucune manipulation n'est requise. Je vous laisse vous débrouiller pour le reste des fournisseurs. ;)

Une fois que vous avez fini, n'oubliez pas de fermer la fenêtre cliquer sur « Save » en bas à droite.

Étape 2 : intégrer JanRain dans votre siteLe code xHTML et JavaScript à insérer dans vos pages

Pour intégrer Janrain dans votre site, cliquez sur « Get the Code » :

Le site vous donne alors un code JavaScript et un autre en HTML. Ils devraient ressembler à ceci :

<script type="text/javascript"> (function() { if (typeof window.janrain !== 'object') window.janrain = {}; window.janrain.settings = {}; janrain.settings.tokenUrl = '__REPLACE_WITH_YOUR_TOKEN_URL__'; function isReady() { janrain.ready = true; }; if (document.addEventListener) { document.addEventListener("DOMContentLoaded", isReady, false); } else { window.attachEvent('onload', isReady); } var e = document.createElement('script'); e.type = 'text/javascript'; e.id = 'janrainAuthWidget'; if (document.location.protocol === 'https:') { e.src = 'https://rpxnow.com/js/lib/user/engage.js'; } else { e.src = 'http://widget-cdn.rpxnow.com/js/lib/user/engage.js'; } var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(e, s); })(); </script> <a class="janrainEngage" href="#">Sign-In</a>

Le premier code est à insérer dans la balise <body></body> dans votre page de connexion habituelle. Il est conseillé de le mettre juste avant </body>. Le second code est un lien : celui qui ouvrira la fenêtre de connexion. Vous pouvez le mettre n'importe où dans votre balise <body></body>.

Il faut rajouter un paramètre après janrain.settings.tokenUrl = '__REPLACE_WITH_YOUR_TOKEN_URL__'; :

janrain.settings.tokenUrl = 'http://unsite.com/connexionjanrain.php';

Il correspond a la page vers laquelle le visiteur sera redirigé après authentification, nous la coderons plus loin dans le tutoriel.

Vous remarquerez que l'interface de connexion de Janrain est elle aussi en anglais. Pour pouvoir personnaliser la fenêtre et changer la langue, il vous faudra... Payer. :(

Configurer JanRain

Entrez dans les paramètres de votre application en cliquant sur « Application settings » dans le menu « Deployment » :

application settings" /

Dans le premier champ, vous pouvez entrer les domaines sur lesquels elle pourra être utilisée. Si l'adresse de votre site est http://unsite.com/, vous pouvez mettre unsite.com. Si vous avez des sous-domaines et que vous voulez que votre application soit aussi utilisable dessus, vous pouvez entrer unsite.com et *.unsite.com.

Vous pouvez aussi entrer localhost pour faire des tests en local.

JanRain est configuré pour ne renvoyer qu'une seule fois les informations sur le membre. Or, nous aurons besoin d'actualiser la page pour pouvoir demander au visiteur certaines infos.
On va donc modifier cela : dans la section « Migrations », il faut désactiver l'utilisation unique des token (« One-time use auth_info tokens ») :

À noter : JanRain acceptera de renvoyer les infos pendant approximativement 10 minutes.

Étape 3 : l'inscription

Nous allons ici coder la page inscriptionjanrain.php, qui gère l'inscription avec un compte externe.

Réfléchissons...

On va récupérer les informations du membre avec JanRain. Il suffira alors de les enregistrer dans la BDD s'il n'en manque pas (quelques fournisseurs ne fournissent pas l'e-mail ou le pseudo de leur membre). S'il n'y a pas les données minimales, on les demandera au visiteur par un formulaire.
Un bon schéma vaut mieux qu'un long discours :

Codons !

Note : j'utilise PHP pour gérer la réponse des fournisseurs, mais il est tout à fait possible de coder un équivalent en Python, Java, C# ou Ruby on Rails (voir la liste à gauche dans l'étape 2).

Cliquez sur « Call the API » :

Vous avez le script de base à cette adresse : http://gist.github.com/291396.
Le voici (les commentaires ont été traduits en...

Appeler le centre

Avez-vous besoin d'un coach de formation?

Il vous aidera à comparer différents cours et à trouver la solution la plus abordable.

Inscrivez et connectez vos membres en un clic !

Prix sur demande