How to Add Ionic Facebook Login with Capacitor

[Music] hey everyone what's up this is simon back with a new video and today we will focus on using facebook login within your ionic application with capacitor so in the past we had the google sign in and we also had apple sign in and today we will do it with facebook now to get started simply create a new application or use your existing ionic capacitor application if you're starting a new application i also recommend you directly pass the package id that you want to use so that's the id uh usually called the bundle id with ios or the google play package id something like this um for your application you can also do it later in your existing application as well um and the most important part is installing the capacitor community facebook login plugin which will be used for both uh the web login so we can do this within our web application as well and also for the native platforms once you've done this i recommend you run one ionic build so you can add the native platforms for ios and android and then we can dive into the code quick addition if you're using an existing application uh simply make sure that inside your capacitor config you got the right app id if you've already generated your native platforms uh and used the standard io ionic whatever id i would actually remove the native platforms as well for ios it's not too complicated for android i had some problems in the past updating this and we really need this string later inside our application as a quick addition for the setup we also need the hdp client within our app module so import it and add it to the array of imports because after we've logged in with facebook we will for testing make a little request to the graph api so that's where we're going to use our http client but once we're at this point we can actually leave our application and move into developersfacebook.com i've already created an application in here you can simply go ahead click create app and select build connected experiences i'm actually not sure if there's a difference between these um i just used the third one since it looked like that would be the right thing and then give it a name and that's basically all now what we need to do is within facebook or within our facebook application we need to add the native platforms for ios and android that's basically the same like we did in the past uh or you might have done for firebase where you also add your apps it always sounds kind of strange but it's actually quite easy um somehow i can also change my language to local us or something like this so you don't get my german yet now we got settings basic and there we right now i'm back to german whatever i can i'm sure you will find that menu so what we need to do here is add platforms we need to add the ios and the android platform i already selected them um they will basically just bring up a card like this for ios and for android now for ios the only thing you need to fill in is your bundle id which is the one we used with the cli or which is within your capacitor config right here so put that bundle id into that and then you're fine for android same thing first of all at your bundle id which is now the google play package name and then we got a field key hashes that's a bit more complicated so when you build your application um it will be automatically signed so if you run the standard capacitor development build it will use your android debug key which is usually located at a dot android debug key store so that's my keystore file and the standard password for that should be android um it might be different in your situation if you are used another development key or create your own keystore file with your password but the thing we need to run now is this let me quickly add the password there we go so ketol export certificate the alias is usually android debug key um again it might be different um if you have problems opening your default key just generate a new keystore file and use it for signing um that should be fine as well the path to the keystore file and then running open ssl uh whatever base64 so we get a hash um this might be different for windows that's actually the mac command uh within the tutorial link below this video i will also post the code for windows or how to find the according command and then you should get this little string and i guess yeah that's already added to my key hashes and simply copy yours put it into this um just a quick reminder once you build a production build and release it to the android play store you might have a different keystore file with a different key hash so that should also go into this field so you can have multiple key hashes in here as far as i know that's everything for now um the only thing that we will need in the future from our app id is um is the app id from our facebook application so i will move this to the site and we can continue because for our uh where's my terminal uh for our application we now need a few changes for the native platforms to make the capacitor plug-in work first one is within our app delegate swift you can use this with xcode or you can use it right within your ide it doesn't really matter first of all we add two imports for facebook core and another facebook kit and then you need to change two functionalities um the first one is did finish launching with options uh within here we need to call the facebook kit once again if you're lazy typing this just check out the code below the video um all the other functionalities stay like they are and then we get to this one uh where it can handle a url and in here uh we add a little another snippet to call our facebook kit to open the facebook application so our native or our ios application can open the native facebook dialogue you can log in and then you will be brought back to our own application everything else stays the same as far as i know um and then you can close it and move into another file that's called info plus it's actually right next to the app delegate um again you can open it in xcode you can open it with your own ide and what you need to do is you need to first of all override the cf bundle url types which contains a default entry by capacitor as far as i know and in here you see a little id and guess what guess what um that's our uh facebook app id that's actually not really the facebook app id uh let me quickly check this what's this idea um that's actually actually ah okay sorry about that the facebook app id from our app follows in here so you can compare this 687 to my app id 687 um that's also part of the snippet that you need to add but this is the bundle url scheme for the facebook application so this is a fixed key that just is there and also this whole block basically goes into your info p list uh so overwrite the final url types and then uh at all the other stuff until you get to cf bundle version um that already exists in there okay that's actually the setup for ios um pretty easy so far for android it's a tiny bit more complicated i'd say so first of all we open the main activity which is usually inside android app source main java your package and then main activity and within the init we add our plugin that's a standard procedure as always for capacitor plugins on android now we need to take two more steps for this plugin to make it work the first is opening the android manifest xml which is in source main resources android manifest xml and it's a bit uh tricky to find the right key so under manifest application that's where we can put in our snippet i'm actually not sure where i pasted it so there's an activity block there's a provider blog and here is what i pasted into so this whole thing from metadata about the facebook application id the activity and this one goes into our android manifest xml um from what i know in here there's actually nothing to change that's just for the communication between your application and the native facebook application but of course we need a place where we add our facebook id and that's within the strings file which is in appsource main resources values strings um there you should already find a few other strings about your app name and your custom url scheme and now the two elements are new and once again compare them to my app id that's exactly the facebook app id that goes into here actually not sure why the protocol scheme is also this but it worked for me so um yeah kinda strange if you encounter problems perhaps check this out once again i will also look it up but as far as i know these should be the same values now we've configured this for ios and for android and we can also use this on the web for the web we can actually use the standard implementation of the facebook plugin and therefore we can open our index html of our ionic application and after the body take we add this little script block to init the facebook sdk this will load the sdk um that's a standard block and then we got the init command in which we also need our facebook ids let me quickly bring in my very own and then we're fine to use this on the web as well so we've implemented all the stuff um but we actually haven't implemented the real facebook login um there's now a little problem because the web implementation of this plugin is different than the native implementation so usually we would just use the plugins object from capacitor core and then the structure it to use the facebook login but that doesn't quite work correctly so instead we will import the facebook login plugin which is actually the interface for our plugin and have a little variable in here that will help us to create a function let's call this essence setup facebook login so all of this is really just required if you want to run it on the web if you don't care about the web and just need the native ios and android application actually you could do this a bit easier but i just felt like um we should cover it so within this constructor let's call set up facebook login and what we're gonna do in here is use the is platform from can we use this from ionic angler yeah that should be fine and we will set the facebook login to facebook login where do we import this from well of course from the package facebook login that was just the interface we could actually do this in one line so let's remove this so for desktop for the webworld it will use the web implementation for native we will now destructure the plugins object and use the facebook login instead and then you should just make sure that you only call uh all the facebook stuff through this and not like described usually you would use facebook login dot whatever but that's not going to work in our case but we still have the typing because we added the interface here to our variable to make it work finally on the web we also need to call register web plugin which you can also import from capacitor core and pass in our facebook login it's really a bit um well complicated i'd say to make this work on the web as well and confusing but this procedure now worked for me for both the web version and the desktop are the mobile native application so now we can finally move into the login um i will bring in the code once again you can find it in the tutorial this part isn't actually too hard anymore because now we can just use our facebook login uh which comes with just a few functions so get current access token login and log out and of course first one is calling lockout pass in the permissions that you want from the users i just used email and birthday just as a quick example and now we encounter another problem because the result let's lock this out the result on the web only contains an access token if we want to make a call to the graph api we usually also need our user id on ios and android it's actually already in that response i'm not sure why it's not in the web button um perhaps the plugin will change in the future so if the result contains an access token and the access token also has the user id we can store the token and call a function to load the user data and if the result contains an access token but no user id we need to take one more step which is calling the or getting the current token once again just using the standard function from our facebook login plugin and then us oops setting this as our token because this result actually contains the user id it's kind of strange really um finally we got this one function to load the user data which will now use our token uh also log out pretty standard just using a function so to make this a bit more visible i'll just do it in two lines uh construct the url to the grace facebook graph api uh in fact i really recommend if you want to retrieve any data check out the graph api explorer which makes it really easy to add fields and test different settings uh on the facebook graph api really a huge recommendation pretty cool tool so i make a request to uh the current user user id the fields id name picture actually interesting syntax here but it just works birthday email and then adding the access token which we have stored as well and then you can make a simple get request no other header required uh we need to inject this private http http client uh yeah that should work fine and i will now already uh bring up some kind of live reload perhaps for ios in the background because we're close to the end of the code already um so we got the login which will log in the user we will store the token or retrieve more information if we're on the web this will give us more information this will load some other information from the api um i will also put a lock in here user user so we really see what's going on and oh well we might need a little html rep representation um well that's kind of easy because we just need a little button for the login and a little card if we have a user object to display like the name the birthday the email and perhaps a lockout and also the picture of the user so now perhaps we got a web preview somewhere where's my web preview actually you usually log out uh where you're running you're running on localhost is that right maybe maybe not we will find out so let's give it a try let's hit the login uh we see a few errors in the background but as long as all my data comes in i'm actually quite fine um can no longer call from http pages yeah um i guess in production this will result in a real error for testing it kind of works that's actually quite nice by the facebook sdk of course localhost has no https but if you plan to host your ionic application somewhere always use ssl certificates so then this error would be gone uh since you're using https now um as we can see from the login our response we actually see the user id but that's inside the plugin itself i don't know why it's not returning all of this data perhaps it will in a future version but right now the result let's show you the problem um so where's my login function here's the login and here we lock out the result and the result that we get only has this big token and no other information so no user id only if we make the call to get the current uh token we get back uh let's quickly also lock this current token result only in that case on the web we get the real information which is really i i don't know why uh in the background let me quickly already uh deploy this to my not connected device um well you aren't connected my friend well i will connect this in the background there we go simon done great run on simon that should be fine now let's do the login again because i logged in before it's quite fast otherwise it will just open the facebook dialog and now we see the user the current token there we go that was what i wanted to show now this not only contains the token but also the user id the rest is still pretty empty and for the call to the graph api we also get all the relevant data that we wanted to include we have a bigger picture we got my name email birthday so everything included that's fine let's quickly also take a look at this on our device now alright here's the app let's try the login wants to use facebook that's fine facebook opens which actually brings up the open dialogue right within the native application i haven't added my app forever please i don't i was i guess i was too slow let's go back so uh you previously yucked into the def tactic app would like to continue of course i would like which brings us directly back into our native application and we got the smooth process for facebook login so i really hope you enjoyed this video uh i have other videos on the google sign in on apple sign in now we also got facebook sign in and if you want to see more social providers or perhaps uh something something like the json web token login again with a bit more complicated flow or anything around authentication let me know below because you know i lately released a few of these bigger templates and i think these can be really helpful so let me know what you would like to see and enjoy your day if you enjoyed this video please hit the like button and stay subscribed so you get notified about all the new tutorials quick wins and other app development and web development videos on this channel if you want to learn more about ionic with in-depth courses a community of like-minded developers so you can learn and build your apps faster you should definitely check out the ionic academy which is my code school to help you with everything ionic with a huge library of courses material and a supportive slack channel so we can get your app out i hope you enjoyed this video i will see you inside the next video have a great day and happy coding silent [Music]

Channel: Simon Grimm

Views: 6,412

Keywords: ionic framework, learn ionic, angular, ionic angular, ionic guide, cross platform, hybrid app, ionic for beginners, ionic course, ionic, cordova, javascript, ionic 5, learn ionic 5, ionic 5 for beginners, angular 9, ionic 5 tutorial, ionic 5 angular, ionic 5 course, ionic academy, ionic tutorial

Id: eEBi92zOgzs

Length: 21min 49sec (1309 seconds)

Published: Tue Dec 01 2020