Inscrivez et connectez vos membres en un clic !
Formation
En Ligne
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.
Les Avis
Le programme
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 !
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 !
AvantagesConnexion et inscription en un clic !
Support de nombreux fournisseurs OpenID.
Simple à mettre en place.
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.
É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èmeLorsqu'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) :
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
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.
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 » :
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 FacebookVous 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 IDPour 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.
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 pagesPour 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 JanRainEntrez 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'inscriptionNous 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 :
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...
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 !