Arhiva Google Firebase - Tomislav Stanković

SMS login – Angular & Firebase

U nastavku ovog blog posta pokazati ću kako napraviti jednostavnu Angular web aplikaciju sa funkcionalnom SMS prijavom.

Prednosti korištenja SMS prijave:

– Sprečavanje lažnih korisnika – korištenjem SMS prijave onemogućava se kreiranje lažnih korisnika jer svaki korisnik koji se želi prijaviti treba imati jedinstveni broj telefona na koji će dobiti kod pomoću kojega će se prijaviti.
– Daje dodatnu vrijednost bazi korisnika – svaki potvrđeni korisnik koji stoji iza svakog od tih brojeva telefona predstavlja određenu vrijednost jer možemo biti sigurni da to nije lažni korisnik.
– Povećana sigurnost i poboljšava korisničko iskustvo – u današnje vrijeme korisnici koriste jako puno raznih aplikacija i postaje sve teže pratiti login podatke svake od njih. Omogućavanjem SMS prijave korisnik ne mora smišljati novo korisničko ime ili lozinku nego je samo dovoljno da uz sebe ima svoj mobitel kako bi se uspješno prijavio. Također, treća strana se ne može prijaviti kao npr. ja ako uz sebe nema moj mobilni telefon da pročita kod čime se drastično povećava sigurnost.

Kreiranje projekta

Kreiram novi Angular web projekt koristeći Angular CLI.

$ ng new angular-firebase-sms-login
$ cd angular-firebase-sms-login

1 2	$ ng new angular-firebase-sms-login $ cd angular-firebase-sms-login

Google Firebase

Nakon što sam kreirao Angular projekt mogu se prebaciti na Google Firebase i ondje postaviti projekt kako bi uopće mogao koristiti SMS login.

Kroz nekoliko sekundi Firebase projekt će biti spreman.

Unutar izbornika Develop – Authentication potrebno je odabrati Sign-in-method tab. Ondje se nalazi popis opcija dostupnih za login/prijavu.

Ja ću, naravno, ovaj put odabrati Phone.

Allow users to sign in with a mobile phone number, using Firebase SDK phone verification and user authentication tools.

Phone tj. SMS prijava je aktivirana.

Ako sada u izborniku Authentication – Users pogledam popis korisnika on će biti prazan jer za sada još nisam napravio niti jednu prijavu. Nakon što se sa bilo kojim brojem mobitela prvi put prijavim taj će se broj prikazati kao novi korisnik.

Prema trenutnim postavkama moj će projekt raditi ako web aplikaciju pokrenem na adresi http://localhost:4200/.

Međutim ako imam neku (pod)domenu kao npr. test.angularaplikacija.com ondje prijava putem SMS-a neće raditi dok ručno ne odobrim tu (pod)domenu.

To use Firebase Authentication in a web app, you must whitelist the domains that the Firebase Authentication servers can redirect to after signing in a user.

By default, localhost and your Firebase project’s hosting domain are whitelisted. You must whitelist the full domain names of any other of your web app’s hosts. Note: whitelisting a domain allows for requests from any URL and port of that domain.

Prije nego se vratim svojem Angular projektu trebaju mi još neki podaci bez kojih moj Angular projekt ne bi znao kako se povezati s Firebaseom.

Ovdje idem na Project settings.

Nakon toga idem na Add Firebase to your web app.

I konačno, ovdje imam konfiguracijski config objekt koju ću kasnije postaviti u svoj Angular projekt i tako ga povezati sa Firebaseom.

Implementacija prijave/logina

Sada se vraćam u svoj Angular projekt.

AppComponent ću malo prilagoditi tj. dodati joj nekoliko detalja kojih trenutno nema.

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

@Injectable()
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {

  title = 'angular-firebase-sms-login';

  constructor() {
  }

  ngOnInit() {
  }

}

import { Component,

OnInit,

Injectable } from '@angular/core';

@Injectable()

@Component({

selector: 'app-root',

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

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

})

export class AppComponent implements OnInit {

title = 'angular-firebase-sms-login';

constructor() {

}

ngOnInit() {

}

Trebat će mi window objekt pa ću napraviti servis za njega kako bi ga mogao pozivati u cijelog projektu sa jednog mjesta.

$ ng g service window

1	$ ng g service window

U servisu se nalazi sljedeće:

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

@Injectable()
export class WindowService {

  get windowRef() {
    return window
  }

}

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

@Injectable()

export class WindowService {

get windowRef() {

return window

}

Sada sam spreman za dodavanje Firebasea unutar projekta, a to radim naredbama:

$ npm install --save firebase
$ npm install angularfire2 firebase --save

1 2	$ npm install --save firebase $ npm install angularfire2 firebase --save

Sada sve to trebam navesti unutar app.module.ts datoteke. Ovdje moram uvesti FormsModule zato što ću u login formi koristiti [(ngModel)].

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

import { AppComponent } from './app.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { FormsModule } from '@angular/forms';

import { AngularFireModule } from 'angularfire2';
import { AngularFireAuthModule } from 'angularfire2/auth';

export const firebaseConfig = {
  apiKey: "***************************************",
  authDomain: "angular-firebase-sms-login.firebaseapp.com",
  databaseURL: "https://angular-firebase-sms-login.firebaseio.com",
  projectId: "angular-firebase-sms-login",
  storageBucket: "angular-firebase-sms-login.appspot.com",
  messagingSenderId: "************"
};

@NgModule({
  declarations: [
    AppComponent,
    DashboardComponent
  ],
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireAuthModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

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

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

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

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

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

import { AngularFireModule } from 'angularfire2';

import { AngularFireAuthModule } from 'angularfire2/auth';

export const firebaseConfig = {

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

authDomain: "angular-firebase-sms-login.firebaseapp.com",

databaseURL: "https://angular-firebase-sms-login.firebaseio.com",

projectId: "angular-firebase-sms-login",

storageBucket: "angular-firebase-sms-login.appspot.com",

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

};

@NgModule({

declarations: [

AppComponent,

DashboardComponent

imports: [

BrowserModule,

AngularFireModule.initializeApp(firebaseConfig),

AngularFireAuthModule,

FormsModule

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

Na ekranu će to izgledati ovako:

<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
   
  <div [hidden]="user" style="text-align:center">
    <label for="phone">Broj mobitela:</label><br>
    <input type="text" [(ngModel)]="phoneNumber.country" class="input" placeholder="+385"  maxlength="4">
    <input type="text" [(ngModel)]="phoneNumber.line"  class="input" placeholder="9********" maxlength="9">
  
    <div id="recaptcha-container"></div>
  
    <button (click)="sendLoginCode()">Pošalji SMS</button>
  
    <div *ngIf="windowRef.confirmationResult">
      <hr>
      <label for="code">Ovdje unesite svoj pin</label><br>
      <input type="text" name="code" [(ngModel)]="verificationCode">
  
      <button (click)="verifyLoginCode()">Potvrdi</button>
    </div>
  </div>

  <div *ngIf="user">
    <p>Prijava uspješna!</p>
    <p>UserId: {{ user?.uid }}</p>
  </div>

</div>

<h1>

Welcome to {{ title }}!

</h1>

<label for="phone">Broj mobitela:</label><br>

<button (click)="sendLoginCode()">Pošalji SMS</button>

<hr>

<label for="code">Ovdje unesite svoj pin</label><br>

<button (click)="verifyLoginCode()">Potvrdi</button>

</div>

<p>Prijava uspješna!</p>

<p>UserId: {{ user?.uid }}</p>

</div>

Funkcionalnost se može vidjeti u nastavku, a sastoji se od nekoliko funkcija. Osnova svega je broj mobitela koji je u E.164 obliku.

import { Component, OnInit, Injectable } from '@angular/core';
import { WindowService } from './window.service';

import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app';

export class PhoneNumber {
  country: string = "+385";
  line: string;
  get e164() {
    const num = this.country + this.line
    return `+${num}`
  }
}

@Injectable()
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [WindowService]
})
export class AppComponent implements OnInit {
  
  title = 'Angular Firebase SMS Login';

  windowRef: any;
  phoneNumber = new PhoneNumber()
  verificationCode: string;
  user: any; 

  constructor(
    private win: WindowService,
    public _angularAuth: AngularFireAuth) {
  }

  ngOnInit() {
    this.windowRef = this.win.windowRef;
    this.windowRef.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container')
    this.windowRef.recaptchaVerifier.render();
  }

  sendLoginCode() {
    const appVerifier = this.windowRef.recaptchaVerifier;
    const num = this.phoneNumber.e164;
    firebase.auth().signInWithPhoneNumber(num, appVerifier)
            .then(result => {
                this.windowRef.confirmationResult = result;
            })
            .catch( error => console.log(error) );
  }

  verifyLoginCode() {
    this.windowRef.confirmationResult
                  .confirm(this.verificationCode)
                  .then( result => {
                    this.user = result.user;
                    console.log(this.user);
    })
    .catch( error => console.log(error, "Pogrešan kod?"));
  } 

}

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

import { WindowService } from './window.service';

import { AngularFireAuth } from 'angularfire2/auth';

import * as firebase from 'firebase/app';

export class PhoneNumber {

country: string = "+385";

line: string;

get e164() {

const num = this.country + this.line

return `+${num}`

}

@Injectable()

@Component({

selector: 'app-root',

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

styleUrls: ['./app.component.css'],

providers: [WindowService]

})

export class AppComponent implements OnInit {

title = 'Angular Firebase SMS Login';

windowRef: any;

phoneNumber = new PhoneNumber()

verificationCode: string;

user: any;

constructor(

private win: WindowService,

public _angularAuth: AngularFireAuth) {

}

ngOnInit() {

this.windowRef = this.win.windowRef;

this.windowRef.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container')

this.windowRef.recaptchaVerifier.render();

}

sendLoginCode() {

const appVerifier = this.windowRef.recaptchaVerifier;

const num = this.phoneNumber.e164;

firebase.auth().signInWithPhoneNumber(num, appVerifier)

.then(result => {

this.windowRef.confirmationResult = result;

})

.catch( error => console.log(error) );

}

verifyLoginCode() {

this.windowRef.confirmationResult

.confirm(this.verificationCode)

.then( result => {

this.user = result.user;

console.log(this.user);

})

.catch( error => console.log(error, "Pogrešan kod?"));

}

U praksi to izgleda ovako:

Klikom na “Pošalji SMS” šalje se SMS poruka na uneseni broj mobitela.

Nakon unosa koda iz SMS-a uspješno se prijavljujem.

U slučaju da se idem nekoliko puta za redom prijaviti i Google Firebase posumnja na zloupotrebu pojavit će se napredna reCAPTCHA.

Firebase Phone Authentication With Angular 4 Tutorial — Izvor: https://angularfirebase.com/lessons/firebase-phone-authentication-with-angular-4-tutorial/

Tek sada, nakon što je prijava uspješno prošla, mogu svoj broj mobitela vidjeti unutar Google Firebase sučelja.

Zaključak

Ovo je bio primjer jednostavne Angular web aplikacije sa SMS prijavom gdje se sva logika odvija na klijentskoj strani. Nedavno sam napravio i verziju gdje se sva logika odvija na serverskoj strani unutar NodeJS-a sa dodatnim sigurnosnim provjerama. Bilo bi previše za ovaj blog post da sam išao i taj dio obraditi. Možda u nekom od sljedećih blog postova, ako netko od posjetitelja bloga bude zainteresiran.

Osim SMS prijave obradio sam nekoliko tema s ostalim vrstama prijave kao što su:
– Angular & Firebase – registracija i prijava
– Ionic 3 – Google login/prijava
– Ionic 3 – Facebook prijava
– Ionic 3 – Firebase registracija i prijava

Struktura projekta prema package.json

{
  "name": "angular-firebase-sms-login",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~7.1.0",
    "@angular/common": "~7.1.0",
    "@angular/compiler": "~7.1.0",
    "@angular/core": "~7.1.0",
    "@angular/forms": "~7.1.0",
    "@angular/platform-browser": "~7.1.0",
    "@angular/platform-browser-dynamic": "~7.1.0",
    "@angular/router": "~7.1.0",
    "angularfire2": "^5.1.1",
    "core-js": "^2.5.4",
    "firebase": "^5.7.2",
    "rxjs": "~6.3.3",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.11.0",
    "@angular/cli": "~7.1.4",
    "@angular/compiler-cli": "~7.1.0",
    "@angular/language-service": "~7.1.0",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.1.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.1.6"
  }
}

{

"name": "angular-firebase-sms-login",

"version": "0.0.0",

"scripts": {

"ng": "ng",

"start": "ng serve",

"build": "ng build",

"test": "ng test",

"lint": "ng lint",

"e2e": "ng e2e"

"private": true,

"dependencies": {

"@angular/animations": "~7.1.0",

"@angular/common": "~7.1.0",

"@angular/compiler": "~7.1.0",

"@angular/core": "~7.1.0",

"@angular/forms": "~7.1.0",

"@angular/platform-browser": "~7.1.0",

"@angular/platform-browser-dynamic": "~7.1.0",

"@angular/router": "~7.1.0",

"angularfire2": "^5.1.1",

"core-js": "^2.5.4",

"firebase": "^5.7.2",

"rxjs": "~6.3.3",

"tslib": "^1.9.0",

"zone.js": "~0.8.26"

"devDependencies": {

"@angular-devkit/build-angular": "~0.11.0",

"@angular/cli": "~7.1.4",

"@angular/compiler-cli": "~7.1.0",

"@angular/language-service": "~7.1.0",

"@types/node": "~8.9.4",

"@types/jasmine": "~2.8.8",

"@types/jasminewd2": "~2.0.3",

"codelyzer": "~4.5.0",

"jasmine-core": "~2.99.1",

"jasmine-spec-reporter": "~4.2.1",

"karma": "~3.1.1",

"karma-chrome-launcher": "~2.2.0",

"karma-coverage-istanbul-reporter": "~2.0.1",

"karma-jasmine": "~1.1.2",

"karma-jasmine-html-reporter": "^0.2.2",

"protractor": "~5.4.0",

"ts-node": "~7.0.0",

"tslint": "~5.11.0",

"typescript": "~3.1.6"

}

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.

$ ng new AngularWebFirebase
$ cd AngularWebFirebase

1 2	$ ng new AngularWebFirebase $ cd AngularWebFirebase

Sljedećom naredbom instaliram potreban NPM paket

$ npm install angularfire2 firebase --save

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

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

$ 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);

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
  ],
...

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.

<div class="form-container">
  <img src="assets/images/login.png" id="login">

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

<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;
    });
  }

}

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.

<div class="form-container">
  <a routerLink="/login" id="goback">Go back</a>

  <h2>Registration</h2>

  <span class="error" *ngIf="error">{{ error }}</span>
    
  <form #formData='ngForm' (ngSubmit)="onSubmit(formData)">

    <input type="text" placeholder="E-mail" (ngModel)="email" name="email" class="txt" required>
    <input type="password" placeholder="Password" (ngModel)="password" name="password" class="txt" required>


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

<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;
      });
    }
  }

}

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.

<div class="form-container">
  <a routerLink="/login" id="goback">Go back</a>
  <h2>E-mail Login</h2>

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

  <form #formData='ngForm' (ngSubmit)="onSubmit(formData)">

    <input type="text" placeholder="E-mail" (ngModel)="email" name="email" class="txt" required>
    <input type="password" placeholder="Password" (ngModel)="password" name="password" class="txt" required>

    <button type="submit" [disabled]="!formData.valid" class="basic-btn">Log in</button>
    <a routerLink="/signup" class="alc">Don't have an account?</a>
</form>
</div>

<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;
    });
  }

}

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.

<div class="form-container" id="toolbar">
  <header>
    <button (click)="logout()" class="basic-btn">Logout</button>
  </header>
  <div id="page">
    <h2 *ngIf="name">Hey {{name}}!</h2>
    <h6 *ngIf="email">{{email}}</h6>
    <img *ngIf="picture" src="{{picture}}"/>

  </div>
  
</div>

<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');
   }
 }


}

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 – Firebase registracija i prijava

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

$ npm install firebase angularfire2 --save

1	$ npm install firebase angularfire2 --save

I nakon toga, kao što vam je i poznato, trebamo ih uvesti u app.module.ts

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

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

$ ionic generate page Prijava 
$ ionic generate page Registracija

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.

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();
    });
  }
}

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 .

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

<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

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);
  }

}

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.

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

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

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');
  }

}

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.

Node.js API za slanje Push notifikacija

U ovom ćemo blog postu napraviti Node.js API za slanje Push notifikacija. Ovaj API je samo jedan dio svega onoga što je potrebno zadovoljiti kako bi se push notifikacije mogle uspješno slati/primati i biti će zapravo nadogradnja prethodnog Node.js API-ja za upload datoteka.

Proces slanja push notifikacija:

Treba nam servis koji će stajati između API-ja i mobilne aplikacije. U ovom slučaju to je Google Firebase.
Treba nam jedinstveni token mobilne aplikacije tj. uređaja kako bi API znao kome poslati push notifikaciju. Kreiranje jedinstvenog tokena odvija se u samoj mobilnoj aplikaciji i to neće biti pokriveno ovim blog postom.
Treba nam API koji će na osnovu zahtjeva skupiti sve tokene i poslati im push notifikaciju. Za to ćemo koristiti node-gcm NPM paket.

U nekom od sljedećih blog postova napravit ćemo primjer Ionic aplikacije koja će koristiti ovaj API tj. koja će zapravo primati push notifikacije.

Google Firebase

Google Firebase ćemo koristiti kao servis koji će stajati između mobilne aplikacije i Node.js API-ja. Na adresi https://console.firebase.google.com/ potrebno je napraviti novi projekt s nazivom mobilne aplikacije koja će API koristiti.

Server key će nam trebati u server.js kako bi naš API znao s kojim servisom će komunicirati.

Osim toga potrebno je još dodati podršku za konkretne platforme na kojima će se temeljiti mobilna aplikacija jer svaka platforma ima svoje specifičnosti. S obzirom da je Ionic framework za izradu hibridnih mobilnih aplikacija mi ćemo odmah kreirati podršku za iOS i Android platforme.

Priprema za Android platformu

Priprema za iOS platformu

Što se Google Firebasea tiče to je za sada to. Njemu ćemo se vratiti kada budemo radili mobilnu aplikaciju jer će nam trebati još neki podaci.

Testni push.js

Sada ćemo napraviti testni push.js s kojim ćemo isprobati radi li uopće naš API i hoće li push notifikacija stići na mobilni uređaj.

Prvo moramo instalirati https://www.npmjs.com/package/node-gcm pomoću naredbe $ npm install node-gcm --save.

gcmApiKey je zapravo server key koji imamo unutar Google Firebase sučelja, ali ovdje nam treba i jedinstveni token uređaja, a njega dobijemo unutar mobilne aplikacije. Kako dobiti taj token neću prikazati u ovom blog postu nego u nekom od sljedećih. Uglavnom, na slici se vidi token uređaja.

Njega dobijemo na način da buildamo aplikaciju na mobilni uređaj i unutar chrome://inspect/#devices otvorimo konzolu iz koje kopiramo token koji onda zalijepimo u push.js

Sada imamo sve potrebno unutar push.js kako bi testirali API.

var express = require('express');
var gcm = require('node-gcm');
var app = express();
var gcmApiKey = 'xxxxxxxxxxx:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-xxxxxxxxxx--xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-xxxxxxxxxxxxxxxxxxx-xxxxxxxxxxxxxxxxxxxx-xx'; // Server key iz https://console.firebase.google.com/

var server = app.listen(3001, function () {
    console.log('Pokrenut testni push API server!');
});

app.get('/', function (req, res) {
    res.send("Defaultna ruta");
});

app.get('/push', function (req, res) {
    var device_tokens = []; // array jedinstvenih tokena uređaja
    var retry_times = 4; // broj puta koliko će se push notifikacija pokušati poslati ako ne uspije prvi put
    var sender = new gcm.Sender(gcmApiKey); // pošiljatelj
    var message = new gcm.Message(); // nova poruka
    message.addData('title', 'Naslov');
    message.addData('message', "Sadržaj push notifikacije");
    message.addData('sound', 'default');
    message.collapseKey = 'Testing Push'; // grupa push notifikacija
    message.delayWhileIdle = true; //odgoditi slanje push notifikacije ako je uređaj offline
    message.timeToLive = 3; //broj sekundi koliko push notifikaciju držati na serveru ako je uređaj offline
    device_tokens[0] = "cscMv3QlzAA:APA91bFU8OQRe1Dkja-Oq3krC1fQrMV0HU8AnjLjOhbTjqbwT4ljqt2rgMpK3gt1kpPqs-8ibELSxIY4QKN7EZvdznRoRP_oSXHW1saRxqW2AziuPJ9OK8jfwli1kIm01veCyEtkRFG9"; //jedinstveni token uređaja
    sender.send(message, device_tokens[0], retry_times, function (result) {
        console.log('Push poslan na: ' + device_tokens);
        res.status(200).send('Push notifikacija poslana na uređaj: ' + device_tokens);
    }, function (err) {
        res.status(500).send('Neuspješno poslana push notifikacija');
    });
});

var express = require('express');

var gcm = require('node-gcm');

var app = express();

var gcmApiKey = 'xxxxxxxxxxx:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-xxxxxxxxxx--xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-xxxxxxxxxxxxxxxxxxx-xxxxxxxxxxxxxxxxxxxx-xx'; // Server key iz https://console.firebase.google.com/

var server = app.listen(3001, function () {

console.log('Pokrenut testni push API server!');

});

app.get('/', function (req, res) {

res.send("Defaultna ruta");

});

app.get('/push', function (req, res) {

var device_tokens = []; // array jedinstvenih tokena uređaja

var retry_times = 4; // broj puta koliko će se push notifikacija pokušati poslati ako ne uspije prvi put

var sender = new gcm.Sender(gcmApiKey); // pošiljatelj

var message = new gcm.Message(); // nova poruka

message.addData('title', 'Naslov');

message.addData('message', "Sadržaj push notifikacije");

message.addData('sound', 'default');

message.collapseKey = 'Testing Push'; // grupa push notifikacija

message.delayWhileIdle = true; //odgoditi slanje push notifikacije ako je uređaj offline

message.timeToLive = 3; //broj sekundi koliko push notifikaciju držati na serveru ako je uređaj offline

device_tokens[0] = "cscMv3QlzAA:APA91bFU8OQRe1Dkja-Oq3krC1fQrMV0HU8AnjLjOhbTjqbwT4ljqt2rgMpK3gt1kpPqs-8ibELSxIY4QKN7EZvdznRoRP_oSXHW1saRxqW2AziuPJ9OK8jfwli1kIm01veCyEtkRFG9"; //jedinstveni token uređaja

sender.send(message, device_tokens[0], retry_times, function (result) {

console.log('Push poslan na: ' + device_tokens);

res.status(200).send('Push notifikacija poslana na uređaj: ' + device_tokens);

}, function (err) {

res.status(500).send('Neuspješno poslana push notifikacija');

});

Ako sada pokrenemo $ node push.js i odemo na putanju http://localhost:3001/push

možemo vidjeti da je push notifikacija uspješno stigla na mobilni uređaj

Gledajući prema ovom primjeru ispada da nam svaki korisnik mobilne aplikacije treba poslati svoj jedinstveni token uređaja kako bi ga mi ručno upisali u push.js i kako bi mogli tom korisniku poslati push notifikaciju. Naravno da to nema smisla i da je ovo služilo samo za test. U produkcijskoj verziji API-ja potrebno je automatizirati čitav proces i napraviti automatsku registraciju jedinstvenog tokena, slanje tokena u bazu podataka pa će API slati push notifikacije prema svim uređajima čije tokene ima spremljene u bazu.

Nadogradnja MySQL baze

Napravit ćemo novu tablicu naziva device unutar MySQL baze u koju ćemo spremati sve tokene, a koji će u bazu biti poslani čim se mobilna aplikacija pokrene.

server.js nadogradnja

Sada ćemo nadograditi prethodno napravljen API za upload datoteka koji će odmah prilikom dodavanja novog korisnika poslati push notifikaciju o dodanom korisniku.

Pomoću naredbe $ npm install node-gcm ćemo instalirati https://www.npmjs.com/package/node-gcm i na vrh datoteke dodati:

var gcm = require('node-gcm');
var gcmApiKey = 'xxxxxxxxxxx:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-xxxxxxxxxx--xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-xxxxxxxxxxxxxxxxxxx-xxxxxxxxxxxxxxxxxxxx-xx';

1 2	var gcm = require('node-gcm'); var gcmApiKey = 'xxxxxxxxxxx:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-xxxxxxxxxx--xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-xxxxxxxxxxxxxxxxxxx-xxxxxxxxxxxxxxxxxxxx-xx';

Sada kada imamo spremnu novu tablicu u bazi možemo napraviti API koji će iz mobilne aplikacije primati jedinstvene tokene.

apiRoutes.post('/device-token', function (req, res, next) {

   console.log(req.body);
   
   var token = req.body.token;
   console.log(token);

   pool.getConnection(function(err, connection) {
 
        if (err) {
            console.error("Dogodila se greška: " + err);
        }
            
			var uredjaj = { 
            dev_token: token  
            };   

            connection.query('INSERT INTO device SET ?', uredjaj,
            function(err, rows) {
                if (err) {
                    throw err;
                } else {
                    var result = {
                        success: true,
                        detail: rows
                    }
                }
            });
    }); 
})

apiRoutes.post('/device-token', function (req, res, next) {

console.log(req.body);

var token = req.body.token;

console.log(token);

pool.getConnection(function(err, connection) {

if (err) {

console.error("Dogodila se greška: " + err);

}

var uredjaj = {

dev_token: token

};

connection.query('INSERT INTO device SET ?', uredjaj,

function(err, rows) {

if (err) {

throw err;

} else {

var result = {

success: true,

detail: rows

}

});

})

Sada možemo nadograditi i drugi dio API-ja koji služi za dodavanje korisnika.

//Dodavanje korisnika
apiRoutes.post('/dodajkorisnika', upload.any(),function (req, res, next) {

  console.log(req.body);
  console.log(req.files);

   pool.getConnection(function(err, connection) {
 
        if (err) {
            console.error("Dogodila se greška: " + err);
        }

            var korisnik = { 
            k_ime: req.body.ime,
            k_prezime: req.body.prezime,
            k_slika: req.files[0].destination + "/" + req.files[0].filename,  
	    k_dokument: req.files[1].destination + "/" + req.files[1].filename  
            };      
			
        //SELECT svih tokena i slanje push notifikacije
        pool.getConnection(function(err, connection) {
 
        if (err) {
            console.error("Dogodila se greška: " + err);
        }
       var query = "SELECT * FROM device ORDER BY iddevice ASC";
        query = mysql.format(query);
        connection.query(query,function(err,rows){
           connection.release();
            if (err) {               
               return next(err);
            } else {
                 var SviTokeni = [];
                 rows.forEach(function(a) {
                        var jedanToken = {
                             dev_token: a.dev_token
                            }
                            SviTokeni.push(jedanToken.dev_token);
                        });
            //Push
            var device_tokens = SviTokeni; // array jedinstvenih tokena uređaja
    var retry_times = 4; // broj puta koliko će se push notifikacija pokušati poslati ako ne uspije prvi put
    var sender = new gcm.Sender(gcmApiKey); // pošiljatelj
    var message = new gcm.Message(); // nova poruka
    message.addData('title', 'Dodan novi korisnik:');
    message.addData('message', korisnik.k_ime + ' ' + korisnik.k_prezime);
    message.addData('sound', 'default');
    message.collapseKey = 'Testing Push'; // grupa push notifikacija
    message.delayWhileIdle = true; //odgoditi slanje push notifikacije ako je uređaj offline
    message.timeToLive = 3; //broj sekundi koliko push notifikaciju držati na serveru ako je uređaj offline
    sender.send(message, device_tokens, retry_times, function (result) {
        console.log('Push poslan na: ' + device_tokens);
       res.status(200).send('Push notifikacija poslana na uređaj: ' + device_tokens);
    }, function (err) {
       res.status(500).send('Neuspješno poslana push notifikacija');
    });
            }
        });  
    })
			
            connection.query('INSERT INTO korisnik SET ?', korisnik,
            function(err, rows) {
                if (err) {
                    throw err;
                } else {
		    res.json("Uspješno dodan korisnik!");
                    res.end();
                }
                connection.release();
            });
    });
})

//Dodavanje korisnika

apiRoutes.post('/dodajkorisnika', upload.any(),function (req, res, next) {

console.log(req.body);

console.log(req.files);

pool.getConnection(function(err, connection) {

if (err) {

console.error("Dogodila se greška: " + err);

}

var korisnik = {

k_ime: req.body.ime,

k_prezime: req.body.prezime,

k_slika: req.files[0].destination + "/" + req.files[0].filename,

k_dokument: req.files[1].destination + "/" + req.files[1].filename

};

//SELECT svih tokena i slanje push notifikacije

pool.getConnection(function(err, connection) {

if (err) {

console.error("Dogodila se greška: " + err);

}

var query = "SELECT * FROM device ORDER BY iddevice ASC";

query = mysql.format(query);

connection.query(query,function(err,rows){

connection.release();

if (err) {

return next(err);

} else {

var SviTokeni = [];

rows.forEach(function(a) {

var jedanToken = {

dev_token: a.dev_token

}

SviTokeni.push(jedanToken.dev_token);

});

//Push

var device_tokens = SviTokeni; // array jedinstvenih tokena uređaja

var retry_times = 4; // broj puta koliko će se push notifikacija pokušati poslati ako ne uspije prvi put

var sender = new gcm.Sender(gcmApiKey); // pošiljatelj

var message = new gcm.Message(); // nova poruka

message.addData('title', 'Dodan novi korisnik:');

message.addData('message', korisnik.k_ime + ' ' + korisnik.k_prezime);

message.addData('sound', 'default');

message.collapseKey = 'Testing Push'; // grupa push notifikacija

message.delayWhileIdle = true; //odgoditi slanje push notifikacije ako je uređaj offline

message.timeToLive = 3; //broj sekundi koliko push notifikaciju držati na serveru ako je uređaj offline

sender.send(message, device_tokens, retry_times, function (result) {

console.log('Push poslan na: ' + device_tokens);

res.status(200).send('Push notifikacija poslana na uređaj: ' + device_tokens);

}, function (err) {

res.status(500).send('Neuspješno poslana push notifikacija');

});

}

});

})

connection.query('INSERT INTO korisnik SET ?', korisnik,

function(err, rows) {

if (err) {

throw err;

} else {

res.json("Uspješno dodan korisnik!");

res.end();

}

connection.release();

});

})

U ovom slučaju tijelo poruke message sastojat će se od korisnik.k_ime i korisnik.k_prezime.

Iz sljedeće se animacije vidi da smo dodali novog korisnika Tomislav Stanković.

Istovremeno s dodavanjem korisnika korisnicima mobilne aplikacije stigla je sljedeća push notifikacija.

Zaključak

I to je to! Napravili smo funkcionalan API za slanje push notifikacija. Još ostaje za napraviti iOS i Android mobilnu aplikaciju koja će automatski slati token uređaja u MySQL bazu i koja će primati push notifikacije, ali o tome će više riječi biti u nekom od sljedećih blog postova jer bi ovaj bio previše dug ako bi se htjelo sve detaljno obraditi.

Posjetite GitHub i preuzmite projekt.