@pluritech/ion-facebook-provider

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