Intégrer le login Facebook dans une app JavaScript avec SDK Parse

ajouter la connexion facebook à votre application javascript introduction cette section vous guide sur la façon d'utiliser l'api facebook pour javascript dans un http //parseplatform org/ environnement via back4app dans ce tutoriel, vous apprendrez à lier le sdk facebook à votre tableau de bord parse et comment implémenter les fonctions de connexion connexion , inscription inscription , déconnexion déconnexion , lien lien et délier délier fonctions en suivant les étapes mentionnées ci dessous, vous serez capable de construire un système comme celui ci http //js fb login back4app io/ à tout moment, vous pouvez accéder au projet android complet construit avec ce tutoriel sur notre https //github com/back4app/javascript facebook login prérequis pour compléter ce tutoriel, vous aurez besoin de application javascript de base connectée à back4app remarque vous pouvez utiliser l'application créée dans notre https //www back4app com/docs/javascript/parse javascript sdk ou toute application connectée à back4app un domaine pour votre application remarque il est nécessaire d'avoir un domaine pour commencer à utiliser l'api de connexion facebook pour en savoir plus sur l'hébergement web, jetez un œil à https //help back4app com/hc/en us/articles/360002120991 how can i use back4app webhosting un serveur parse à la version 2 6 5 ou supérieure remarque le sdk facebook de parse ne fonctionne que sur les versions de serveur parse supérieures à 2 6 5, que ce tutoriel utilisera donc, si vous utilisez une version inférieure de parse, envisagez de la mettre à niveau 1 configuration de facebook pour commencer à utiliser le sdk facebook pour javascript, vous devez suivre ces étapes allez sur le https //developers facebook com/ , créez un compte et une application configurez votre application facebook activez la connexion facebook en cliquant sur connexion facebook > démarrage rapide, qui se trouve dans le menu de gauche, puis suivez la https //developers facebook com/docs/facebook login/web pour effectuer l'activation pour lier back4app avec votre application facebook, connectez vous à votre https //www back4app com/ compte, cliquez sur paramètres du serveur paramètres du serveur de votre application et cliquez sur paramètres paramètres du bloc ''connexion facebook'' cela devrait ressembler à ceci 5\ ensuite, ajoutez votre id d'application facebook, qui peut être trouvé sur le https //www facebook com/login php?next=https%3a%2f%2fdevelopers facebook com%2fapps de votre application facebook 6\ suivez https //developers facebook com/docs/javascript/quickstart/ pour charger le sdk javascript de facebook dans votre application 7\ remplacez votre appel à fb init() fb init() par un appel à parse facebookutils init() parse facebookutils init() par exemple, si vous chargez le sdk javascript de facebook de manière asynchrone, votre fbasyncinit fbasyncinit fonction ressemblera à ceci init js 1 // initialize parse 2 parse initialize("your parse app id here", "your javascript key here"); // don't forget to change these keys 3 parse serverurl = "https //parseapi back4app com/"; 4 5 // load the facebook api asynchronous when the window starts loading 6 window\ fbasyncinit = function() { 7 parse facebookutils init({ // this line replaces fb init({ 8 appid '{facebook app id}', // facebook app id 9 cookie true, // enable cookies to allow parse to access the session 10 xfbml true, // initialize facebook social plugins on the page 11 version 'v2 3' // point to the latest facebook graph api version, found in fb's app dashboard 12 }); 13 14 // put here code to run after the facebook sdk is loaded 15 }; 16 17 // include the facebook sdk 18 (function(d, s, id){ 19 var js, fjs = d getelementsbytagname(s)\[0]; 20 if (d getelementbyid(id)) {return;} 21 js = d createelement(s); js id = id; 22 js src = "//connect facebook net/en us/sdk js"; 23 fjs parentnode insertbefore(js, fjs); 24 }(document, 'script', 'facebook jssdk')); 2 se connecter commencez par créer une fonction de connexion avec facebook qui enregistre l'utilisateur dans la base de données parse malheureusement, il n'est pas possible d'utiliser le bouton de connexion fourni par facebook, car se connecter avec celui ci ne sauvegarderait pas le nouvel utilisateur dans le tableau de bord parse tableau de bord parse cependant, lorsque vous utilisez le http //docs parseplatform org/js/guide/#facebook users , cela résout le problème côté serveur pour un design facile du bouton de connexion facebook, utilisant html et css, regardez cette implémentation https //codepen io/davidelrizzo/pen/veyvyv pour commencer l'implémentation de la connexion, assignez un onclick onclick événement qui appelle la fonction login suivante à votre bouton de connexion connexion facebook pour construire cette fonction, suivez les étapes mentionnées ci dessous utilisez le parse facebookutils login parse facebookutils login pour effectuer la connexion facebook avec parse, cette fonction reçoit les autorisations de facebook en tant qu'arguments dans cet exemple, ces autorisations correspondent au profil public et à l'email remarque voir https //developers facebook com/docs/permissions pour plus de détails 2\ vérifiez si l'utilisateur est déjà dans la base de données s'il l'est, redirigez le simplement vers une autre page 3\ faites un appel à fb api fb api pour obtenir des informations sur le nouvel utilisateur dans cet exemple, il est possible d'accéder à l'id, au nom, à l'email et aux autorisations des utilisateurs remarque pour en savoir plus sur cette fonction, cliquez https //developers facebook com/docs/javascript/reference/fb api 4\ définissez les propriétés, le nom d'utilisateur et l'email de l'utilisateur et enregistrez le dans la base de données 5\ redirigez la page le login() code est le suivant login js 1 function login() { 2 parse facebookutils login("public profile,email", { 3 success function(user) { 4 if (!user existed()) { 5 fb api('/me?fields=id,name,email,permissions', function (response) { 6 user set('username', response name); 7 user set('email', response email); 8 9 user save(null, { 10 success function(user) { 11 alert('user logged in and sign up through facebook, with username ' + user get('username') + ' and email ' + user get('email')); 12 13 // you should redirect the user to another page after a successful login 14 window\ location replace('http //js fb login back4app io/logout html'); 15 }, 16 error function(user, error) { 17 alert('failed to save user to database with error ' + error message); 18 } 19 }); 20 }); 21 } else { 22 alert("user logged in through facebook!"); 23 // you should redirect the user to another page after a successful login 24 window\ location replace('http //js fb login back4app io/logout html'); 25 } 26 }, 27 error function(user, error) { 28 console log("user cancelled the facebook login or did not fully authorize "); 29 } 30 }); 31 } 3 se déconnecter la fonction de déconnexion est beaucoup plus simple que celle de connexion cette fois, vous pourrez utiliser le bouton fourni par facebook cependant, il ne sera utilisé que pour des fins de déconnexion, car il est nécessaire d'utiliser la fonction de parse pour se connecter ainsi, vous ne devriez utiliser ce bouton que lorsque l'utilisateur est déjà connecté à facebook et souhaite se déconnecter pour voir la référence officielle de facebook au bouton facebook, cliquez https //developers facebook com/docs/facebook login/web/login button voici comment vous pouvez implémenter ce bouton en utilisant le sdk facebook logout html 1 remarque cet élément a un rappel onlogin onlogin , qui appelle notre fonction logoutwithfacebook logoutwithfacebook lorsque l'utilisateur se déconnecte oui, c'est exact l'événement onlogin onlogin est déclenché lors de la déconnexion la logoutwithfacebook logoutwithfacebook fonction déconnectera simplement l'utilisateur de sa session parse actuelle et le redirigera vers une autre page, comme indiqué ci dessous logout js 1 function logoutwithfacebook() { // the callback function 2 parse user logout(); // delete the current session for the user 3 alert('user logged out of facebook!'); 4 window\ location replace('http //js fb login back4app io'); // redirects the user to another webpage 5 } 4 lier et délier les dernières fonctionnalités disponibles pour parse facebook sont lier lier et délier délier fonctions alors que lier est l'acte d'associer un parse user parse user existant à son compte facebook et délier fait référence à la suppression de cette association cette association peut être vue dans votre tableau de bord parse tableau de bord parse , dans la authdata authdata colonne, juste ici vous pouvez utiliser les données dans la colonne pour valider vos lier lier et délier délier fonctions étape 4 1 lien la fonction de lien fonction de lien vérifie si l'utilisateur actuel est lié avant d'essayer de le lier à nouveau c'est assez simple et utilise le parse facebookutils parse facebookutils sdk, comme montré ci dessous link js 1 function link() { 2 var user = parse user current(); 3 if (!parse facebookutils islinked(user)) { 4 parse facebookutils link(user, null, { 5 success function(user) { 6 alert("woohoo, user logged in with facebook!"); 7 }, 8 error function(user, error) { 9 alert("user cancelled the facebook login or did not fully authorize "); 10 } 11 }); 12 } 13 else { 14 alert("can't link user to facebook because he is already linked"); 15 } 16 } étape 4 2 délier pour la fonction de déliage fonction de déliage , il suffit d'appeler parse facebookutils unlink parse facebookutils unlink sur l'utilisateur actuel de parse, comme vous pouvez le voir unlink js 1 function unlink() { 2 var user = parse user current(); 3 parse facebookutils unlink(user, { 4 success function(user) { 5 alert("the user is no longer associated with their facebook account "); 6 } 7 }); 8 } allez à la authdata authdata colonne dans votre parse dashboard parse dashboard pour confirmer qu'elle est vide après l'appel de fonction c'est fait! à ce stade, vous avez appris non seulement à configurer et à utiliser le login login et logout logout fonctions avec votre application, mais aussi à les utiliser avec back4app et parse vous maîtrisez maintenant l'utilisation du parse facebook sdk parse facebook sdk et pouvez commencer à l'utiliser à votre guise voir plus sur parse sdk à j https //parseplatform org/parse sdk js/api/4 3 1/ et https //docs parseplatform org/js/guide/#facebook users