Social network connect

Dernière édition : Octobre 2020

Ce document décrit le fonctionnement de ZADS lorsque que l’authentification (login) via les réseaux sociaux est activée.

Qu’est ce que le mode « SOCIAL AUTENTIFICATION » ?

Ce mode permet aux visiteurs d’utiliser un de leur compte d'un réseau social (Facebook, Google ou Twitter) pour accéder au site ZADS sans avoir besoin de se créer un compte LOCAL avec un nom et mot de passe à retenir.

Identification Enregistrement (quick)
site-oauth-login site-oauth-register

Les avantages sont :

  • Pas besoin de retenir un mot de passe spécial pour ZADS,
  • Pas besoin de renseigner ses données lors de l’enregistrement, elles sont directement récupérées du site Social.

Principe de fonctionnement :

ZADS utilise le protocole OAuth2 qui est généralisé (à quelques variantes prés) aux différents sites de médias sociaux. Le fonctionnement se déroule en 4 étapes :

  • Etape 1 : l’utilisateur autorise le partage des informations de connexion du site social.
  • Etape2 : si accord, ZADS obtient un TOKEN d’accès qui servira de clef d'identification au réseau social.
  • Etape 3 : ZADS utilise ce TOKEN d’accès pour obtenir les informations de connexion. Elles sont alors liées au compte qui est créé dans ZADS.
  • Etape 4 : l’utilisateur valide l’association du compte ZADS et du réseau social. L’utilisateur peut alors se connecter au site ZADS sans entrer son email, login ou mot de passe.

Pour plus d’informations sur la technique OAuth2, un très bon article est disponible ici

L'autentification repose sur des cookies. Veillez à les autoriser au niveau de votre navigateur.

L’implémentation de ZADS utilise HELLO.JS (https://github.com/MrSwitch/hello.js)

Opérations préalables :

Il est nécessaire de déclarer son application web auprès du site Social considéré pour obtenir des clefs d’identification unique à votre site.

Voici les URLs de déclaration :

Attention de toujours bien ajouter le SLASH à la fin des URL de redirections. Exemple : demo6.zads.fr/

Déclaration de l'application sur Facebook et ZADS

Se connecter avec son compte Facebook standard à https://developers.facebook.com/apps/. Créez une aplication en entrant votre nom de domaine (avec le /).

fb-admin-dashboard

Cliquez sur l"application pour accéder aux détails et en particulier l'ID de l'application

fb-admin-appdetails

Saisir cette ID d'application dans ADMIN > CONFIGURATION > SOCIAL.

admin-fb-oauth

Exemple de déclaration pour Google

Exemple de déclaration pour Twitter :

Attention à bien indiquer le CALLBACKURL avec l’URL de votre site (sans le /)

Opérations spéciales pour TWITTER et LINKEDIN :

Pour Twitter et Linkedin, qui sont en OAUth1, la phase d’authentification nécessite l’envoi du mot de passe SECRET_KEY lors de l’authentification. Ceci n’est pas possible côté client (trop vulnérable). On passe donc par un tiers de confiance pour stocker ces données. Déclarez ces données via : https://auth-server.herokuapp.com/ Exemple de déclaration :

Demande d’autorisation lors de la première connexion (OPT-IN)

Avant toute association du compte avec le réseau social, l’utilisateur doit donner son accord. Une fenêtre qui dépend du réseau social apparait pour obtenir cet accord.

Parcours avec Facebook

Demande de connection site-fb-login

Facebook affiche la fenêtre de demande d'autorisation fb-site-consent

L'utilisateur est crée avec comme autentification=Facebook admin-fb-usercreated

L'utilisateur peut retrouver cette information sur son profil site-fb-auth

L'image de l'avatar de Facebook est utlilisé comme image d'avatar sur le site site-fb-usermodify

En cas de modification de son profil, l'utilisateur ne peut pas modifier l'email site-fb-avatar

Attention : cette fenêtre n’apparait que la première fois. Pour révoquer l’accord, l’utilisateur devra supprimer l’application dans son profil sur le réseau social considéré.

Si l'autentification est activée sur l'écran d'enregistrement de compte, une fois l’autorisation donnée, ZADS mets à jour le formulaire d’enregistrement avec les connées collectées du réseau social. L'utilisateur peut allors compléter et enregistrer son compté définitivement. site-social-register

Si l'autentification est activée sur l'écran d'identification (login), le site va chercher si un utilisateur existe déjà pour ce compte. Si c'est pas le cas, la fenêtre suivante aparait. Il faudra alors aller sur le fenêtre d'enregistrement de compte. site-social-bug

Il est possible, de l'écran d'identification (login) de créer un compte automatiquement (sans passer par l'enregistrement de compte). L'utilisateur est alors crée avec uniquement les informations du réseau social (nom, prenom, photo, email , ...). On peut ajouter un plan par défaut, un type de compte par défaut. admin-social-autocreate

Suppression des autorisations par l’utilisateur

Sur Facebook (si normal, pas développeur), une fois connecté à votre compte, aller dans Paramètres > Applications et supprimer l'application si necessaire. fb-site-paramsapps