U ovom ću blog postu pokazati kako na jednostavan način ugraditi Facebook prijavu unutar Ionic aplikacije.
Ovo je odličan izbor za sve aplikacije koje trebaju neku vrstu prijave i održavanja komunikacije s korisnicima aplikacije bez da se mora imati poseban back-end za prijavu.
Također, korisnicima je jednostavnije kliknuti na jedan gumb i tako se prijaviti nego da se prvo moraju registrirati koristeći npr. e-mail.
Kreiranje aplikacije
Za početak kreiram novu Ionic aplikaciju i odmah dodajem Android platformu kako bi kasnije mogao aplikaciju pokrenuti na Android mobilnom uređaju.
|
1 2 3 |
$ ionic start IonicPrijavaF blank $ cd IonicPrijavaF $ ionic cordova platform add android |
Sada ću odmah promijeniti i APP ID oznaku unutar config.xml iz id="io.ionic.starter" u id="hr.tomislavstankovic.ionicprijavaf" jer će mi to trebati odmah u nastavku.
Facebook Developers
Sada ću na poveznici https://developers.facebook.com/apps/ kreirati profil za maloprije kreiranu aplikaciju koji mi je potreban za uspješnu implementaciju prijave.
Klikom na “Add a New App” kreiram profil za svoju aplikaciju.
U ovom koraku unosim samo naziv aplikacije.
Sada vidim upravljačku ploču i “App ID” koji će mi uskoro trebati i bez kojega Facebook prijava ne bi radila.
Klikom na “Add Platform” u prethodnom koraku dobijem sljedeći prozor gdje odabirem “Android“.
Ovdje unosim ID iz config.xml datoteke.
Nakon toga dobijem sljedeću poruku i s obzirom da mi je ovo testna aplikacija i da se ne nalazi na Google Play Storeu dovoljno je kliknuti na “Use this package name“.
Sada imam sve spremno za implementaciju.
Implementacija prijave
Sada krećem u implementaciju Facebook prijave unutar Ionic aplikacije.
Prije svega moram instalirati Ionic Native Facebook plugin
|
1 2 |
$ ionic cordova plugin add cordova-plugin-facebook4 --variable APP_ID="1986093454936515" --variable APP_NAME="IonicPrijavaF" $ npm install --save @ionic-native/facebook |
Nakon instalacije u config.xml pronalazim sljedeće
|
1 2 3 4 |
<plugin name="cordova-plugin-facebook4" spec="^1.9.1"> <variable name="APP_ID" value="1986093454936515" /> <variable name="APP_NAME" value="IonicPrijavaF" /> </plugin> |
Sada uvozim ranije instaliran plugin unutar app.module.ts
|
1 2 3 4 5 6 7 8 |
import { Facebook } from '@ionic-native/facebook'; ... providers: [ StatusBar, SplashScreen, Facebook, {provide: ErrorHandler, useClass: IonicErrorHandler} ] |
Ako sada pokrenem aplikaciju vidjet ću samo HomePage stranicu jer sam koristio blank temu i zato ću sada kreirati novu stranicu koja će sadržavati gumb za prijavu. Tek nakon uspješne prijave prikaz će se HomePage stranica.
|
1 |
$ ionic generate page Prijava |
Sada ću u app.component.ts postaviti da mi je PrijavaPage početna stranica (rootPage) nakon što se pokrene aplikacija.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
import { Component } from '@angular/core'; import { Platform } from 'ionic-angular'; import { StatusBar } from '@ionic-native/status-bar'; import { SplashScreen } from '@ionic-native/splash-screen'; //import { HomePage } from '../pages/home/home'; @Component({ templateUrl: 'app.html' }) export class MyApp { //rootPage:any = HomePage; rootPage:any = 'PrijavaPage'; constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) { platform.ready().then(() => { // Okay, so the platform is ready and our plugins are available. // Here you can do any higher level native things you might need. statusBar.styleDefault(); splashScreen.hide(); }); } } |
Stranica za prijavu sastojat će se od Ionic loga i gumba za Facebook prijavu.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<ion-content padding> <ion-row> <ion-col col-12 text-center> <img src="assets/imgs/logo.png" alt="Ionic logo" width="250" height="auto"> </ion-col> </ion-row> <ion-row padding> <ion-col col-12 text-center> <img (click)="prijavaFb()" src="assets/imgs/facebook-button.png" alt="Facebook logo"> </ion-col> </ion-row> </ion-content> |
Funkcionalnost će se sastojati od dvije funkcije. Funkcija prijavaFb() vrši prijavu, dok funkcija getUserDetail() na osnovu ID-a korisnika dohvaća više detalja o korisniku kao što su ime i prezime, email adresa, spol i poveznicu na sliku profila.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
import { Component } from '@angular/core'; import { IonicPage, NavController, NavParams } from 'ionic-angular'; import { Facebook, FacebookLoginResponse } from '@ionic-native/facebook'; import { HomePage } from '../home/home'; @IonicPage() @Component({ selector: 'page-prijava', templateUrl: 'prijava.html', }) export class PrijavaPage { constructor(public _navCtrl: NavController, public _navParams: NavParams, private _facebook: Facebook) { } ionViewDidLoad() { console.log('ionViewDidLoad PrijavaPage'); } prijavaFb(){ this._facebook.login(['public_profile', 'user_friends', 'email']) .then((res) => { console.log(res); this._navCtrl.setRoot(HomePage); }, (err) => { console.log('Error logging into Facebook', err); }); } getUserDetail(userid) { this._facebook.api("/"+userid+"/?fields=id,email,name,picture,gender",["public_profile"]) .then(res => { console.log(res); }) .catch(e => { console.log(e); }); } } |
Nakon uspješne prijave korisnik automatski bude preusmjeren na HomePage dok u pozadini dobijem dva odgovora (res) s podacima o korisniku koji se upravo prijavio u moju Ionic aplikaciju.
U ovom se primjeru HomePage sastoji samo od gumba za odjavu
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<ion-header> <ion-navbar> <ion-title> Ionic - Facebook prijava </ion-title> </ion-navbar> </ion-header> <ion-content padding> <ion-row padding> <ion-col col-12 text-center> <img (click)="odjavaFb()" src="assets/imgs/facebook-logout.png" alt="Facebook logo"> </ion-col> </ion-row> </ion-content> |
tj. od funkcije za odjavu.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; import { Facebook } from '@ionic-native/facebook'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { constructor(public _navCtrl: NavController, private _facebook: Facebook) { } odjavaFb(){ this._facebook.logout() .then( res => console.log(res)) .catch(e => console.log('Error logout from Facebook', e)); } } |
I to bi bilo sve. Međutim, postoji još jedna stvar. Svaki put kada korisnik pokrene aplikaciju, neovisno o tome je li se ranije već prijavljivao, on će se morati ponovno prijaviti sa svojim podacima. Osim ako napravim sljedeće.
U trenutku kada se korisnik uspješno prijavi u aplikaciju spremam njegov ID u localStorage i kasnije svaki sljedeći put kada pokrene aplikaciju provjeravam postoji li već spremljen njegov ID this.provjera();, ako postoji automatski ga preusmjeravam na HomePage.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
import { Component } from '@angular/core'; import { IonicPage, NavController, NavParams } from 'ionic-angular'; import { Facebook, FacebookLoginResponse } from '@ionic-native/facebook'; import { HomePage } from '../home/home'; @IonicPage() @Component({ selector: 'page-prijava', templateUrl: 'prijava.html', }) export class PrijavaPage { constructor(public _navCtrl: NavController, public _navParams: NavParams, private _facebook: Facebook) { } ionViewDidLoad() { console.log('ionViewDidLoad PrijavaPage'); this.provjera(); } prijavaFb(){ this._facebook.login(['public_profile', 'user_friends', 'email']) .then((res) => { console.log(res); this._navCtrl.setRoot(HomePage); }, (err) => { console.log('Error logging into Facebook', err); }); } getUserDetail(userid) { this._facebook.api("/"+userid+"/?fields=id,email,name,picture,gender",["public_profile"]) .then(res => { console.log(res); localStorage.setItem('userId', res.id); }) .catch(e => { console.log(e); }); } provjera(){ if(localStorage.getItem('userId')){ this._navCtrl.setRoot(HomePage); } } } |
Zaključak
U ovom sam blog postu pokazao kako na jednostavan i brz način ugraditi Facebook prijavu unutar Ionic aplikacije.
Struktura projekta prema package.json
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
{ "name": "IonicPrijavaF", "version": "0.0.1", "author": "Tomislav Stanković", "homepage": "https://www.tomislavstankovic.com/", "private": true, "scripts": { "clean": "ionic-app-scripts clean", "build": "ionic-app-scripts build", "lint": "ionic-app-scripts lint", "ionic:build": "ionic-app-scripts build", "ionic:serve": "ionic-app-scripts serve" }, "dependencies": { "@angular/common": "5.0.3", "@angular/compiler": "5.0.3", "@angular/compiler-cli": "5.0.3", "@angular/core": "5.0.3", "@angular/forms": "5.0.3", "@angular/http": "5.0.3", "@angular/platform-browser": "5.0.3", "@angular/platform-browser-dynamic": "5.0.3", "@ionic-native/core": "4.4.0", "@ionic-native/facebook": "^4.5.3", "@ionic-native/splash-screen": "4.4.0", "@ionic-native/status-bar": "4.4.0", "@ionic/storage": "2.1.3", "cordova-android": "6.3.0", "cordova-plugin-device": "^2.0.1", "cordova-plugin-facebook4": "^1.9.1", "cordova-plugin-ionic-keyboard": "^2.0.5", "cordova-plugin-ionic-webview": "^1.1.16", "cordova-plugin-splashscreen": "^5.0.2", "cordova-plugin-whitelist": "^1.3.3", "ionic-angular": "3.9.2", "ionicons": "3.0.0", "rxjs": "5.5.2", "sw-toolbox": "3.6.0", "zone.js": "0.8.18" }, "devDependencies": { "@ionic/app-scripts": "3.1.8", "typescript": "2.4.2" }, "description": "Primjer Facebook prijave u Ionic aplikaciju", "cordova": { "plugins": { "cordova-plugin-whitelist": {}, "cordova-plugin-device": {}, "cordova-plugin-splashscreen": {}, "cordova-plugin-ionic-webview": {}, "cordova-plugin-ionic-keyboard": {}, "cordova-plugin-facebook4": { "APP_ID": "1986093454936515", "APP_NAME": "IonicPrijavaF" } }, "platforms": [ "android" ] } } |
