Facebook Login

how to add facebook login to your ionic app introduction this section explains how you can create an app with user registration using facebook login and parse server core features through back4app after following this tutorial, you will be able to do this at any time, you can access the complete ionic project built with this tutorial at our github repository to complete this quickstart, you need visual studio code (or any web ide you like) ionic framework an app created at back4app follow the new parse app tutorial to learn how to create a parse app at back4app a facebook account for creating the app 1 facebook set up to start using facebook functions, you need to go to the facebook developer website and create an account and log in go to my apps and click on add a new app add a new app at the left panel, click on settings settings > basic basic in this page take note of your app id app id add a privacy police url privacy police url select a category category scroll down and hit save changes save changes 4\ at the top of the same page, click on the off off button and confirm to make your app live 5\ scroll down at the same page and click on add platform add platform for this tutorial, let’s choose android add your google play package name google play package name which in our case is com back4app myapp add the key hashes key hashes of your machine (run 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 to find out yours) save changes save changes 6\ at the left panel, to back to dashboard dashboard , scroll down and click on facebook login facebook login 2 link your facebook app with back4app go to your app dashboard at back4app website and click on server settings server settings find the “facebook login” block and click on settings settings the “facebook login” block looks like this 3\ add the facebook app id app id taken note in the previous step 3 set up in this tutorial, we will be starting from where we left off in the previous user registration with email verification https //www back4app com/docs/ionic/user registration email verification one 4 facebook login let’s first install facebook cordova plugins now, let’s implement the facebooklogin() facebooklogin() method 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 } finally, let’s add a button to our login login page and make it call the method we just created login html 1 2 3 log in with facebook 4 5 5 test your app since facebook log in does’t work on a browser, test your app by running ionic cordova run android ionic cordova run android login at back4app website https //www back4app com/ find your app and click on dashboard dashboard > core core > browser browser > user user to see the user that you’ve created! it’s done! at this stage, you can log in, register and log out of your app with facebook using parse server core features through back4app!