login – Tomislav Stanković

Angular & Firebase – registracija i prijava

U ovom ću blog postu napraviti primjer Angular web aplikacije koja će se sastojati od nekoliko ekrana. Glavna svrha ove web aplikacije je omogućiti korisnicima da se registriraju tj. prijave kako bi ju mogli koristiti. To će moći učiniti koristeći e-mail, Google ili Facebook korisnički račun.

Nekoliko sam blog postova već objavio na ovu temu, ali svi su bili vezani uz Ionic Framework. Iako je Ionic temeljen na Angularu shvaćam da osobama koje se tek susreću sa ovim može biti teže napraviti Angular projekt proučavajući Ionic sintaksu. Zato ovaj put radim čisti Angular web projekt.

Postavljanje Firebase projekta

Na adresi https://console.firebase.google.com/ kreiram novi Firebase projekt pod nazivom ‘AngularWebFirebase’.

Na sljedećem ekranu, klikom na ‘Add Firebase to your web app‘ dobijem objekt koji će mi biti potreban kako bi sve funkcioniralo. Taj ću objekt kasnije ugraditi unutar app.module.ts datoteke.

Nakon postavljanja projekta u izborniku Authentication odabirem Email/Password, Facebook i Google metodu registracije/prijave.

Kao što se može vidjeti iz slike iznad, Facebook prijava ne može se ugraditi bez dva parametra koja je moguće dobiti jedino na adresi https://developers.facebook.com/ gdje je potrebno kreirati profil za AngularWebFirebase aplikaciju.

Implementacija Firebase u Angular

Koristeći Angular CLI kreiram novi projekt.

1 2	$ ng new AngularWebFirebase $ cd AngularWebFirebase

Sljedećom naredbom instaliram potreban NPM paket

1	$ npm install angularfire2 firebase --save

Također, kao što sam ranije već spomenuo, u datoteku app.module.ts postavljam potreban Firebase objekt.

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { FormsModule } from '@angular/forms';

import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';

import { AngularFireModule } from 'angularfire2';

import { AngularFireAuthModule } from 'angularfire2/auth';

export const firebaseConfig = {

apiKey: "***************************************",

authDomain: "***********************.firebaseapp.com",

databaseURL: "https://***********************.firebaseio.com",

projectId: "***********************",

storageBucket: "***********************.appspot.com",

messagingSenderId: "************"

};

@NgModule({

declarations: [

AppComponent

imports: [

BrowserModule,

FormsModule,

HttpModule,

AngularFireModule.initializeApp(firebaseConfig),

AngularFireAuthModule

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

Sada ću kreirati četiri komponente od kojih će se sastojati moja Angular web aplikacija:

1 – LoginComponent – stranica za prijavu koristeći Facebook ili Google
2 – EmailComponent – stranica za prijavu koristeći e-mail
3 – SignupComponent – stranica za registraciju
4 – DashboardComponent – početna stranica nakon uspješne prijave

$ ng generate component login

$ ng generate component email

$ ng generate component signup

$ ng generate component dashboard

Ako sada pokrenem aplikaciju naredbom $ ng serve na adresi http://localhost:4200/ mogu vidjeti jedino standardnu Angular početnu stranicu.

S obzirom da ja u ovom slučaju želim vidjeti svoju Login komponentu kao početnu stranicu moram napraviti sljedeće. Unutar /src/app/ kreiram datoteku app.routes.ts sa sljedećim sadržajem:

import { ModuleWithProviders } from '@angular/core';

import { Routes, RouterModule } from '@angular/router';

import { AppComponent } from './app.component';

import { LoginComponent } from './login/login.component';

import { DashboardComponent } from './dashboard/dashboard.component';

import { SignupComponent } from './signup/signup.component';

import { EmailComponent } from './email/email.component';

export const router: Routes = [

{ path: '', redirectTo: 'login', pathMatch: 'full' },

{ path: 'login', component: LoginComponent },

{ path: 'signup', component: SignupComponent },

{ path: 'email', component: EmailComponent },

{ path: 'dashboard', component: DashboardComponent}

]

export const routes: ModuleWithProviders = RouterModule.forRoot(router);

Naravno, tu još ide uvoz u app.module.ts

import { AngularFireModule } from 'angularfire2';

import { AngularFireAuthModule } from 'angularfire2/auth';

import { LoginComponent } from './login/login.component';

import { EmailComponent } from './email/email.component';

import { SignupComponent } from './signup/signup.component';

import { DashboardComponent } from './dashboard/dashboard.component';

import { routes } from './app.routes';

...

declarations: [

AppComponent,

LoginComponent,

EmailComponent,

SignupComponent,

DashboardComponent

imports: [

BrowserModule,

FormsModule,

HttpModule,

AngularFireModule.initializeApp(firebaseConfig),

AngularFireAuthModule,

routes

...

I nakon toga unutar datoteke app.component.html umjesto postojećeg sadržaja staviti <router-outlet></router-outlet>.

Login komponenta

Nalazi se na adresi http://localhost:4200/login i to je zadani pregled koji se pojavi prilikom prve posjete web aplikaciji.

Ekran se sastoji od tri gumba. Facebook, Google i E-mail prijava uz mogućnost registracije.

<span class="error" *ngIf="error">{{ error }}</span>

<button (click)="loginFb()" id="fb">Login with Facebook</button><br>

<button (click)="loginGoogle()" id="google">Login with Google</button>

<button routerLink="/email" id="email">Login with E-mail</button>

<a routerLink="/signup" routerLinkActive="active" class="alc">Don't have an account?</a>

</div>

Gumb za prijavu putem Facebooka ili Googlea pozivaju funkciju dok klik ma gumb za prijavu putem e-maila otvara novu stranicu na kojoj se nalazi forma za unos e-maila i lozinke.

Ako prijava putem Facebooka ili Googlea prođe zapisujem podatke o korisniku (name, picture, email) u localStorage kako bi ih kasnije mogao prikazati na Dashboardu.

import { Component, OnInit } from '@angular/core';

import { AngularFireModule } from 'angularfire2';

import { AngularFireAuth } from 'angularfire2/auth';

import * as firebase from 'firebase/app';

import { Router } from '@angular/router';

@Component({

selector: 'app-login',

templateUrl: './login.component.html',

styleUrls: ['./login.component.css']

})

export class LoginComponent implements OnInit {

error: any;

constructor(public _angularAuth: AngularFireAuth,

private _router: Router) { }

ngOnInit() {

}

loginGoogle(){

let a = this;

//this._angularAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider());

firebase.auth().signInWithPopup(new firebase.auth.GoogleAuthProvider())

.then(function(authData) {

console.log(authData);

if(authData.credential.accessToken){

localStorage.setItem('name', authData.additionalUserInfo.profile.name);

localStorage.setItem('picture', authData.additionalUserInfo.profile.picture);

localStorage.setItem('email', authData.additionalUserInfo.profile.email);

a._router.navigate(['/dashboard']);

}

}).catch(function(error) {

console.log(error);

a.error = error.message;

});

}

loginFb(){

let a = this;

//this._angularAuth.auth.signInWithPopup(new firebase.auth.FacebookAuthProvider());

firebase.auth().signInWithPopup(new firebase.auth.FacebookAuthProvider())

.then(function(authData) {

console.log(authData);

if(authData.credential.accessToken){

localStorage.setItem('name', authData.additionalUserInfo.profile.name);

localStorage.setItem('picture', authData.additionalUserInfo.profile.picture.data.url);

localStorage.setItem('email', authData.additionalUserInfo.profile.email);

a._router.navigate(['/dashboard']);

}

}).catch(function(error) {

console.log(error);

a.error = error.message;

});

}

Ovisno o postavkama unutar Firebasea jedan korisnik se (ne)može prijaviti koristeći istu e-mail adresu na različitim društvenim mrežama tj. ako se korisnik jednom prijavio koristeći Google, a kasnije se želi prijaviti koristeći Facebook dobiti će sljedeću poruku:

Ta se opcija može promijeniti klikom na ‘One account per email address‘.

Signup komponenta

Nalazi se na adresi http://localhost:4200/signup i osnovna svrha ovog ekrana je omogućiti korisnicima registraciju.

Ekran se sastoji od dva polja za unos e-maila i lozinke.

<h2>Registration</h2>

<span class="error" *ngIf="error">{{ error }}</span>

<button type="submit" [disabled]="!formData.valid" class="basic-btn">Create my account</button>

</form>

</div>

Ako registracija prođe u redu korisnik automatski bude preusmjeren na stranicu za prijavu. U suprotnom iznad polja za unos e-maila prikazuje se poruka o grešci.

import { Component, OnInit } from '@angular/core';

import { AngularFireModule } from 'angularfire2';

import { AngularFireAuth } from 'angularfire2/auth';

import * as firebase from 'firebase/app';

import { Router } from '@angular/router';

@Component({

selector: 'app-signup',

templateUrl: './signup.component.html',

styleUrls: ['./signup.component.css']

})

export class SignupComponent implements OnInit {

error: any;

constructor(public _angularAuth: AngularFireAuth,

private _router: Router) { }

ngOnInit() {

}

onSubmit(formData) {

let a = this;

if(formData.valid) {

console.log(formData.value);

firebase.auth().createUserWithEmailAndPassword(formData.value.email, formData.value.password)

.then(function(data) {

console.log(data);

if(data){

a._router.navigate(['/email']);

}

}).catch(function(error) {

console.log(error);

a.error = error.message;

});

}

Email komponenta

Nalazi se na adresi http://localhost:4200/email s osnovnom svrhom omogućavanja prijave korisnika pomoću e-maila i lozinke.

Ekran se sastoji od dva polja za unos e-maila i lozinke.

<h2>E-mail Login</h2>

<span class="error" *ngIf="error">{{ error }}</span>

<a routerLink="/signup" class="alc">Don't have an account?</a>

</form>

</div>

Unosom ispravnih podataka za prijavu korisnik automatski bude preusmjeren na Dashboard dok u suprotnom dobije poruku o grešci.

import { Component, OnInit } from '@angular/core';

import { AngularFireModule } from 'angularfire2';

import { AngularFireAuth } from 'angularfire2/auth';

import * as firebase from 'firebase/app';

import { Router } from '@angular/router';

@Component({

selector: 'app-email',

templateUrl: './email.component.html',

styleUrls: ['./email.component.css']

})

export class EmailComponent implements OnInit {

error: any;

constructor(public _angularAuth: AngularFireAuth,

private _router: Router) { }

ngOnInit() {

}

onSubmit(formData) {

let a = this;

firebase.auth().signInWithEmailAndPassword(formData.value.email, formData.value.password)

.then(function(data) {

console.log(data);

if(data){

localStorage.setItem('email', data.email);

a._router.navigate(['/dashboard']);

}

}).catch(function(error) {

console.log(error);

a.error = error.message;

});

}

Dashboard komponenta

Nalazi se na adresi http://localhost:4200/dashboard s osnovnom svrhom prikaza podataka o korisniku nakon uspješne prijave. U ovom slučaju prikazuje se ime i prezime korisnika, e-mail adresa i slika.

Na ekranu se mogu vidjeti podaci o korisniku pod uvjetom (*ngIf) da postoje.

<button (click)="logout()" class="basic-btn">Logout</button>

</header>

<h6 *ngIf="email">{{email}}</h6>

</div>

Funkcionalnost se sastoji od dohvaćanja podataka o korisniku, funkcije za odjavu koja prazni localStorage i vraća korisnika na početnu stranicu te funkcije za provjeru koja onemogućava korisnike da pristupe Dashboard stranici ako nisu prijavljeni.

import { Component, OnInit } from '@angular/core';

import { AngularFireModule } from 'angularfire2';

import { AngularFireAuth } from 'angularfire2/auth';

import * as firebase from 'firebase/app';

import { Router } from '@angular/router';

@Component({

selector: 'app-dashboard',

templateUrl: './dashboard.component.html',

styleUrls: ['./dashboard.component.css']

})

export class DashboardComponent implements OnInit {

name: string;

picture: string;

email: string;

constructor(public _angularAuth: AngularFireAuth,

private _router: Router) { }

ngOnInit() {

this.name = localStorage.getItem('name');

this.picture = localStorage.getItem('picture');

this.email = localStorage.getItem('email');

this.provjera();

}

logout() {

//this._angularAuth.auth.logout();

localStorage.clear();

console.log('logged out');

this._router.navigateByUrl('/login');

}

provjera(){

if(!this.email){

this._router.navigateByUrl('/login');

}

Zaključak

U ovom sam blog postu pokazao kako implementirati Google Firebase prijavu u Angular web projekt.

Ionic 3 – Google login/prijava

U ovom ću blog postu pokazati kako na jednostavan način omogućiti prijavu unutar Ionic aplikacije koristeći Google korisničke podatke. Ranije sam već objavio blog post o tome kako se unutar Ionic aplikacije prijaviti koristeći Facebook.

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.

$ ionic start IonicPrijavaG blank

$ cd IonicPrijavaG

$ 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.ionicprijavag".

Postavljanje Firebase projekta

Temelj za uspješnu Google prijavu je pravilno postavljen Firebase projekt.

Na poveznici https://developers.facebook.com/apps/ kreiram profil za aplikaciju i pod Authentication – Sign-in providers odabirem Google.

Ovdje sada imam i Web Client ID koji će mi kasnije trebati unutar funkcije za prijavu.

SHA-1

Kako je i navedeno na slici iznad, moram kreirati SHA-1. Ovo radim na isti način kao i prilikom pripreme aplikacije za objavu na Google Play Store.

1	$ keytool -genkey -v -keystore IonicGooglePrijava.keystore -alias IonicGooglePrijava -keyalg RSA -keysize 2048 -validity 10000

Google sign-in is automatically configured on your connected iOS and web apps. To set up Google sign-in for your Android apps, you need to add the SHA1 fingerprint for each app on your Project Settings.

Sada imam IonicGooglePrijava.keystore datoteku koja je preduvjet za kreiranje SHA-1.

Kreiranje, produkcijskog, SHA-1 potpisa radi se sljedećom naredbom

1 2	keytool -exportcert -list -v \ -alias myalias -keystore IonicGooglePrijava.keystore

Kreiranje, dev, SHA-1 potpisa radi se sljedećom naredbom uz password android

1	$ keytool -exportcert -list -v -alias androiddebugkey -keystore ~/.android/debug.keystore

Pod Project settings – Your apps klikom na Add Firebase to your Android app radim pripremu za Android verziju Ionic aplikacije.

Ovdje unosim ranije kreiran SHA-1.

Implementacija Google prijave

Prije svega moram instalirati Ionic Native Google Plus plugin koristeći sljedeću naredbu

1 2	$ ionic cordova plugin add cordova-plugin-googleplus --variable REVERSED_CLIENT_ID=myreversedclientid $ npm install --save @ionic-native/google-plus

U ovom je koraku potreban REVERSED_CLIENT_ID kojega mogu dobiti ako posjetim https://console.developers.google.com/ te u izborniku s lijeve strane odaberem API Credentials. To je zapravo obrnuti Web Client ID com.googleusercontent.apps.xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxv-xxxxxxxxxxxx

Sada uvozim ranije instaliran plugin unutar app.module.ts

import { GooglePlus } from '@ionic-native/google-plus';

...

providers: [

StatusBar,

SplashScreen,

GooglePlus,

{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.

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 Google prijavu.

<ion-content padding>

<ion-row>

<ion-col col-12 text-center>

</ion-col>

</ion-row>

<ion-row padding>

<ion-col col-12 text-center>

</ion-col>

</ion-row>

</ion-content>

Funkcionalnost će se sastojati samo od funkcije za prijavu prijavaGoogle().

import { Component } from '@angular/core';

import { IonicPage, NavController, NavParams } from 'ionic-angular';

import { GooglePlus } from '@ionic-native/google-plus';

import { HomePage } from '../home/home';

@IonicPage()

@Component({

selector: 'page-prijava',

templateUrl: 'prijava.html',

})

export class PrijavaPage {

constructor(public _navCtrl: NavController,

public _navParams: NavParams,

public _googlePlus: GooglePlus) {

}

ionViewDidLoad() {

console.log('ionViewDidLoad PrijavaPage');

}

prijavaGoogle(){

this._googlePlus.login({

'webClientId': '551660638119-gik6rq06bojtil5f6jijl6aiapet2l6v.apps.googleusercontent.com'

}).then((res) => {

console.log(res);

localStorage.setItem('userEmail', res.email);

localStorage.setItem('userName', res.displayName);

localStorage.setItem('userImage', res.imageUrl);

this._navCtrl.setRoot(HomePage);

}, (err) => {

console.log(err);

});

}

console.log(res) izgleda ovako

Nakon uspješne prijave otvara se početna stranica HomePage na kojoj će se prikazati ime i prezime, slika i e-mail korisnika.

<ion-header>

<ion-navbar>

<ion-title>

Ionic3 - Google login/prijava

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<ion-list>

<ion-item>

<ion-avatar item-start>

</ion-avatar>

<p>{{email}}</p>

</ion-item>

</ion-list>

</ion-content>

Funkcionalnost HomePage stranice sastoji se od prikaza detalja o korisniku i funkcije za odjavu.

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

import { GooglePlus } from '@ionic-native/google-plus';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

email: string;

name: string;

image: string;

constructor(public _navCtrl: NavController,

public _googlePlus: GooglePlus) {

}

ionViewWillEnter(){

this.email = localStorage.getItem('userEmail');

this.name = localStorage.getItem('userName');

this.image = localStorage.getItem('userImage');

}

logout(){

this._googlePlus.logout().then(() => {

console.log("logged out");

this._navCtrl.setRoot('PrijavaPage');

});

}

Sve to na kraju izgleda ovako

Zaključak

U ovom sam blog postu pokazao kako na jednostavan i brz način ugraditi Google prijavu unutar Ionic aplikacije.

Struktura projekta prema package.json

{

"name": "IonicPrijavaG",

"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/google-plus": "^4.5.3",

"@ionic-native/splash-screen": "4.4.0",

"@ionic-native/status-bar": "4.4.0",

"@ionic/storage": "2.1.3",

"cordova-android": "7.0.0",

"cordova-plugin-device": "^2.0.1",

"cordova-plugin-googleplus": "^5.2.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": "Ionic3 - Google prijava/login",

"cordova": {

"plugins": {

"cordova-plugin-whitelist": {},

"cordova-plugin-device": {},

"cordova-plugin-splashscreen": {},

"cordova-plugin-ionic-webview": {},

"cordova-plugin-ionic-keyboard": {},

"cordova-plugin-googleplus": {

"REVERSED_CLIENT_ID": "com.googleusercontent.apps.xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-xxxxxxxxxxxx"

}

"platforms": [

"android"

]

}

Ionic 3 – Facebook prijava

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.

$ 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

</plugin>

Sada uvozim ranije instaliran plugin unutar app.module.ts

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.

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.

<ion-content padding>

<ion-row>

<ion-col col-12 text-center>

</ion-col>

</ion-row>

<ion-row padding>

<ion-col col-12 text-center>

</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.

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

<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>

</ion-col>

</ion-row>

</ion-content>

tj. od funkcije za odjavu.

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.

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

{

"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"

]

}

Ionic – automatska prijava u aplikaciju

Ovo je blog post o temi o kojoj se puno ne govori, ali koja se podrazumijeva za gotovo sve Ionic aplikacije koje sadržavaju ekran za prijavu.

Kada imate svoj API za prijavu ovo je jedan od načina kako korisnicima omogućiti automatsku prijavu u aplikaciju bez potrebe da svaki put prilikom pokretanja unose korisničko ime i lozinku. Znači, korisničko ime i lozinku trebaju upisati samo prvi put.

U nastavku možete vidjeti kako korisnicima omogućiti da ostanu prijavljeni u aplikaciju i nakon što se aplikacija zatvori.

Pretpostavka

Imate Ionic aplikaciju s ekranom za prijavu. Korisnik pokrene aplikaciju, pojavi se ekran za prijavu, korisnik unese korisničko ime i lozinku i nakon klika na gumb, pod uvjetom da je unio točne podatke, pojavi mu se početni ekran Ionic aplikacije.

Nakon nekog vremena korisnik ugasi aplikaciju i odloži mobilni uređaj. Kasnije ponovno želi pokrenuti Ionic aplikaciju i ponovno mora unositi korisničko ime i lozinku i tako svaki put.

Ako pretpostavimo da samo jedan korisnik koristi taj mobilni uređaj jasno je da takav način korištenja aplikacije nije najsretnije rješenje i da tom korisniku treba omogućiti jednostavniji i brži način prijave u aplikaciju tj. omogućiti korisniku da ostane prijavljen sve dok se sam ne odluči odjaviti.

localStorage kao rješenje

To ćemo postići koristeći localStorage.

Spremanje

Nakon što je korisnik uspješno prijavljen res.status == 'ok' spremit ćemo podatak o njegovom korisničkom imenu localStorage.setItem('username', res.username); u localStorage.

Znači taj se podatak sprema isključivo u slučaju kada je korisnik uspješno prijavljen i zato se možemo pouzdati u njega.

this.user.username = username;

this.user.password = password;

this._api.userLogin(this.user).subscribe(res => {

if(res.status == 'ok'){

//Spremanje podataka lokalno nakon uspješne prijave

localStorage.setItem('username', res.username);

this._navCtrl.setRoot(Dashboard);

} else {

this.loginFailed();

}

});

}

Korištenje

Prilikom svakog sljedećeg pokretanja aplikacije vršit će se provjera postoji li podatak o korisničkom imenu u lokalnoj memoriji localStorage.getItem('username') i pod uvjetom da postoji automatski se ulazi u aplikaciju i prikazuje početna stranica.

initializeApp() {

this._platform.ready().then(() => {

//Ostani prijavljen

if (localStorage.getItem('username')) {

this.nav.push(Dashboard);

this.nav.setRoot(Dashboard);

} else {

}

// Okay, so the platform is ready and our plugins are available.

// Here you can do any higher level native things you might need.

this._statusBar.styleDefault();

this._splashScreen.hide();

});

}

Brisanje

U slučaju da više korisnika koristi jedan mobilni uređaj omogućit ćemo brisanje podatka iz lokalne memorije prilikom odjave. Na taj se način nekom drugom korisniku omogućava da se samostalno prijavu u aplikaciju i ostane prijavljen sve dok se i on ne odluči odjaviti.

logout(){

localStorage.clear();

this.nav.setRoot(Login);

}