The wrapper to Facebook Connect plugin from Ionic Native.
First, install the Facebook Connect Plugin from Ionic Native
then install this library, run:
$ npm install @pluritech/ion-facebook-provider --saveand 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) {
}
}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.error(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/
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.error(error));
}
}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.error(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: |
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());
}
}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.error(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']
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.error(error));
}
}To generate all *.js, *.d.ts and *.metadata.json files:
$ npm run buildTo lint all *.ts files:
$ npm run lintMIT © Lucas Correa
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent