Vous souhaitez permettre aux visiteurs de votre site Web de se connecter facilement à votre site ? La connexion Facebook pourrait-elle être la réponse ?
Dans cet article, vous découvrirez les avantages de l'utilisation de Facebook Login et apprendrez comment l'ajouter à votre site Web.
Pourquoi utiliser la connexion Facebook sur votre site Web ?
La connexion Facebook permet aux visiteurs d'utiliser leur profil Facebook pour se connecter à votre site Web au lieu de créer une connexion unique. Ensuite, lorsqu'un visiteur utilise Facebook pour se connecter, il vous donne également accès à des informations spécifiques.
Ces informations peuvent inclure leur :
E-mail
Profil public
Aime et intérêts
Amis
Permettre aux utilisateurs de se connecter avec leurs comptes Facebook présente plusieurs avantages tant pour vous que pour l'utilisateur.
La connexion Facebook rend le processus de connexion plus rapide et beaucoup plus pratique car les visiteurs utilisent un compte et un mot de passe existants au lieu de créer un nouveau mot de passe. Selon une enquête de Digital Guardian, une personne moyenne utilise son adresse e-mail pour créer environ 130 comptes. Mais la plupart des gens ne créent pas autant de mots de passe uniques. Au lieu de cela, plus de la moitié des créateurs de comptes réutilisent les mots de passe de plusieurs comptes. Ce comportement crée de sérieux risques de sécurité.
En utilisant Facebook pour se connecter à des comptes, les visiteurs ne créent pas de nouveaux comptes et ne présentent pas de risques de sécurité inconnus. De plus, ils ont moins de mots de passe à mémoriser, ce qui rend la connexion beaucoup plus rapide et plus facile.
En tant qu'administrateur du site Web, vous pouvez consulter leurs données Facebook, qui vous fournissent des informations démographiques précieuses telles que l'âge, le sexe, l'éducation, l'adresse et les intérêts. Vous pouvez ensuite personnaliser l’expérience de votre site Web en fonction de ces données afin d’attirer encore plus de membres de votre groupe démographique le plus important.
Voici huit fonctionnalités offertes via la connexion Facebook :
Profils d'utilisateurs précis : les gens peuvent interagir sur votre site Web en utilisant leurs profils Facebook. Vous verrez des interactions plus authentiques et pourrez interagir personnellement avec les utilisateurs.
Connexion facile sur toutes les plateformes : quel que soit l'appareil utilisé par les visiteurs pour accéder à votre site Web, ils peuvent poursuivre leur expérience en utilisant leur compte Facebook pour se reconnecter rapidement.
Possibilité de fusionner plusieurs comptes : les visiteurs de votre site Web ne sont pas limités à utiliser uniquement Facebook pour se connecter. Ils peuvent également se connecter en utilisant leur e-mail ou leur téléphone. Toutes leurs informations sont liées à leur nom pour rationaliser le processus.
Contrôle complet pour l'utilisateur et le gestionnaire : vous et vos visiteurs contrôlez les données partagées entre vous, créant ainsi plus de confiance et de personnalisation.
Possibilité de modifier les autorisations : ce n'est pas parce que les visiteurs ne voulaient pas partager d'informations lors de leur première visite qu'ils ne le feront jamais. Avec des autorisations progressives, vous pouvez demander l’accès aux informations plus tard.
Possibilité de modifier l'autorisation : vous n'êtes pas coincé avec vos paramètres d'autorisation de connexion Facebook initiaux. Vous pouvez modifier progressivement vos paramètres pour répondre à vos besoins en données, avec la permission de vos visiteurs.
Connexion express : un visiteur n'a pas besoin de saisir à nouveau les informations de son compte Facebook à chaque visite. Avec Express Login, ils peuvent se connecter automatiquement avec Facebook.
Pour ajouter Facebook Login à votre site Web, suivez ces étapes pour le configurer et personnaliser l'application.
#1 : Créez un compte Facebook pour les développeurs
Avant de pouvoir commencer à configurer votre connexion Facebook, vous devez créer un compte Facebook pour les développeurs. Sur le site Web Facebook pour les développeurs, cliquez sur l'option pour vous connecter et commencer le processus d'inscription.
Vous serez invité à fournir un peu plus d’informations sur vous-même et votre entreprise. Suivez les étapes pour terminer l'inscription.
#2 : Créez votre application de connexion Facebook
Maintenant que vous avez accès à votre compte développeur, vous devez créer une application Facebook. Commencez par cliquer sur Créer une application sur votre tableau de bord Facebook pour les développeurs.
Sur la page suivante, sélectionnez le type d'application Consommateur et cliquez sur Suivant.
Vous devrez maintenant saisir un nom d'application unique et votre adresse e-mail de contact. Lorsque vous avez terminé, cliquez sur Créer une application. Vous serez ensuite redirigé vers le tableau de bord des applications de votre site Web.
#3 : Configurez la connexion Facebook pour votre site Web
À ce stade, vous verrez la connexion Facebook parmi les options de votre application Web. Cliquez sur le bouton Configurer pour commencer.
Ensuite, vous remplirez les informations sur comment et où vous utiliserez l'application.
Vous pouvez ajouter la fonctionnalité de connexion Facebook sur n'importe quelle application sur plusieurs appareils. Pour cet exemple, vous allez créer une connexion Facebook pour votre site Web, alors cliquez sur l'option Web pour démarrer ce processus.
Suivez maintenant ces étapes pour configurer votre nouvelle application :
Entrez l'URL de votre site Web.
Copiez votre SDK Facebook pour JavaScript. Il s'agit du code de base pour la connexion Facebook. Vous le saisissez dans le corps du code de votre site Web.
Exécutez un test pour voir si quelqu'un s'est connecté à votre site Web via Facebook.
Personnalisez votre bouton de connexion et recevez un code personnalisé à insérer sur votre site Internet.
Vous recevrez ensuite cinq liens expliquant comment personnaliser davantage votre application, comme indiqué dans la section suivante.
#4 : Personnalisez votre connexion Facebook
Votre connexion Facebook fonctionne désormais sur votre site Web à un niveau de base. Mais si vous souhaitez tirer le meilleur parti de votre compte, vous devrez parcourir les liens sur cette dernière page pour personnaliser votre application Facebook.
Chaque option vous donnera un morceau de code à ajouter à votre code maître dans le corps de votre site Web, ce qui personnalisera davantage votre connexion Facebook.
Donnez aux visiteurs la possibilité de supprimer leurs données
La suppression des données est un lien facile à suivre pour les visiteurs, qui leur permet de supprimer toutes les données que vous avez collectées. Cette option donne aux visiteurs une tranquillité d'esprit lorsqu'ils se connectent, car ils savent qu'ils ont un moyen de s'en sortir si leurs données sont utilisées à mauvais escient ou s'ils ne sont plus à l'aise pour donner accès aux données.
Depuis votre tableau de bord, accédez aux paramètres de connexion Facebook et vous trouverez des espaces pour saisir un rappel de demande de suppression de données.
Personnalisez votre bouton de connexion Facebook
La boîte de dialogue de connexion est un processus rapide pour personnaliser votre bouton de connexion si vous ne l'avez pas déjà fait. Vous pouvez choisir la taille, la forme et le libellé de l'invite de connexion Facebook afin qu'elle corresponde à votre site Web.
Gérer les paramètres du jeton d'accès
Les jetons d'accès sont connectés aux utilisateurs lorsqu'ils se connectent et identifient ces utilisateurs dans votre système. Vous pouvez personnaliser des paramètres spécifiques pour modifier la façon dont les jetons d'accès sont gérés et déplacés.
Demander des autorisations supplémentaires aux visiteurs du site Web
Les autorisations sont une liste de données que vous collecterez auprès des utilisateurs qui se connectent via Facebook. Les autorisations par défaut incluent uniquement l'adresse e-mail et le profil public du visiteur. Toutes les autres données vous sont toujours cachées. Si vous souhaitez accéder à d'autres données de leur profil, vous devez d'abord soumettre votre application à Facebook pour examen.
Une fois approuvé, vous pouvez choisir parmi plus de 50 types d’autorisations différents. Chacun est répertorié comme une option que les visiteurs peuvent autoriser ou refuser. Même s’ils refusent des autorisations spécifiques, ils peuvent toujours se connecter via leur compte.
Ajoutez le code pour chaque autorisation sur votre site Web en suivant les guides fournis. Ensuite, lorsque les visiteurs se connectent et acceptent ou refusent les autorisations, vous verrez leur réponse reflétée dans le code de l'application.
Afficher les demandes d'examen d'application
L'examen des applications est un processus de vérification de votre application avant que vous puissiez accéder aux informations des utilisateurs. Vous pouvez trouver les demandes d’examen des applications sur le côté gauche de votre écran d’accueil. À partir de là, faites défiler la liste des options et cliquez sur Demander les autorisations que vous souhaitez ajouter.
Vous devrez remplir un formulaire qui confirme que votre bouton de connexion Facebook est actif et peut être testé. Décrivez également comment les gens utilisent votre site et comment vous utiliserez l'autorisation demandée.
Le processus d'examen prend environ 5 jours. À la fin de cette période, vous serez informé si votre demande est approuvée ou non. Si vous n'êtes pas approuvé, les développeurs vous diront pourquoi. Utilisez ces raisons pour améliorer votre site Web et votre application afin de les rendre plus sécurisés.
Conclusion
Il est révolu le temps où il fallait deviner ce que veulent vos visiteurs. Vous n’avez plus besoin de gaspiller des ressources précieuses en éliminant les connexions en double.
Utilisez plutôt Facebook Login pour rationaliser le processus de connexion de vos visiteurs et collecter des données démographiques précieuses. Le retour sur investissement que vous recevrez de l'augmentation du trafic vaut bien le temps nécessaire à la création de votre application de connexion Facebook.
Ajouter une connexion Facebook aux applications natives
Vous pouvez ajouter des fonctionnalités à votre application native pour permettre à vos utilisateurs de s'authentifier en utilisant Facebook de manière native, au sein de l'application. Cela ne nécessite pas de redirection via un navigateur Web et permettra aux applications mobiles de se conformer à la politique des développeurs de Facebook, qui exige que les applications mobiles utilisent le SDK Facebook pour Android ou iOS pour s'authentifier.
Comment ça fonctionne
Le flux de connexion natif à Facebook fonctionne comme suit :
Étape 1 : L'application authentifie un utilisateur via le SDK Facebook et acquiert un jeton d'accès.
Étape 2 : L'application utilise ce jeton d'accès pour demander un jeton d'accès spécial aux informations de session Facebook.
Étape 3 : Utilisez le SDK Facebook pour récupérer le profil des utilisateurs.
Étape 4 : L'application peut ensuite utiliser le jeton Facebook Session Info pour s'authentifier auprès de Auth0.
Conditions préalables
Avant de configurer la connexion native à Facebook pour votre application native via Auth0, vous devez :
Configurer Facebook comme connexion Auth0
Utilisez le SDK Facebook approprié dans votre application
Accédez à Auth0 Dashboard > Applications > Applications et créez une application avec Auth0 (si vous ne l'avez pas déjà fait).
Au bas de la page des paramètres, sélectionnez Afficher les paramètres avancés, puis la vue Paramètres du périphérique. Sous Connexion sociale native, activez le bouton Activer la connexion avec Facebook.
Mise en œuvre
Le processus d'authentification d'un profil utilisateur à l'aide de la connexion native à Facebook se déroule en quatre étapes, du point de vue de votre application :
Étape 2
L'application utilise le jeton d'accès pour demander un jeton d'accès aux informations de session Facebook.
Cette demande ressemblera à ce qui suit :
OBTENIR https://graph.facebook.com/v5.0/oauth/access_token?grant_type=fb_attenuate_token&client_id=457704041391802&fb_exchange_t
et la réponse :
{
"access_token": "XAAGgR4b...1lHWNCpqrAhcpoAZDZD",
"token_type": "porteur",
"expires_in": 5183924
}
Est-ce que cela a été utile?
Étape 3
L'application doit récupérer le profil utilisateur de Facebook à l'aide du SDK Facebook, ce qui se terminera par une requête similaire à la suivante :
OBTENIR https://graph.facebook.com/v5.0/<identifiant d'utilisateur Facebook>?access_token=<jeton d'accès Facebook>&fields=email,name
Étape 4
L'application peut ensuite utiliser le jeton d'accès aux informations de session et le profil utilisateur Facebook pour s'authentifier auprès d'Auth0 en appelant le point de terminaison /oauth/token d'Auth0 à l'aide du flux Token Exchange avec le type de jeton facebook-session-access-token. Si tout se passe bien, Auth0 renverra une réponse normale de l'échange, avec l'ajout du profil utilisateur. Le profil utilisateur doit être un objet JSON, codé sous forme de chaîne.
POST https://{votredomaine}/oauth/token
grant_type : 'urn:ietf:params:oauth:grant-type:token-exchange'
subject_token_type : 'http://auth0.com/oauth/token-type/facebook-info-session-access-token'
public : 'votre-api'
scope : "lire : rendez-vous profil openid email email_verified"
subject_token : 'XAAGgR4b...1lHWNCpqrUHZAEtUuZAhcpoAZDZD'
client_id : '{votreIDClient}'
profil_utilisateur : '{"email": "[email protected]", "name": "John Doe"}'
{
"access_token": "eyJ0eXA..yXQaPLVXg",
"id_token": "eyJ0.tFE5HPipdOsA",
"scope": "lecture de l'e-mail du profil openid : rendez-vous",
"expires_in": 86400,
"token_type": "Porteur"
}
Profil utilisateur et validation par e-mail
Dans l'exemple précédent, vous deviez récupérer le profil utilisateur de Facebook et l'inclure dans l'appel à /oauth/token. En effet, le jeton d'accès à la session Facebook ne peut pas être utilisé pour récupérer directement le profil et le jeton d'accès Facebook ne peut pas être envoyé directement au serveur, en raison des directives d'examen de l'AppStore d'Apple. Il doit donc être récupéré dans le client et envoyé à Auth0 de cette manière.
Étant donné qu'Auth0 ne peut pas garantir que le profil utilisateur est le même que celui renvoyé par Facebook, il définira le champ email_verified sur false.
Se déconnecter
Étant donné que l’implémentation de connexion native n’utilise pas les flux standard basés sur un navigateur, les propriétaires d’applications doivent également veiller à effectuer la déconnexion de manière appropriée. Lorsqu'une application doit effectuer une déconnexion, elle doit également révoquer le jeton d'actualisation Auth0.
La connexion avec Facebook résout théoriquement de nombreux problèmes pour les développeurs d'applications. Mais la meilleure façon de procéder n’est pas très claire, et de nombreux exemples sur le Web préconisent une mauvaise stratégie.
Voici ce que nous avons appris en intégrant Login avec Facebook dans Cluster.
Utilisez vos propres jetons de session à longue durée de vie
Les sessions Facebook sont constamment invalidées. Le SDK Facebook peut fournir à votre application un jeton de session non valide en raison de données mises en cache au niveau du SDK ou du système ; les jetons d'authentification expirent en raison du comportement de l'utilisateur, comme la réinitialisation des mots de passe ou l'invalidation manuelle des applications dans les paramètres de l'utilisateur.
Ainsi, après l’inscription, votre application ne doit pas supposer que vous pourrez un jour obtenir un autre jeton valide du SDK Facebook. Dans certains cas, si vous souhaitez maintenir la session active, vous devrez peut-être inviter l'utilisateur à s'authentifier à nouveau auprès de Facebook.
Pour éviter une erreur critique que j’ai commise, voici la chose la plus importante : ne bloquez jamais le démarrage de votre application sur une authentification tierce.
Au lieu de cela, vous devez implémenter votre propre stratégie de jetons de session, et elle devrait probablement ressembler à OAuth2. Plutôt que de prolonger les sessions en transmettant les informations d'identification d'origine au backend, vous devez demander à votre backend un nouveau jeton à l'aide d'un jeton d'actualisation distinct.
Par conséquent, les flux d’authentification avec Facebook, Google, et autres devraient ressembler à ceci :
L'utilisateur clique sur « Connexion avec Facebook »
Le SDK Facebook parle au backend de Facebook pour obtenir un jeton
Votre client donne le jeton à votre backend
Votre backend valide le jeton par rapport aux serveurs de Facebook
Votre backend émet un nouveau jeton d'authentification ou de session
Votre client enregistre le jeton d'authentification de votre backend : vous êtes désormais connecté et pouvez parler à vos propres serveurs pour toujours, ou du moins d'une manière que vous comprenez.
Nous pourrons ensuite discuter de la manière de maintenir la session Facebook active chez le client le plus longtemps possible.
Persistance de la « connectivité » de Facebook entre les connexions et les appareils
Une fois qu'un utilisateur s'est connecté avec Facebook, il peut se connecter avec un autre service sous la même adresse e-mail. Ou un autre utilisateur pourrait « connecter » son compte à Facebook plus tard, ce qui devrait associer sa session Facebook à son compte utilisateur dans le backend.
Mais lorsque ces personnes se connectent sur un autre appareil, ou s'ils se déconnectent et se reconnectent (sans appuyer sur « Se connecter avec Facebook »), le SDK Facebook du client peut ne plus connaître leurs sessions Facebook.
De plus, la seule façon de maintenir les sessions en vie est de les actualiser dans le client ; il n'y a aucune possibilité de faire cela sur le serveur.
Ainsi, pour reconnecter la session, lorsqu'un utilisateur qui s'est connecté avec Facebook (ou a connecté son compte Facebook) se reconnecte, votre application doit procéder comme suit :
Chargez tous les jetons de connexion tiers récents à partir de votre backend
Recréez les sessions de connexion Facebook/Google et émettez une demande
Vérifiez le jeton d'authentification. S'il a changé, enregistrez le nouveau jeton sur votre backend pour maintenir la session en vie.
Vous pouvez reproduire ce comportement sur Android et sur le Web afin que lorsqu'un utilisateur se connecte à un autre client, vous puissiez le garder connecté en silence.
Code pour regonfler les sessions Facebook sur iOS
De nombreux Bothans sont morts pour nous apporter cette information. Il est très difficile de trouver de la documentation à ce sujet.
Voici donc un bref extrait de code de notre client iOS qui montre comment cela se fait.
