JS Framework
Ionic
Ajoutez la Connexion Facebook sur App Android avec Ionic
11 min
comment ajouter la connexion facebook à votre application ionic introduction cette section explique comment vous pouvez créer une application avec enregistrement utilisateur en utilisant la connexion facebook et les fonctionnalités principales de parse server via back4app après avoir suivi ce tutoriel, vous serez en mesure de faire cela à tout moment, vous pouvez accéder au projet ionic complet construit avec ce tutoriel sur notre dépôt github pour compléter ce démarrage rapide, vous avez besoin de visual studio code (ou tout ide web que vous aimez) ionic framework une application créée sur back4app suivez le tutoriel de nouvelle application parse pour apprendre à créer une application parse sur back4app un compte facebook pour créer l'application 1 configuration de facebook pour commencer à utiliser les fonctions facebook, vous devez allez sur le site des développeurs facebook et créez un compte et connectez vous allez sur mes applications et cliquez sur ajouter une nouvelle application ajouter une nouvelle application dans le panneau de gauche, cliquez sur paramètres paramètres > général général sur cette page prenez note de votre id d'application id d'application ajoutez une url de politique de confidentialité url de politique de confidentialité sélectionnez une catégorie catégorie faites défiler vers le bas et cliquez sur enregistrer les modifications enregistrer les modifications 4\ en haut de la même page, cliquez sur le désactivé désactivé bouton et confirmez pour rendre votre application active 5\ faites défiler vers le bas sur la même page et cliquez sur ajouter une plateforme ajouter une plateforme pour ce tutoriel, choisissons android ajoutez votre nom de package google play nom de package google play qui dans notre cas est com back4app myapp ajoutez les key hashes key hashes de votre machine (exécutez keytool exportcert alias androiddebugkey keystore / android/debug keystore | openssl sha1 binary | openssl base64 keytool exportcert alias androiddebugkey keystore / android/debug keystore | openssl sha1 binary | openssl base64 pour découvrir les vôtres) enregistrer les modifications enregistrer les modifications 6\ dans le panneau de gauche, revenez à tableau de bord tableau de bord , faites défiler vers le bas et cliquez sur connexion facebook connexion facebook 2 liez votre application facebook avec back4app allez sur le tableau de bord de votre application à site web de back4app et cliquez sur paramètres du serveur paramètres du serveur trouvez le bloc “connexion facebook” et cliquez sur paramètres paramètres le bloc “connexion facebook” ressemble à ceci 3\ ajoutez l' id de l'application id de l'application noté à l'étape précédente 3 configurer dans ce tutoriel, nous allons commencer là où nous nous sommes arrêtés dans le précédent enregistrement des utilisateurs avec vérification par e mail https //www back4app com/docs/ionic/user registration email verification 4 connexion facebook commençons par installer les plugins cordova de facebook maintenant, implémentons le facebooklogin() facebooklogin() méthode login ts 1 async facebooklogin() { 2 try { 3 // log in to facebook and request user data 4 let facebookresponse = await this facebook login(\['public profile', 'email']); 5 let facebookauthdata = { 6 id facebookresponse authresponse userid, 7 access token facebookresponse authresponse accesstoken, 8 }; 9 10 // request the user from parse 11 let tolinkuser = new parse user(); 12 let user = await tolinkuser linkwith('facebook', {authdata facebookauthdata}); 13 14 // if user did not exist, updates its data 15 if (!user existed()) { 16 let userdata = await this facebook api('me?fields=id,name,email,first name,picture width(720) height(720) as(picture)', \[]); 17 user set('username', userdata name); 18 user set('name', userdata name); 19 user set('email', userdata email); 20 await user save(); 21 } 22 23 this navctrl setroot('homepage'); 24 } catch (err) { 25 console log('error logging in', err); 26 27 this toastctrl create({ 28 message err message, 29 duration 2000 30 }) present(); 31 } 32 } enfin, ajoutons un bouton à notre connexion connexion page et faisons en sorte qu'il appelle la méthode que nous venons de créer login html 1 2 3 log in with facebook 4 5 5 testez votre application puisque la connexion facebook ne fonctionne pas sur un navigateur, testez votre application en exécutant ionic cordova run android ionic cordova run android connectez vous à back4app website https //www back4app com/ trouvez votre application et cliquez sur tableau de bord tableau de bord > noyau noyau > navigateur navigateur > utilisateur utilisateur pour voir l'utilisateur que vous avez créé! c'est fait! à ce stade, vous pouvez vous connecter, vous inscrire et vous déconnecter de votre application avec facebook en utilisant les fonctionnalités de base de parse server via back4app!