Le social login est une forme d’authentification unique utilisant les informations de connexion existantes d’un utilisateur à un réseau social tels que Facebook, Twitter ou Google+ pour connecter l’utilisateur à un site web tiers, au lieu de créer un nouveau compte de connexion spécifiquement pour ce site.
Le social login a été conçu pour simplifier le processus de connexion pour les utilisateurs, cependant il n’en est rien pour les développeurs. Chaque fournisseur de social login ayant sa propre api, qui, bien que proches car reposant sur OAuth (pour Open Authorization, définition ici), restent différentes et nécessitent donc de réaliser un développement spécifique par connexion à implémenter.
Nous allons donc voir ici comment simplifier la tâche du développeur, en utilisant une librairie Javascript qui prend en charge OAuth (1.0 et 2.0) et le lien avec différents fournisseurs tel que Twitter, Facebook, LinkedIn, Instagram, Google, GitHub, etc. Il existe de nombreuses librairies qui répondent à ce besoin, mais nous détaillerons ici l’utilisation de Satellizer. Le reste de l’article se concentre sur l’intégration du social login dans une application web, mais tout cela est aussi valable pour une application mobile si vous faites du développement mobile hybride avec Phonegap ou Ionic par exemple.
Vous trouverez les différentes procédures d’installation dans la documentation du site, mais pour aller au plus vite vous pouvez tout simplement inclure la librairie javascript dans le fichier index.html de votre application Angular via son URL CDN :
<script src="https://cdn.jsdelivr.net/satellizer/0.15.5/satellizer.min.js"></script>
Au sein du module d’application Angular, généralement app.js, on déclare l’injection de la dépendance satellizer (dont on vient d’ajouter la source via le CDN) :
var myApp = angular.module('MyApp', ['satellizer']);
puis on configure la librairie pour l’utilisation souhaitée en travaillant avec l’objet $authProvider au sein de la config de ce même module Angular. On y ajoute tous les fournisseurs pour lesquels on souhaite intégrer le social login à notre application. Je vous renvoie vers la documentation pour toutes les propriétés que l’on peut configurer pour chaque fournisseur.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
myApp.config(function($authProvider) { $authProvider.facebook({ clientId: 'Facebook App ID' }); $authProvider.google({ clientId: 'Google Client ID' }); $authProvider.github({ clientId: 'GitHub Client ID' }); }); |
Disons que nous n’utiliserons que Facebook comme fournisseur pour cet exemple, configuré ainsi :
|
1 2 3 4 5 6 7 8 9 |
$authProvider.facebook({ clientId: 'xxxxxx' name: 'facebook', url: 'https://monserveurbackend:8080/auth/facebook', //callback url authorizationEndpoint: 'https://www.facebook.com/v2.5/dialog/oauth', display: 'popup', oauthType: '2.0', popupOptions: { width: 580, height: 400 } }); |
Le clientId est bien sur à récupérer sur votre compte Facebook Developer, celui qui est associé à l’application Facebook que vous avez créé pour l’occasion.
La librairie est désormais installée et configurée, il convient maintenant de l’utiliser et donc de développer un cas concret de login.
1/ Côté Front-End
Au sein d’une page html quelconque, insérez un bouton de connexion comme suit :
|
1 2 3 4 5 6 7 8 9 |
<div class="social-connect"> <div class="facebook"> <p class="fb-header">Connexion Facebook</p> <div class="fb-connect" ng-click="authenticate('facebook')"> <div class="fb-logo"></div> <p>Facebook connect</p> </div> </div> </div> |
On utilise la directive angular ng-click pour définir l’action executée par clic sur le bouton (si vous ne savez pas de quoi je parle, il est temps de relire la documentation d’angular ou de demander à suivre une de nos formations AngularJs chez SimplX), ici on appelle la fonction authenticate avec le paramètre facebook.
Il faut donc définir cette fonction dans le controlleur Angular associé à cette vue HTML.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
angular.module('MyApp') .controller('LoginCtrl', function($scope, $auth) { $scope.authenticate = function(provider) { $auth.authenticate(provider).then(function(loginResult) { //traitement succès login : en général mise en localstorage des infos de session //utilisateur et redirection vers page home }).catch(function(loginError) { //traitement erreur }); }; }); |
2/ Côté Back-end
Nous implémentons maintenant la logique de traitement de la réponse facebook au sein du back-end de notre application, à l’adresse indiquée par la propriété « url » pour facebook dans la configuration du $authProvider. En effet, une fois la connexion Facebook réalisée et réussie, l’url définie en configuration est appelée par Facebook qui y joint des informations d’autorisation. L’objectif du back end est donc d’utiliser ces informations pour obtenir les données utilisateurs nécessaires au login et de les renvoyer au front-end.
Dans notre exemple nous utilisons un back-end Node.js qui repose sur Express.js pour la gestion des requêtes et des routes de notre API.
Définition de la route :
Lors d’une requête HTTP de type POST sur la route https://monserveur/auth/facebook, le code de notre controlleur socialLoginController s’exécutera. Jetons donc un oeil à la fonction facebookAuth :
|
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 29 30 31 32 33 34 |
exports.facebookAuth = function(req, res, next) { //enter here all the fields you need for you web application var fields = ['id', 'email', 'first_name', 'last_name', 'link', 'name', 'picture', 'location', 'languages', 'gender', 'birthday']; var accessTokenUrl = 'https://graph.facebook.com/v2.5/oauth/access_token'; var graphApiUrl = 'https://graph.facebook.com/v2.5/me?fields=' + fields.join(','); var params = { code: req.body.code, client_id: req.body.clientId, client_secret: //secret facebook de votre application configurée dans facebook developer, redirect_uri: req.body.redirectUri }; // Step 1. Exchange authorization code for access token. request.get({ url: accessTokenUrl, qs: params, json: true }, function(err, response, accessToken) { //logger.debug("accessToken", accessToken); if (!response || response.statusCode !== 200) { return res.status(500).send({ message: accessToken.error.message }); } // Step 2. Retrieve profile information about the current user. request.get({ url: graphApiUrl, qs: accessToken, json: true }, function(err, response, profile) { if (response.statusCode !== 200) { return res.status(500).send({ message: profile.error.message }); } //process facebook profile information here var fbUser = [..]; //you can check if user already exist in your db, if not you can create it // return the information including token as JSON to the front end res.status(200).send({ user : fbUser; }); }); }; |
Ce qui est important dans le code ci-dessus, ce sont les noms des champs que l’on souhaite récupérer, par exemple : ‘id’, ’email’, ‘first_name’. En effet, ceux-ci sont différents d’un fournisseur à l’autre, first_name + last_name peut être ‘name’ chez un autre provider, il convient donc de vérifier les noms des champs via la documentation d’api du fournisseur (pour facebook, c’est ici).
Ensuite, la récupération des informations utilisateur se fait en 2 temps :
- On utilise le code renvoyé par facebook à notre url de callback (/auth/facebook) pour obtenir un token d’accès.
- On utilise ce token pour appeller la graph api de facebook pour lire les informations de l’utilisateur.
On traite ensuite les informations de profil demandées pour créer l’utilisateur dans notre base de donnée si il n’existe pas encore, puis renvoyer l’utilisateur tel qu’il est dans la base de notre application, avec un token jwt d’authentification le cas échéant. Par cette dernière ligne de code :
L’utilisateur est donc renvoyé au front-end, et le callback de la promesse du controlleur Angular peut donc s’exécuter (on entre dans la fonction de callback de succès du .then()) :
|
1 2 3 4 |
$auth.authenticate(provider).then(function(loginResult) { //traitement succès login : en général mise en localstorage des infos de session //utilisateur et redirection vers page home }) |
Et voilà votre utilisateur Facebook créé et/ou connecté sur votre application Web ou Mobile.
Pour ajouter un fournisseur, reproduisez la même opération :
- Configurer le $authProvider avec le nouveau provider dans le fichier app.js
- Ajouter un bouton HTML dans votre page de Login, vous avez uniquement à changer le nom du provider
1ng-click="authenticate('newprovider')" - La fonction authenticate de notre controlleur étant générique, vous n’avez besoin de rien faire de plus niveau Front-End
- Ajouter une nouvelle route dans le back-end, route correspondante au callback définit dans la configuration du $authProvider pour ce nouveau fournisseur, cf. step 1
- Ajouter la méthode du controlleur associée à cette route
- Développez cette méthode avec le code spécifique lié à ce fournisseur, consultez la documentation développeur OAuth de référence pour ce fournisseur (une recherche google vous y conduira).
- Traiter les informations utilisateur, créer (si besoin) et renvoyer l’utilisateur au front-end.
La complexité du travail se résume finalement au code spécifique lié à la récupération des informations utilisateurs suivant la plateforme. Petit coup de pouce, vous pouvez trouver un grand nombre d’exemple sur github: Sample
Voilà, plus aucune excuse pour ne pas ajouter du social login sur vos applications!
Soyez le premier à commenter