Facebook Authentication in ionic 😍

In this section we will cover you how to create an app that authenticate with facebook and getting users data. Lets get started…

Create Facebook App Using Facebook developer Account :

Actually we connect facebook app to our ionic app then we catch users information data like name, email etc. Now its time to create an app of facebook Developer account. What actually facebook developer account is ? . In this account you can manage apps of facebook . Each app have different kind of products like authentication , analytics and marketing API etc. You can use these products in your app to build more user friendly actions. How do i create these apps ? .It’s easy go to upper hand corner click on My Apps and then click add a new app . The popup will shows down here . In this window you see Display Name and Contact Email inputs and click create app id . This will check some security options after checking this will created an app of facebook. So in my case i use app as a Display name.

Platform Setting iOs and Android :

Creating an platform of Android and iOs is to tell the app . So app is using these mobile platforms like Android and iOs. Now its time to create these platforms go to facebook app in my case i use the name ‘app’ . So i wanna go to app and on the left side you can see many option like Dashboard, Settings and roles etc. Select Settings you can see basic settings and advanced settings. I choose basic settings because i want to just create a platform like Android and iOs. So in the center pane and scroll down you can see in the bottom button which is Add platform click on them. After you clicking you can see the popup. In this popup select iOs and then again add Android platform.

Type this Bundle Id and Google Play Package Name looks like this… you can type your any packages names you want. But you must know both are same.

Setting facebook app has been completed its time deep in ionic and angular coding….

Connecting an facebook app to Ionic App :

Create your ionic app using Default process. After creating go to your project and open config.xml . Type your Bundle Id and Google Play Package Name widget tag as an id. By Default looks like this

<widget id=”io.ionic.starter”

After changing this look like this

<widget id=”com.usamaliaquat.ulcreativeSoftwares”

Now its time to install ionic cordova facebook plugin. Open command prompt to your app directory and type this command..

npm install --save @ionic-native/facebook

After installing this type this command to connect your app to facebook app..

If you see APP_ID=”type your facebook app id”;

If you see APP_NAME=”type your app name”

ionic cordova plugin add cordova-plugin-facebook4 --variable APP_ID="172051493355294" --variable APP_NAME="app"

After complete you have successfully connected your local app to facebook app.

Getting Data of Facebook User :

Now its time to import facebook plugin in app.module.ts . As an provides or an import this plugin..

Now go to home.html which is in the following directory src > pages > home. So in the ion-content tag type this code.

<button ion-button full (click)="facebookLogin()">Login!</button>
<ion-card *ngIf="userData">
   <ion-card-header>{{ userData.username }}</ion-card-header>
       <img [src]="userData.picture" />
    <ion-card-content>
      <p>Email: {{ userData.email }}</p>
      <p>First Name: {{ userData.first_name }}</p>
    </ion-card-content>
</ion-card>

This code creating the view of Users information but you can see on line 2

<ion-card *ngIf="userData">

This line check if userData have some values if not ion-card will disappear. In

Get Usama Liaquat’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

<ion-card> you can see every content have in bindings like

{{ userData.value }}

because i ‘m gonna to create userData as an array. Now its time to go backend when

the user click on the button facebookLogin() function will call. Now go to

home.ts and create this function in export class looks like this..

facebookLogin()
 {
 }

Import some facebook plugin and FacebookLoginResponse and add it in your

constructor like this

In export function create variable of type any

userData: any

Type this code in facebooklogin() function

this.facebook.login(['email', 'public_profile']).then((response: FacebookLoginResponse) => {
      this.facebook.api('me?fields=id,name,email,first_name,picture.width(720).height(720).as(picture_large)', []).then(profile => {
           this.userData = {email: profile['email'], first_name: profile['first_name'], picture: profile['picture_large']['data']['url'], username: profile['name']}
         
         });
    
     });

this code calling the facebook plugin and login. In Login have an email and

public_profile then response with the FacebookLoginResponse . In

FacebookLoginResponse there have an facebook graph api that have users fields

which is id , name , email, first_name, picture with width and height etc then profile

have arrow function which is calling the userData and assign an array which is users

fields email , first_name etc..

Now run your app in emulator or devices

mine look like this in tab

Thanks to see this article … share this article 🍺