Hello friends, in this update series, I have integrated Facebook and Google register/login in MyChat app. Here I am going to describe that how to enable Facebook integration in Facebook and Firebase developer console and integrate it into App. In next article here, we will see how to setup Google register/login feature.

1. There are different ways to integrate Facebook authentication. Here we have used Facebook Connect plugin cordova-plugin-facebook4 to get authenticated by Facebook on android.

2. To use this plugin, first we have to create a new app on Facebook developer account at https://developers.facebook.com/apps

Add app name and contact email and get APP Id and App Name.
3. To login with Facebook in your app, you have to add some settings in Facebook Developer portal Settings.

4. From this Page you can get APP Id and App Secret for your Facebook plugin.

5. Then next step to Add Platform, so here we have to choose Android platform.

6. Under this you have to give your Google Package name and Class name.

Google Package name is that name which is your app’s bundle id so for this you have to open your project‘s config.xml file, found in the root directory of your project. Take note of id which is highlighted in yellow below:

&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
&amp;amp;amp;lt;widget id="com.test.ionic" version="1.0.3" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0"&amp;amp;amp;gt;;&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>

So this id will be your Google Package Name, and Google class name is the main activity that you want Facebook to launch.

7. Now you have to add Key hashes to login multiple times in app from Facebook.

8. To generate Key hashes, you have to open command prompt and type command

&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
keytool -exportcert -alias com.test.ionic –keystore &amp;amp;amp;nbsp;E:\testapp-ionic.keystore | openssl sha1 -binary | openssl base64

  • “com.test.ionic” is the alias name of your keystore.
  • Next you have to add you keystore path for ex. here is “E:\testapp-ionic.keystore”

9. Now add this generated key hash and click “Save Changes”.

10. Next, to make your app public, go to “App Review” from left menu and click “Yes” to Make chat app public.

Note: To enable this you have to add some details like privacy policy URL etc.

Now the Facebook setting is completed for the login with app.

11. Here we use Facebook login with Firebase so that’s why we have to add some settings in Firebase also.

12. Open Firebase console at https://console.firebase.google.com/ and go to “Authentication” page from left sidebar menu and then go to Sign-in-method tab.

13. Now Enable Facebook Sign-in providers and also enter you Facebook App Id and App secret and save those credentials.

Firebase setting is also now completed.

14. Now open your project and install plugin

&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
ionic cordova plugin add cordova-plugin-facebook4 --variable APP_ID="YOUR APP ID" --variable APP_NAME="YOUR APP NAME"&amp;amp;lt;/p&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
&amp;amp;lt;p&amp;amp;gt;npm install --save @ionic-native/facebook&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>

Add app id and app name and install this plugin in your project from command prompt.

15. So we have completed all steps to run the Facebook authentication in app, now we will see the code part.

16. Call FacebookLogin() function on your FB login button click.

&amp;amp;lt;/p&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
&amp;amp;lt;p&amp;amp;gt;import { Facebook, FacebookLoginResponse } from '@ionic-native/facebook';&amp;amp;lt;/p&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
&amp;amp;lt;p&amp;amp;gt;constructor(private fb: Facebook) { }&amp;amp;lt;/p&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
&amp;amp;lt;p&amp;amp;gt;…&amp;amp;lt;/p&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
&amp;amp;lt;p&amp;amp;gt;FacebookLogin() {&amp;amp;lt;/p&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
&amp;amp;lt;p&amp;amp;gt;this.fb.login(['public_profile', 'user_friends', 'email'])&amp;amp;lt;/p&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
&amp;amp;lt;p&amp;amp;gt;.then((response) =&amp;amp;amp;gt; {&amp;amp;lt;/p&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
&amp;amp;lt;p&amp;amp;gt;// Login Facebook with Firebase&amp;amp;lt;/p&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
&amp;amp;lt;p&amp;amp;gt;const facebookCredential = firebase.auth.FacebookAuthProvider&amp;amp;lt;/p&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
&amp;amp;lt;p&amp;amp;gt;.credential(response.authResponse.accessToken);&amp;amp;lt;/p&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
&amp;amp;lt;p&amp;amp;gt;firebase.auth().signInWithCredential(facebookCredential). then((user) =&amp;amp;amp;gt; {}) .catch((error) =&amp;amp;amp;gt; {});&amp;amp;lt;/p&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
&amp;amp;lt;p&amp;amp;gt;}).catch(e =&amp;amp;amp;gt; console.log('Error logging into Facebook', e));&amp;amp;lt;/p&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
&amp;amp;lt;p&amp;amp;gt;}&amp;amp;lt;/p&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
&amp;amp;lt;p&amp;amp;gt;

 

Now learn how to integrate
Google authentication in MyChat App

 

 

Facebook Authentication in MyChat

Most Popular

Have a Great startup Idea and want to make it possible? Looking for an extraordinary team to build a mobile or Web app for your idea to come into reality? Then you are at right place. I provide my services for mobile and web app development.

Copyright © 2019 CrocoCode. All rights reserved.

To Top