Wrapper Ionic Facebook

The wrapper to Facebook Connect plugin from Ionic Native.

Installation

First, install the Facebook Connect Plugin from Ionic Native

then install this library, run:

$ npm install @pluritech/ion-facebook-provider --save

Consuming ion-facebook-provider

and then from your Ionic Project AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { MyApp } from './app.component';

//Is required import the Facebook from Ionic Native
import { Facebook } from '@ionic-native/facebook';
// Import library wrapper 
import { IonFacebookProviderModule } from '@pluritech/ion-facebook-provider';

@NgModule({
  declarations: [
    MyApp
  ],
  imports: [
    BrowserModule,

    // Dont forget put them here
    IonFacebookProviderModule.forRoot(['user_friends', 'email', 'public_profile']),
    Facebook

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

The list of permission can set by forRoot. Not required, default is: ['email', 'public_profile']

Once the library is imported, you can use its provider in your Components or Providers:

import { IonFacebookProvider } from '@pluritech/ion-facebook-provider';
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController, private ionFacebookProvider: IonFacebookProvider) {
  }
}

Method login(getPictureBase64?: boolean)

You can use the method Login to make login and receive the datas as userID, accessToken and etc. These method too give you a Header with access token to send to your server.

• How Use:

import { IonFacebookProvider, FbLoginResponse } from '@pluritech/ion-facebook-provider';
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController, private ionFacebookProvider: IonFacebookProvider) { }

  public loginTest(true) {
    this.ionFacebookProvider.login(true)
    .then((res: FbLoginResponse) => console.log(res))
    .catch(error => console.log(error));
  }
}

• What there in FbLoginResponse

Field | Can be null | Description ------ | ----------- | ----------- header | false | header with key 'AcessTokenFb' and value as accessToken from authResponse at Facebook picture| true | url picture from user logged in Facebook picture64 | true | picture base 64 from user logged in Facebook if param getPictureBase64 set true and the Facebook allow get url picture

• FbLoginResponse extends FacebookLoginResponse, see more: https://ionicframework.com/docs/native/facebook/

Method logout()

You can use the method Logout to log the user out from facebook, it's a best practice always call this method when the user quit of your application. See more: Facebook Doc - Logout

import { IonFacebookProvider, FbLoginResponse } from '@pluritech/ion-facebook-provider';
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController, private ionFacebookProvider: IonFacebookProvider) { }

  public logoutTest() {
    this.ionFacebookProvider.logout()
      .then((res) => console.log(res))
      .catch(error => console.log(error));
  }
}

Method getPictureUser(config?: {setBase64?: boolean})

You can get picture of user. Required open session and a token valid to use.

import { IonFacebookProvider, UserPicture } from '@pluritech/ion-facebook-provider';

export class HomePage {

  constructor(public navCtrl: NavController, private ionFacebookProvider: IonFacebookProvider) { }

  public getPictureUser() {
    this.ionFacebookProvider.getPictureUser()
      .then((picture: UserPicture) => console.log(picture))
      .catch(error => console.log(error));
  }
}

• What there in UserPicture

Field | Can be null | Description ------ | ----------- | ----------- data | false | the data ProfilePictureSource. See more: Profile Picture Source data.base64 | true | If the setBase64 is True, the base 64 of picture will send too:

Method listPermisions()

You get only read list permissions set on root od module.

import { IonFacebookProvider, UserPicture } from '@pluritech/ion-facebook-provider';

export class HomePage {

  constructor(public navCtrl: NavController, private ionFacebookProvider: IonFacebookProvider) { }

  public getListPermission() {
    console.log('getListPermission', this.ionFacebookProvider.listPermisions());
  }
}

Method getPermissions()

You get permissions user from Facebook.

import { IonFacebookProvider, UserPicture } from '@pluritech/ion-facebook-provider';

export class HomePage {

  constructor(public navCtrl: NavController, private ionFacebookProvider: IonFacebookProvider) { }

  public getPermissionUserFacebook() {
    this.ionFacebookProvider.getPermissions()
      .then((permissions: PermissionsUser) => console.log(permissions))
      .catch(error => console.log(error));
  }
}

• What there in PermissionsUser

The object {key: value} where key is the name of permission and the value is your state that can be ['granted' || 'declined']

Method requestDataByGraphApi(path: string, permissions?: string[])

You can call the methods by API Grap Permissions. See more: Graph API

import { IonFacebookProvider, UserPicture } from '@pluritech/ion-facebook-provider';

export class HomePage {

  constructor(public navCtrl: NavController, private ionFacebookProvider: IonFacebookProvider) { }

  public getGraphAPI() {
    this.ionFacebookProvider.requestDataByGraphApi('/me/photos')
      .then(photos => console.log(photos))
      .catch(error => console.log(error));
  }
}

Development

To generate all *.js, *.d.ts and *.metadata.json files:

$ npm run build

To lint all *.ts files:

$ npm run lint

License

MIT © Lucas Correa