Tutorial Ionic 4 dan Facebook Connect Plugin

Pembukaan

Banyak setiap website ataupun aplikasi mobile android maupun iOS yang memerlukan authentication dari sosial media ternama Facebook. Beruntungnya para developer, Facebook mempunyai API untuk mengintegrasikan auth dari web maupun mobile apps. Pada kesempatan kali ini, saya akan mencoba untuk membuat aplikasi sederhana login dan logout facebook menggunakan Ionic 4 dan Native Facebook Plugin.

Apa saja yang dibutuhkan? Untuk development saya menggunakan:

  1. Node.js
  2. Ionic 4
  3. Cordova
  4. Cordova Facebook Plugin
  5. Android Studio untuk Deploy Apps
  6. Text Editor menggunakan Visual Studio Code
  7. Terminal atau Command Promt dari Windows

Setup Facebook Aplikasi

Langkah awal setup Facebook Apps untuk mendapatkan APP_ID/SECRET dan APP_NAME, mari buka Facebook Developers Dashboard.

Facebook Developers Dashboard
Buat ID Aplikasi Baru
Pengaturan Dasar Facebook Apps
Halaman Dasar Facebook Apps

Baca Juga :

Halaman Key Hash

Buat Ionic 4 App Baru

Buka command promt Anda untuk membuat project Ionic 4 baru. Ketikkan perintah berikut:

ionic start ionic-facebook tabs

Kemudan masuk ke direktori ionic-facebook.

cd ionic-facebook

Jangan lupa mengganti APP ID ionic project. Buka dan edit config.xml kemudian ganti pada baris berikut:

<widget id="com.ionicfacebook" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">

Ganti default id dari ionic starter menjadi id=”com.ionicfacebook”. com.ionicfacebook disini sebagai contoh saja.

Install dan Konfigurasi Ionic 4 dengan Native Facebook Plugin

Untuk memasang Ionic 4 Native Facebook Login dan Logout, gunakan command promt pada direktori Anda. Ketikan perintah berikut:

ionic cordova plugin add cordova-plugin-facebook4 --variable APP_ID="YOUR_APP_ID" --variable APP_NAME="YOUR_APP_NAME"

Baca juga:

YOUR_APP_ID adalah ID aplikasi yang kita dapatkan di Facebook Developer kita.

YOUR_APP_NAME adalah nama aplikasi yang juga kita dapatkan di Facebook developer kita.

Kemudian, install npm seperti cuplikan code berikut:

npm install --save @ionic-native/facebook

Sekarang, buka dan edit di ‘src/app/app.module.ts’. Tambahkan import seperti berikut:

import { Facebook } from '@ionic-native/facebook';

Juga, jangan lupa deklarasikan pada provider kita. Kurang lebih seperti berikut:

providers: [
  StatusBar,
  SplashScreen,
  {provide: ErrorHandler, useClass: IonicErrorHandler},
  Facebook
]

Implementasi Facebook Login dan Logout

Alur untuk implementasi Facebook login dan logout adalah untuk menambahkan Facebook user kedalam halaman kita jika user telah login menggunakan facebook atau menampilkan Halaman Login Facebook. Jika Facebook Login diklik, maka akan muncul halaman Facebook Login di browser.

Sekarang, mari kita buka dan edit ‘src/app/home/home.page.ts’ kemudian tambahkan import Ionic Native Facebook module.

import { Facebook } from '@ionic-native/facebook';

Deklarasi variable untuk mengecek apakah user telah login dan menyimpan data user. Deklarasikan sebelum constructor.

isLoggedIn:boolean = false;
users: any;

Masukkan Facebook Plugin kedalam constructor, tambahkan Facebook Connect method untuk mengecek jika user telah login.

constructor(private fb: Facebook) {
  fb.getLoginStatus()
    .then(res => {
      console.log(res.status);
      if(res.status === "connect") {
        this.isLoggedIn = true;
      } else {
        this.isLoggedIn = false;
      }
    })
    .catch(e => console.log(e));
}

Tambahkan method Facebook Login setelah constructor.

login() {
  this.fb.login(['public_profile', 'user_friends', 'email'])
    .then(res => {
      if(res.status === "connected") {
        this.isLoggedIn = true;
        this.getUserDetail(res.authResponse.userID);
      } else {
        this.isLoggedIn = false;
      }
    })
    .catch(e => console.log('Error logging into Facebook', e));
}

Tambahkan method logout Facebook.

logout() {
  this.fb.logout()
    .then( res => this.isLoggedIn = false)
    .catch(e => console.log('Error logout from Facebook', e));
}

Tambahkan Graph API Facebook yang memanggil method untuk mendapatkan info user.

getUserDetail(userid) {
  this.fb.api("/"+userid+"/?fields=id,email,name,picture,gender",["public_profile"])
    .then(res => {
      console.log(res);
      this.users = res;
    })
    .catch(e => {
      console.log(e);
    });
}

Untuk informasi lebih lanjut mengenai permissions dan fields return dari response, kita dapat cek di https://developers.facebook.com/docs/facebook-login/permissions/Facebook Developer Documentation.

Catatan: The allowed fields based on permissions.

Kemudian, buka dan edit ‘src/pages/home/home.page.ts’ kemudian ganti semua HTML tags cuplikan code berikut.

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <div *ngIf="isLoggedIn; else facebookLogin">
    <h2>Hi, {{users.name}} ({{users.email}})</h2>
    <p>
      Gender: {{users.gender}}
    </p>
    <p>
      <img src="{{users.picture.data.url}}" width="100" alt="{{users.name}}" />
    </p>
    <p>
      <button ion-button icon-right (click)="logout()">
        Logout
      </button>
    </p>
  </div>
  <ng-template #facebookLogin>
    <button ion-button icon-right (click)="login()">
      Login with
      <ion-icon name="logo-facebook"></ion-icon>
    </button>
  </ng-template>
</ion-content>

Jika ada pertanyaan silahkan kita berdiskusi bersama di kolom komentar. Jangan sungkan untuk bertanya.


Leave a Reply