Same as the Google Sign-In, there was some confirguration needed (although not as much). In this article, we have setup the Facebook sign-in API and worked through a cross platform solution for signing users into our Firebase with Facebook. After this we are free to use the plugin anywhere in this provider. Provided you have been following, the two Facebook Ionic plugins are now installed and the app is setup in Firebase and FB Dev Portal.īefore we can use the plugin in our code, we must import it and bring it into scope with the constructor. Once these values are input, click enable and that’s it! Implement the sign-in flowĪfter all of the configuration, we have made it to the fun part: coding the thing and testing it! These two values are needed to link Firebase to our Facebook app. ![]() Once the app is created on the FB developer’s portal, it will have an APPID and an APPSECRET. Setting up the sign-in within Firebase will be the easiest task. Don’t forget to also import the plugin in your and specify it as a provider for the project. The ID value found at the top of your config.xml will be used for both the Google Play store package name and the BundleID. Both platforms will need to know the generated ID of your app when it is in deployment. To begin click Add Platform, select either Android or iOS. This is done by adding platforms with a bundle ID we specify. Our app is created, however we need to specify which apps can use our sign-in API. There are two final steps for this: selecting which platforms we will use on the FB Developer Portal and importing in the app.module. npm install -save we have the plugin installed and wired up to the Facebook console. The other plugin will allow us to work with the first one, through TypeScript. You can find both of those inside your Facebook Developer’s Dashboard. You’ll need to replace the values or APP_ID and APP_NAME for your real credentials. $ ionic plugin add cordova-plugin-facebook4 -variable APP_ID="123456789" -variable APP_NAME="myApplication" The cordova plugin designed to work with Facebook natively, and a wrapper for it. The contact email may be shown to users, so make sure it’s professional.Īfter this, the app will be created in facebook and we can add the plugin to our application! ![]() It is what we’ll use to setup the sign-in API on Facebook’s side.Ĭhoose a name and a contact email for your app. The Facebook Developers Portal is an interface to all of the developer tools and APIs available. Implement the sign-in flow Facebook Developer’s Portal Setup a new App in the Facebook developer’s portal In order for Firebase to work with the Facebook platform, we will need to perform three steps: ionic g provider auth Setup app with Firebase and get credentials The code for Facebook sign-in will be put into a provider class which will be called by whichever page needs to use that sign-in method. For this, use a blank template as a starting point. If you get EACCES: permission denied, you may need to run the command with sudo.Ĭreate an app with ionic start. To install ionic and cordova, which for the moment is needed for plugins, run the following in your terminal after installing Node: npm install -g ionic cordova To follow along with this tutorial, youll need both Node.js and Ionic installed. If you have ionic and Node installed and have a project setup, you can jump to the code here. Some of this post will be very similar to the other tutorials on my page. The user’s chosen provider will handle all of this for you.ĭo you want just check out the code instead of following the post? Please give the repo a star in you find it helpful! You don’t need to store hashed passwords to compare, you don’t have to handle sending sign up emails, and you don’t need to reset passwords. Instead, you can allow users to sign in with accounts they already own. It’s helpful to use social sign-ins with Ionic for your users who would rather not create and remember another username:password combination. By Ryan Gordon How to develop a great Facebook login flow with Firebase and Ionic
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |