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 https //www back4app com/product/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 https //github com/back4app/ionic email verification pour compléter ce démarrage rapide, vous avez besoin de visual studio code https //code visualstudio com/download (ou tout ide web que vous aimez) ionic framework https //ionicframework com/getting started/ une application créée sur back4app suivez le tutoriel de nouvelle application parse https //www back4app com/docs/get started/new parse app pour apprendre à créer une application parse sur back4app un compte facebook https //www facebook com/login/?next=https%3a%2f%2fdevelopers facebook com%2f 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 https //developers facebook com/ et créez un compte et connectez vous allez sur mes applications https //www facebook com/login php?next=https%3a%2f%2fdevelopers facebook com%2fapps%2f et cliquez sur \ajouter une nouvelle application\ dans le panneau de gauche, cliquez sur \paramètres\ > \général\ sur cette page prenez note de votre \id d'application\ ajoutez une \url de politique de confidentialité\ sélectionnez une \catégorie\ faites défiler vers le bas et cliquez sur \enregistrer les modifications\ 4\ en haut de la même page, cliquez sur le \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\ pour ce tutoriel, choisissons android ajoutez votre \nom de package google play\ qui dans notre cas est com back4app myapp ajoutez les \key hashes\ de votre machine (exécutez \keytool exportcert alias androiddebugkey keystore / android/debug keystore | openssl sha1 binary | openssl base64\ pour découvrir les vôtres) \enregistrer les modifications\ 6\ dans le panneau de gauche, revenez à \tableau de bord\ , faites défiler vers le bas et cliquez sur \connexion facebook\ 2 liez votre application facebook avec back4app allez sur le tableau de bord de votre application à site web de back4app https //www back4app com/ et cliquez sur \paramètres du serveur\ trouvez le bloc “connexion facebook” et cliquez sur \paramètres\ le bloc “connexion facebook” ressemble à ceci 3\ ajoutez l' \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 $ ionic cordova plugin add cordova plugin facebook4 variable app id="xxxxxxxx" variable app name="xxxxxxxx" $ npm install save @ionic native/facebook maintenant, implémentons le \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\ 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\ connectez vous à back4app website https //www back4app com/ trouvez votre application et cliquez sur \tableau de bord\ > \noyau\ > \navigateur\ > \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!