Arhiva prijava - Tomislav Stanković

Ionic & Facebook login/prijava – Invalid key hash

U blog postu pod naslovom “Ionic 3 – Facebook prijava” pokazao sam kako omogućiti Facebook login/prijavu unutar Ionic aplikacije.

Primjer iz tog blog posta uredno radi u razvojnoj verziji mobilne aplikacije tj. prilikom testiranja, ali kada se aplikacija jednom stavi u produkciju tj. na Google Play Store može se dogoditi da login/prijava više ne radi bez nekog očitog razloga i jedina greška koju je moguće vidjeti je:

Invalid key hash. The key hash **************************** does not match any stored key hashes. Configure your app key hashes at https://developers.facebook.com/apps/appid

facebook for developers

Rješenje je u biti vrlo jednostavno što se zaključiti prema zadnjoj rečenici poruke o grešci. Potrebno je otići na https://developers.facebook.com/ tj. na adresu profila aplikacije https://developers.facebook.com/apps/appid/ te pod Settings – Basic – Android – Key Hashes kopirati hash key iz poruke o grešci.

Nakon ovoga će login/prijava ponovno raditi bez ikakvih problema.

Ionic & Google Firebase login/prijava – Error Code 10

U blog postu pod naslovom “Ionic 3 – Google login/prijava” pokazao sam kako omogućiti Google login/prijavu unutar Ionic aplikacije.

Primjer iz tog blog posta uredno radi u razvojnoj verziji mobilne aplikacije tj. prilikom testiranja, ali kada se aplikacija jednom stavi na Google Play Store može se dogoditi da login/prijava više ne radi bez nekog očitog razloga i jedina greška koju je moguće vidjeti je “10”.

Google Play Store – Error Code 10

Kako bi se ova greška riješila potrebno je napraviti sljedeće:

1.) Na adresi https://play.google.com/apps/publish/ pronaći aplikaciju u kojoj prijava ne radi, omogućiti “App Signing by Google Play” i onda u izborniku s lijeve strane kliknuti na Release management – App signing te kopirati SHA-1 certificate fingerprint.

2.) Na adresi https://console.firebase.google.com/project/naziv-projekta/ otići na Project settings – SHA certificate fingerprints i kliknuti na Add fingerprint te ovdje zalijepiti ranije kopiran SHA-1 ključ.

Nakon ovoga login/prijava će ponovno raditi bez ikakvih problema.

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

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

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

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

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

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

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

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

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

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

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/, u izborniku s lijeve strane odaberem API Credentials ili pronaći unutar GoogleService-Info.plist datoteke. To je zapravo obrnuti Web Client ID com.googleusercontent.apps.xxxxxxxxxxxx-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxv

Sada uvozim ranije instaliran plugin unutar app.module.ts

import { GooglePlus } from '@ionic-native/google-plus';
...
providers: [
    StatusBar,
    SplashScreen,
    GooglePlus,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]

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.

$ ionic generate page Prijava

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

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>
            <img src="assets/imgs/logo.png" alt="Ionic logo" width="250" height="auto">
          </ion-col>
      </ion-row>
            <ion-row padding>
                <ion-col col-12 text-center>
                    <img (click)="prijavaGoogle()" src="assets/imgs/google-button.png" alt="Google logo">
                </ion-col>
              </ion-row>
</ion-content>

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

}

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>
        <img src="{{image}}">
      </ion-avatar>
      <h2>{{name}}</h2>
      <p>{{email}}</p>
    </ion-item>
  </ion-list>
</ion-content>

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

}

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

{

"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

$ 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

$ ionic cordova plugin add cordova-plugin-facebook4 --variable APP_ID="1986093454936515" --variable APP_NAME="IonicPrijavaF"
$ npm install --save @ionic-native/facebook

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 name="cordova-plugin-facebook4" spec="^1.9.1">
        <variable name="APP_ID" value="1986093454936515" />
        <variable name="APP_NAME" value="IonicPrijavaF" />
 </plugin>

</plugin>

Sada uvozim ranije instaliran plugin unutar app.module.ts

import { Facebook } from '@ionic-native/facebook';
...
providers: [
    StatusBar,
    SplashScreen,
    Facebook,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]

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.

$ ionic generate page Prijava

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

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>
            <img src="assets/imgs/logo.png" alt="Ionic logo" width="250" height="auto">
          </ion-col>
      </ion-row>
            <ion-row padding>
                <ion-col col-12 text-center>
                    <img (click)="prijavaFb()" src="assets/imgs/facebook-button.png" alt="Facebook logo">
                </ion-col>
              </ion-row>
</ion-content>

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

}

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>
        <img (click)="odjavaFb()" src="assets/imgs/facebook-logout.png" alt="Facebook logo">
    </ion-col>
  </ion-row>
</ion-content>

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

}

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

}

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

{

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

]

}