Kada razvijate Ionic aplikaciju i dođete do faze u kojoj trebate funkcionalnosti kao što su registracija i prijava korisnika imate dvije mogućnosti. Napraviti vlastiti API ili koristiti neki vanjski servis kao što su npr. Google Firebase i Auth0. U prvom slučaju imate više kontrole jer točno znate zašto ste nešto napravili dok u drugom slučaju imate više sigurnosti jer velike tvrtke stoje iza usluga koje pružaju i na kojima radi puno developera.
Postavljanje Firebase projekta
Za početak je na adresi https://console.firebase.google.com/ potrebno kreirati projekt.
Nakon postavljanja projekta u izborniku Authentication odabrat ćemo Email/Password metodu. To će nam omogućiti da se u Ionic aplikaciju registriramo tj. prijavimo koristeći email i lozinku.
Sada ćemo se prebaciti na početnu stranicu našeg Google Firebase projekta i kliknuti na Add Firebase to your web app prilikom čega ćemo dobiti
config objekt koji ćemo koristiti unutar aplikacije.
Postavljanje Firebasea u Ionic
Ranije preuzet config objekt možemo odmah dodati unutar aplikacije, a nalazit će se unutar datoteke app.firebase.config.ts koju ćemo ručno kreirati.
Međutim, taj nam config objekt ničemu ne služi dok ne dodamo dva paketa koji znaju što s njima raditi. A to su:
koje instaliramo naredbom
1 |
$ npm install firebase angularfire2 --save |
I nakon toga, kao što vam je i poznato, trebamo ih uvesti u app.module.ts
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 |
import { BrowserModule } from '@angular/platform-browser'; import { ErrorHandler, NgModule } from '@angular/core'; import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular'; import { SplashScreen } from '@ionic-native/splash-screen'; import { StatusBar } from '@ionic-native/status-bar'; import { FIREBASE_CONFIG } from './app.firebase.config'; import { AngularFireModule } from 'angularfire2'; import { AngularFireAuthModule } from 'angularfire2/auth'; import { MyApp } from './app.component'; @NgModule({ declarations: [ MyApp ], imports: [ BrowserModule, IonicModule.forRoot(MyApp), AngularFireModule.initializeApp(FIREBASE_CONFIG), AngularFireAuthModule ], bootstrap: [IonicApp], entryComponents: [ MyApp ], providers: [ StatusBar, SplashScreen, {provide: ErrorHandler, useClass: IonicErrorHandler} ] }) export class AppModule {} |
Sada imamo sve što nam je potrebno kako bi korisnicima Ionic aplikacije omogućili registraciju i prijavu koristeći email i lozinku.
Kreiranje stranica za registraciju i prijavu
Stranice za registraciju i prijavu kreiramo sljedećim naredbama
1 2 |
$ ionic generate page Prijava $ ionic generate page Registracija |
Nakon toga ćemo odmah postaviti stranicu za prijavu kao zadanu umjesto dosadašnje Home stranice.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
import { Component } from '@angular/core'; import { Platform } from 'ionic-angular'; import { StatusBar } from '@ionic-native/status-bar'; import { SplashScreen } from '@ionic-native/splash-screen'; @Component({ templateUrl: 'app.html' }) export class MyApp { rootPage:any = 'PrijavaPage'; constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) { platform.ready().then(() => { statusBar.styleDefault(); splashScreen.hide(); }); } } |
Registracija
Iako korisnika možemo ručno dodati direktno u Firebase sučelju mi ćemo ga registrirati kroz našu Ionic aplikaciju.
Sada ćemo napraviti formu putem koje će se korisnici registrirati. Forma se sastoji od dva polja. U prvo se polje unosi e-mail, a u drugo lozinka. Na kraju imamo gumb sa funkcijom registracija() u kojoj se prosljeđuje objekt user .
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 |
<ion-header> <ion-navbar color="primary"> <ion-title>Registracija</ion-title> </ion-navbar> </ion-header> <ion-content padding> <ion-item> <ion-label floating>E-mail</ion-label> <ion-input type="text" [(ngModel)]="user.email"></ion-input> </ion-item> <ion-item> <ion-label floating>Password</ion-label> <ion-input type="password" [(ngModel)]="user.password"></ion-input> </ion-item> <ion-row padding> <ion-col> <button ion-button (click)="registracija(user)">Registracija</button> </ion-col> </ion-row> </ion-content> |
Logika stranice za registraciju nalazi se unutar registracija.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
import { Component } from '@angular/core'; import { IonicPage, NavController, NavParams } from 'ionic-angular'; import { AngularFireAuth } from 'angularfire2/auth'; @IonicPage() @Component({ selector: 'page-registracija', templateUrl: 'registracija.html', }) export class RegistracijaPage { user = {email: '', password: ''}; constructor(public _navCtrl: NavController, public _navParams: NavParams, private _auth: AngularFireAuth) { } registracija(){ const result = this._auth.auth.createUserWithEmailAndPassword(this.user.email, this.user.password); console.log(result); } } |
Proces registracije na kraju izgleda ovako:
Prijava
Stranica za prijavu također se sastoji od forme za unos s dva polja (e-mail i lozinka), ali ra razliku od stranice za registraciju ova stranica ima dva gumba. Jedan koji služi za prijavu prijava(user) , a drugi idNaRegistraciju() koji vodi na stranicu tj. formu za registraciju.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<ion-item> <ion-label floating>E-mail</ion-label> <ion-input type="text" [(ngModel)]="user.email"></ion-input> </ion-item> <ion-item> <ion-label floating>Password</ion-label> <ion-input type="password" [(ngModel)]="user.password"></ion-input> </ion-item> <ion-row padding> <ion-col> <button ion-button (click)="prijava(user)">Prijava</button> </ion-col> <ion-col> <button ion-button color="light" (click)="idiNaRegistraciju()">Registracija</button> </ion-col> </ion-row> </ion-content> |
Logika komponente za prijavu malo je proširena za razliku od one za registraciju. Sastoji se od dvije funkcije.
Funkcija prijava(user) obavlja dvije radnje. Vrši prijavu i obavlja redirekciju na stranicu HomePage u slučaju kada je prijava uspješna.
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 |
import { Component } from '@angular/core'; import { IonicPage, NavController, NavParams } from 'ionic-angular'; import { AngularFireAuth } from 'angularfire2/auth'; @IonicPage() @Component({ selector: 'page-prijava', templateUrl: 'prijava.html', }) export class PrijavaPage { user = {email: '', password: ''}; constructor(public _navCtrl: NavController, public _navParams: NavParams, private _auth: AngularFireAuth) { } prijava(user){ const result = this._auth.auth.signInWithEmailAndPassword(user.email, user.password); if(result){ console.log(result); this._navCtrl.push('HomePage'); } } idiNaRegistraciju(){ this._navCtrl.push('RegistracijaPage'); } } |
Proces prijave izgleda ovako:
Zaključak
I to je sve! Vidjeli ste primjer Google Firebase registracije i prijave za Ionic 3 projekt. Dalje si možete ugraditi mogućnost pamćenja prijave tako da se jednom prijavljeni korisnik ne mora prijaviti svaki put kada pokrene aplikaciju.
Google Firebase Auth odlična je opcija kada želite pokriti područje registracije i prijave. Za kratko vrijeme možete dobiti funkcionalnu aplikaciju spremnu za implementaciju ostalih funkcionalnosti.
Hi there , thanks for your , everything works perfectly. Anyway I have 1 question.
1. When I’m trying to implement Facebook and Google authentication , everything works in the browser , but when integrate it on the mobile phone , it throws error
“location.protocol” must be http or https when building to device using Ionic 2 & Angular 2 ”
Which I have to clue where this comes from , I’ve read that Firebase doesn’t support signInWithPopUp() and signInWithRedirect() for ionic yet , but I don’t know if that’s true.
googleLogin() {
this._auth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider())
.then((success) => {
this.navCtrl.setRoot(HomePage);
})
.catch((error) => {
alert(error);
});
}
I didn’t implement Google and Facebook auth, but you can find some more details at https://javebratt.com/ionic-social-login-firebase/