{"id":7184,"date":"2018-03-18T18:21:27","date_gmt":"2018-03-18T16:21:27","guid":{"rendered":"https:\/\/www.tomislavstankovic.com\/blog\/?p=7184"},"modified":"2019-01-05T19:49:43","modified_gmt":"2019-01-05T17:49:43","slug":"angular-firebase-registracija-prijava","status":"publish","type":"post","link":"https:\/\/www.tomislavstankovic.com\/blog\/angular-firebase-registracija-prijava\/","title":{"rendered":"Angular & Firebase – registracija i prijava"},"content":{"rendered":"

U ovom \u0107u blog postu napraviti primjer Angular<\/em> web aplikacije koja \u0107e se sastojati od nekoliko ekrana. Glavna svrha ove web aplikacije je omogu\u0107iti korisnicima da se registriraju tj. prijave kako bi ju mogli koristiti. To \u0107e mo\u0107i u\u010diniti koriste\u0107i e-mail<\/em>, Google<\/em> ili Facebook<\/em> korisni\u010dki ra\u010dun. <\/p>\n

Nekoliko sam blog<\/a> postova<\/a> ve\u0107 objavio<\/a> na ovu temu, ali svi su bili vezani uz Ionic Framework<\/a><\/em>. Iako je Ionic<\/em> temeljen na Angularu<\/em> shva\u0107am da osobama koje se tek susre\u0107u sa ovim mo\u017ee biti te\u017ee napraviti Angular<\/em> projekt prou\u010davaju\u0107i Ionic<\/em> sintaksu<\/a>. Zato ovaj put radim \u010disti Angular<\/em> web projekt.<\/p>\n

Postavljanje Firebase projekta<\/h2>\n

Na adresi https:\/\/console.firebase.google.com\/<\/a> kreiram novi Firebase<\/em> projekt pod nazivom ‘AngularWebFirebase’.<\/p>\n

\"Angular<\/a><\/p>\n

Na sljede\u0107em ekranu, klikom na ‘Add Firebase to your web app<\/em>‘ dobijem objekt koji \u0107e mi biti potreban kako bi sve funkcioniralo. Taj \u0107u objekt kasnije ugraditi unutar app.module.ts<\/strong> datoteke.<\/p>\n

\"Angular<\/a><\/p>\n

Nakon postavljanja projekta u izborniku Authentication<\/em> odabirem Email\/Password<\/em>, Facebook<\/em> i Google<\/em> metodu registracije\/prijave.<\/p>\n

\"Angular<\/a><\/p>\n

Kao \u0161to se mo\u017ee vidjeti iz slike iznad, Facebook<\/em> prijava ne mo\u017ee se ugraditi bez dva parametra koja je mogu\u0107e dobiti jedino na adresi https:\/\/developers.facebook.com\/<\/a> gdje je potrebno kreirati profil za AngularWebFirebase<\/em> aplikaciju.<\/p>\n

Implementacija Firebase u Angular<\/h2>\n

Koriste\u0107i Angular CLI<\/em> kreiram novi projekt<\/a>.<\/p>\n

$ ng new AngularWebFirebase\r\n$ cd AngularWebFirebase<\/pre>\n
Sljede\u0107om naredbom instaliram potreban NPM<\/em> paket<\/p>\n
$ npm install angularfire2 firebase --save<\/pre>\n
Tako\u0111er, kao \u0161to sam ranije ve\u0107 spomenuo, u datoteku app.module.ts<\/strong> postavljam potreban Firebase<\/em> objekt.<\/p>\n
import { BrowserModule } from '@angular\/platform-browser';\r\nimport { NgModule } from '@angular\/core';\r\nimport { FormsModule } from '@angular\/forms';\r\nimport { HttpModule } from '@angular\/http';\r\n\r\nimport { AppComponent } from '.\/app.component';\r\nimport { AngularFireModule } from 'angularfire2';\r\nimport { AngularFireAuthModule } from 'angularfire2\/auth';\r\n\r\nexport const firebaseConfig = {\r\n  apiKey: \"***************************************\",\r\n  authDomain: \"***********************.firebaseapp.com\",\r\n  databaseURL: \"https:\/\/***********************.firebaseio.com\",\r\n  projectId: \"***********************\",\r\n  storageBucket: \"***********************.appspot.com\",\r\n  messagingSenderId: \"************\"\r\n};\r\n\r\n@NgModule({\r\n  declarations: [\r\n    AppComponent\r\n  ],\r\n  imports: [\r\n    BrowserModule,\r\n    FormsModule,\r\n    HttpModule,\r\n    AngularFireModule.initializeApp(firebaseConfig),\r\n    AngularFireAuthModule \r\n  ],\r\n  providers: [],\r\n  bootstrap: [AppComponent]\r\n})\r\nexport class AppModule { }<\/pre>\n
Sada \u0107u kreirati \u010detiri komponente od kojih \u0107e se sastojati moja Angular<\/em> web aplikacija:<\/p>\n
1 – LoginComponent<\/em> – stranica za prijavu koriste\u0107i Facebook<\/em> ili Google<\/em>
\n2 – EmailComponent<\/em> – stranica za prijavu koriste\u0107i e-mail
\n3 – SignupComponent<\/em> – stranica za registraciju
\n4 – DashboardComponent<\/em> – po\u010detna stranica nakon uspje\u0161ne prijave<\/p>\n
$ ng generate component login\r\n$ ng generate component email\r\n$ ng generate component signup\r\n$ ng generate component dashboard<\/pre>\n
Ako sada pokrenem aplikaciju naredbom $ ng serve<\/span> na adresi http:\/\/localhost:4200\/<\/em> mogu vidjeti jedino standardnu Angular<\/em> po\u010detnu stranicu. <\/p>\n
\"Angular<\/a><\/p>\n
S obzirom da ja u ovom slu\u010daju \u017eelim vidjeti svoju Login<\/em> komponentu kao po\u010detnu stranicu moram napraviti sljede\u0107e. Unutar \/src\/app\/<\/strong> kreiram datoteku app.routes.ts<\/strong> sa sljede\u0107im sadr\u017eajem:<\/p>\n
import { ModuleWithProviders } from '@angular\/core';\r\nimport { Routes, RouterModule } from '@angular\/router';\r\n\r\nimport { AppComponent } from '.\/app.component';\r\nimport { LoginComponent } from '.\/login\/login.component';\r\nimport { DashboardComponent } from '.\/dashboard\/dashboard.component';\r\nimport { SignupComponent } from '.\/signup\/signup.component';\r\nimport { EmailComponent } from '.\/email\/email.component';\r\n\r\nexport const router: Routes = [\r\n    { path: '', redirectTo: 'login', pathMatch: 'full' },\r\n    { path: 'login', component: LoginComponent },\r\n    { path: 'signup', component: SignupComponent },\r\n    { path: 'email', component: EmailComponent },\r\n    { path: 'dashboard', component: DashboardComponent}\r\n]\r\n\r\nexport const routes: ModuleWithProviders = RouterModule.forRoot(router);<\/pre>\n
Naravno, tu jo\u0161 ide uvoz u app.module.ts<\/strong><\/p>\n
\r\nimport { AngularFireModule } from 'angularfire2';\r\nimport { AngularFireAuthModule } from 'angularfire2\/auth';\r\nimport { LoginComponent } from '.\/login\/login.component';\r\nimport { EmailComponent } from '.\/email\/email.component';\r\nimport { SignupComponent } from '.\/signup\/signup.component';\r\nimport { DashboardComponent } from '.\/dashboard\/dashboard.component';\r\nimport { routes } from '.\/app.routes';\r\n...\r\ndeclarations: [\r\n    AppComponent,\r\n    LoginComponent,\r\n    EmailComponent,\r\n    SignupComponent,\r\n    DashboardComponent\r\n  ],\r\nimports: [\r\n    BrowserModule,\r\n    FormsModule,\r\n    HttpModule,\r\n    AngularFireModule.initializeApp(firebaseConfig),\r\n    AngularFireAuthModule,\r\n    routes\r\n  ],\r\n...<\/pre>\n
I nakon toga unutar datoteke app.component.html<\/strong> umjesto postoje\u0107eg sadr\u017eaja staviti <router-outlet><\/router-outlet><\/span>.<\/p>\n
Login komponenta<\/h3>\n
Nalazi se na adresi http:\/\/localhost:4200\/login<\/em> i to je zadani pregled koji se pojavi prilikom prve posjete web aplikaciji. <\/p>\n
\"Angular<\/a><\/p>\n
Ekran se sastoji od tri gumba. Facebook<\/em>, Google<\/em> i E-mail<\/em> prijava uz mogu\u0107nost registracije. <\/p>\n
<div class=\"form-container\">\r\n  <img src=\"assets\/images\/login.png\" id=\"login\">\r\n\r\n    <span class=\"error\" *ngIf=\"error\">{{ error }}<\/span>\r\n\r\n  <button (click)=\"loginFb()\" id=\"fb\">Login with Facebook<\/button><br>\r\n  <button (click)=\"loginGoogle()\" id=\"google\">Login with Google<\/button>\r\n  <button routerLink=\"\/email\" id=\"email\">Login with E-mail<\/button>\r\n\r\n  <a routerLink=\"\/signup\" routerLinkActive=\"active\" class=\"alc\">Don't have an account?<\/a>\r\n<\/div><\/pre>\n
Gumb za prijavu putem Facebooka<\/em> ili Googlea<\/em> pozivaju funkciju dok klik ma gumb za prijavu putem e-maila<\/em> otvara novu stranicu na kojoj se nalazi forma za unos e-maila<\/em> i lozinke. <\/p>\n
Ako prijava putem Facebooka<\/em> ili Googlea<\/em> pro\u0111e zapisujem podatke o korisniku (name<\/em>, picture<\/em>, email<\/em>) u localStorage<\/a><\/em> kako bi ih kasnije mogao prikazati na Dashboardu<\/em>.<\/p>\n
import { Component, OnInit } from '@angular\/core';\r\n\r\nimport { AngularFireModule } from 'angularfire2';\r\nimport { AngularFireAuth } from 'angularfire2\/auth';\r\nimport * as firebase from 'firebase\/app';\r\nimport { Router } from '@angular\/router';\r\n\r\n@Component({\r\n  selector: 'app-login',\r\n  templateUrl: '.\/login.component.html',\r\n  styleUrls: ['.\/login.component.css']\r\n})\r\nexport class LoginComponent implements OnInit {\r\n\r\n  error: any;\r\n\r\n  constructor(public _angularAuth: AngularFireAuth, \r\n              private _router: Router) { }\r\n\r\n  ngOnInit() {\r\n  }\r\n\r\n  loginGoogle(){\r\n    let a = this;\r\n    \/\/this._angularAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider());\r\n    firebase.auth().signInWithPopup(new firebase.auth.GoogleAuthProvider())\r\n    .then(function(authData) {\r\n      console.log(authData);\r\n      if(authData.credential.accessToken){\r\n        localStorage.setItem('name', authData.additionalUserInfo.profile.name);\r\n        localStorage.setItem('picture', authData.additionalUserInfo.profile.picture);\r\n        localStorage.setItem('email', authData.additionalUserInfo.profile.email);\r\n        a._router.navigate(['\/dashboard']);\r\n      }\r\n    }).catch(function(error) {\r\n      console.log(error);\r\n      a.error = error.message;\r\n    });\r\n  }\r\n\r\n  loginFb(){\r\n    let a = this;\r\n    \/\/this._angularAuth.auth.signInWithPopup(new firebase.auth.FacebookAuthProvider());\r\n    firebase.auth().signInWithPopup(new firebase.auth.FacebookAuthProvider())\r\n    .then(function(authData) {\r\n      console.log(authData);\r\n      if(authData.credential.accessToken){\r\n        localStorage.setItem('name', authData.additionalUserInfo.profile.name);\r\n        localStorage.setItem('picture', authData.additionalUserInfo.profile.picture.data.url);\r\n        localStorage.setItem('email', authData.additionalUserInfo.profile.email);\r\n        a._router.navigate(['\/dashboard']);\r\n      }\r\n    }).catch(function(error) {\r\n      console.log(error);\r\n      a.error = error.message;\r\n    });\r\n  }\r\n\r\n}<\/pre>\n
Ovisno o postavkama unutar Firebasea<\/em> jedan korisnik se (ne)mo\u017ee prijaviti koriste\u0107i istu e-mail<\/em> adresu na razli\u010ditim dru\u0161tvenim mre\u017eama tj. ako se korisnik jednom prijavio koriste\u0107i Google<\/em>, a kasnije se \u017eeli prijaviti koriste\u0107i Facebook<\/em> dobiti \u0107e sljede\u0107u poruku:<\/p>\n
\"Angular<\/a><\/p>\n
Ta se opcija mo\u017ee promijeniti klikom na ‘One account per email address<\/em>‘.<\/p>\n
\"Angular<\/a><\/p>\n
Signup komponenta<\/h3>\n
Nalazi se na adresi http:\/\/localhost:4200\/signup<\/em> i osnovna svrha ovog ekrana je omogu\u0107iti korisnicima registraciju. <\/p>\n
\"Angular<\/a><\/p>\n
Ekran se sastoji od dva polja za unos e-maila<\/em> i lozinke.<\/p>\n
<div class=\"form-container\">\r\n  <a routerLink=\"\/login\" id=\"goback\">Go back<\/a>\r\n\r\n  <h2>Registration<\/h2>\r\n\r\n  <span class=\"error\" *ngIf=\"error\">{{ error }}<\/span>\r\n    \r\n  <form #formData='ngForm' (ngSubmit)=\"onSubmit(formData)\">\r\n\r\n    <input type=\"text\" placeholder=\"E-mail\" (ngModel)=\"email\" name=\"email\" class=\"txt\" required>\r\n    <input type=\"password\" placeholder=\"Password\" (ngModel)=\"password\" name=\"password\" class=\"txt\" required>\r\n\r\n\r\n    <button type=\"submit\" [disabled]=\"!formData.valid\" class=\"basic-btn\">Create my account<\/button>\r\n  <\/form>\r\n<\/div><\/pre>\n
Ako registracija pro\u0111e u redu korisnik automatski bude preusmjeren na stranicu za prijavu. U suprotnom iznad polja za unos e-maila<\/em> prikazuje se poruka o gre\u0161ci.<\/p>\n
\"Angular<\/a><\/p>\n
import { Component, OnInit } from '@angular\/core';\r\n\r\nimport { AngularFireModule } from 'angularfire2';\r\nimport { AngularFireAuth } from 'angularfire2\/auth';\r\nimport * as firebase from 'firebase\/app';\r\nimport { Router } from '@angular\/router';\r\n\r\n@Component({\r\n  selector: 'app-signup',\r\n  templateUrl: '.\/signup.component.html',\r\n  styleUrls: ['.\/signup.component.css']\r\n})\r\nexport class SignupComponent implements OnInit {\r\n\r\n  error: any;\r\n\r\n  constructor(public _angularAuth: AngularFireAuth, \r\n              private _router: Router) { }\r\n\r\n  ngOnInit() {\r\n  }\r\n\r\n  onSubmit(formData) {\r\n    let a = this;\r\n    if(formData.valid) {\r\n      console.log(formData.value);\r\n      firebase.auth().createUserWithEmailAndPassword(formData.value.email, formData.value.password)\r\n      .then(function(data) {\r\n        console.log(data);\r\n        if(data){\r\n          a._router.navigate(['\/email']);\r\n        }\r\n      }).catch(function(error) {\r\n        console.log(error);\r\n        a.error = error.message;\r\n      });\r\n    }\r\n  }\r\n\r\n}<\/pre>\n
Email komponenta<\/h3>\n
Nalazi se na adresi http:\/\/localhost:4200\/email<\/em> s osnovnom svrhom omogu\u0107avanja prijave korisnika pomo\u0107u e-maila<\/em> i lozinke.<\/p>\n
\"Angular<\/a><\/p>\n
Ekran se sastoji od dva polja za unos e-maila<\/em> i lozinke.<\/p>\n
<div class=\"form-container\">\r\n  <a routerLink=\"\/login\" id=\"goback\">Go back<\/a>\r\n  <h2>E-mail Login<\/h2>\r\n\r\n  <span class=\"error\" *ngIf=\"error\">{{ error }}<\/span>\r\n\r\n  <form #formData='ngForm' (ngSubmit)=\"onSubmit(formData)\">\r\n\r\n    <input type=\"text\" placeholder=\"E-mail\" (ngModel)=\"email\" name=\"email\" class=\"txt\" required>\r\n    <input type=\"password\" placeholder=\"Password\" (ngModel)=\"password\" name=\"password\" class=\"txt\" required>\r\n\r\n    <button type=\"submit\" [disabled]=\"!formData.valid\" class=\"basic-btn\">Log in<\/button>\r\n    <a routerLink=\"\/signup\" class=\"alc\">Don't have an account?<\/a>\r\n<\/form>\r\n<\/div><\/pre>\n
Unosom ispravnih podataka za prijavu korisnik automatski bude preusmjeren na Dashboard<\/em> dok u suprotnom dobije poruku o gre\u0161ci. <\/p>\n
import { Component, OnInit } from '@angular\/core';\r\n\r\nimport { AngularFireModule } from 'angularfire2';\r\nimport { AngularFireAuth } from 'angularfire2\/auth';\r\nimport * as firebase from 'firebase\/app';\r\nimport { Router } from '@angular\/router';\r\n\r\n@Component({\r\n  selector: 'app-email',\r\n  templateUrl: '.\/email.component.html',\r\n  styleUrls: ['.\/email.component.css']\r\n})\r\nexport class EmailComponent implements OnInit {\r\n\r\n  error: any;\r\n\r\n  constructor(public _angularAuth: AngularFireAuth, \r\n              private _router: Router) { }\r\n\r\n  ngOnInit() {\r\n  }\r\n\r\n  onSubmit(formData) {\r\n    let a = this;\r\n    firebase.auth().signInWithEmailAndPassword(formData.value.email, formData.value.password)\r\n    .then(function(data) {\r\n      console.log(data);\r\n      if(data){\r\n        localStorage.setItem('email', data.email);\r\n        a._router.navigate(['\/dashboard']);\r\n      }\r\n    }).catch(function(error) {\r\n      console.log(error);\r\n      a.error = error.message;\r\n    });\r\n  }\r\n\r\n}<\/pre>\n
Dashboard komponenta<\/h3>\n
Nalazi se na adresi http:\/\/localhost:4200\/dashboard<\/em> s osnovnom svrhom prikaza podataka o korisniku nakon uspje\u0161ne prijave. U ovom slu\u010daju prikazuje se ime i prezime korisnika, e-mail<\/em> adresa i slika.<\/p>\n
\"Angular<\/a><\/p>\n
Na ekranu se mogu vidjeti podaci o korisniku pod uvjetom (*ngIf<\/a><\/em>) da postoje.<\/p>\n
<div class=\"form-container\" id=\"toolbar\">\r\n  <header>\r\n    <button (click)=\"logout()\" class=\"basic-btn\">Logout<\/button>\r\n  <\/header>\r\n  <div id=\"page\">\r\n    <h2 *ngIf=\"name\">Hey {{name}}!<\/h2>\r\n    <h6 *ngIf=\"email\">{{email}}<\/h6>\r\n    <img *ngIf=\"picture\" src=\"{{picture}}\"\/>\r\n\r\n  <\/div>\r\n  \r\n<\/div><\/pre>\n
Funkcionalnost se sastoji od dohva\u0107anja podataka o korisniku, funkcije za odjavu koja prazni localStorage<\/em> i vra\u0107a korisnika na po\u010detnu stranicu te funkcije za provjeru koja onemogu\u0107ava korisnike da pristupe Dashboard<\/em> stranici ako nisu prijavljeni.<\/p>\n
import { Component, OnInit } from '@angular\/core';\r\n\r\nimport { AngularFireModule } from 'angularfire2';\r\nimport { AngularFireAuth } from 'angularfire2\/auth';\r\nimport * as firebase from 'firebase\/app';\r\nimport { Router } from '@angular\/router';\r\n\r\n@Component({\r\n  selector: 'app-dashboard',\r\n  templateUrl: '.\/dashboard.component.html',\r\n  styleUrls: ['.\/dashboard.component.css']\r\n})\r\nexport class DashboardComponent implements OnInit {\r\n\r\n   name: string;\r\n   picture: string;\r\n   email: string;\r\n\r\n  constructor(public _angularAuth: AngularFireAuth, \r\n              private _router: Router) { }\r\n\r\n  ngOnInit() {\r\n     this.name = localStorage.getItem('name');\r\n     this.picture = localStorage.getItem('picture');\r\n     this.email = localStorage.getItem('email');\r\n     this.provjera();\r\n  }\r\n\r\n  logout() {\r\n    \/\/this._angularAuth.auth.logout();\r\n    localStorage.clear();\r\n    console.log('logged out');\r\n    this._router.navigateByUrl('\/login');\r\n }\r\n\r\n provjera(){\r\n   if(!this.email){\r\n    this._router.navigateByUrl('\/login');\r\n   }\r\n }\r\n\r\n\r\n}<\/pre>\n
Zaklju\u010dak<\/h2>\n
U ovom sam blog postu pokazao kako implementirati Google Firebase<\/em> prijavu u Angular<\/em> web projekt.<\/p>\n
\"Angular<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
U ovom \u0107u blog postu napraviti primjer Angular web aplikacije koja \u0107e se sastojati od nekoliko ekrana. Glavna svrha ove web aplikacije je omogu\u0107iti korisnicima da se registriraju tj. prijave kako bi ju mogli koristiti. To \u0107e mo\u0107i u\u010diniti koriste\u0107i e-mail, Google ili Facebook korisni\u010dki ra\u010dun. Nekoliko sam blog postova ve\u0107 objavio na ovu temu, … Nastavi \u010ditati Angular & Firebase – registracija i prijava<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":7185,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[566,351],"tags":[471,385,411,410,413],"class_list":["post-7184","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-frontend","category-razvoj","tag-angular","tag-google-firebase","tag-login","tag-prijava","tag-registracija"],"yoast_head":"\nAngular & Firebase - registracija i prijava - Tomislav Stankovi\u0107<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.tomislavstankovic.com\/blog\/angular-firebase-registracija-prijava\/\" \/>\n<meta property=\"og:locale\" content=\"hr_HR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular & Firebase - registracija i prijava - Tomislav Stankovi\u0107\" \/>\n<meta property=\"og:description\" content=\"U ovom \u0107u blog postu napraviti primjer Angular web aplikacije koja \u0107e se sastojati od nekoliko ekrana. Glavna svrha ove web aplikacije je omogu\u0107iti korisnicima da se registriraju tj. prijave kako bi ju mogli koristiti. To \u0107e mo\u0107i u\u010diniti koriste\u0107i e-mail, Google ili Facebook korisni\u010dki ra\u010dun. Nekoliko sam blog postova ve\u0107 objavio na ovu temu, … Nastavi \u010ditati Angular & Firebase – registracija i prijava\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.tomislavstankovic.com\/blog\/angular-firebase-registracija-prijava\/\" \/>\n<meta property=\"og:site_name\" content=\"Tomislav Stankovi\u0107\" \/>\n<meta property=\"article:published_time\" content=\"2018-03-18T16:21:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-01-05T17:49:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2018\/03\/angular-firebase-registracija-prijava-login-min.png\" \/>\n\t<meta property=\"og:image:width\" content=\"825\" \/>\n\t<meta property=\"og:image:height\" content=\"510\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Tomislav Stankovi\u0107\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Napisao\/la\" \/>\n\t<meta name=\"twitter:data1\" content=\"Tomislav Stankovi\u0107\" \/>\n\t<meta name=\"twitter:label2\" content=\"Procijenjeno vrijeme \u010ditanja\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minuta\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/angular-firebase-registracija-prijava\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/angular-firebase-registracija-prijava\\\/\"},\"author\":{\"name\":\"Tomislav Stankovi\u0107\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/#\\\/schema\\\/person\\\/0329c549c57700034ea77f5d3d78396d\"},\"headline\":\"Angular & Firebase – registracija i prijava\",\"datePublished\":\"2018-03-18T16:21:27+00:00\",\"dateModified\":\"2019-01-05T17:49:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/angular-firebase-registracija-prijava\\\/\"},\"wordCount\":745,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/#\\\/schema\\\/person\\\/0329c549c57700034ea77f5d3d78396d\"},\"image\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/angular-firebase-registracija-prijava\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/03\\\/angular-firebase-registracija-prijava-login-min.png\",\"keywords\":[\"Angular\",\"Google Firebase\",\"login\",\"prijava\",\"registracija\"],\"articleSection\":[\"Frontend\",\"Razvoj\"],\"inLanguage\":\"hr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/angular-firebase-registracija-prijava\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/angular-firebase-registracija-prijava\\\/\",\"url\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/angular-firebase-registracija-prijava\\\/\",\"name\":\"Angular & Firebase - registracija i prijava - Tomislav Stankovi\u0107\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/angular-firebase-registracija-prijava\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/angular-firebase-registracija-prijava\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/03\\\/angular-firebase-registracija-prijava-login-min.png\",\"datePublished\":\"2018-03-18T16:21:27+00:00\",\"dateModified\":\"2019-01-05T17:49:43+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/angular-firebase-registracija-prijava\\\/#breadcrumb\"},\"inLanguage\":\"hr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/angular-firebase-registracija-prijava\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"hr\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/angular-firebase-registracija-prijava\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/03\\\/angular-firebase-registracija-prijava-login-min.png\",\"contentUrl\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/03\\\/angular-firebase-registracija-prijava-login-min.png\",\"width\":825,\"height\":510,\"caption\":\"Angular & Firebase - registracija i prijava\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/angular-firebase-registracija-prijava\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Po\u010detna stranica\",\"item\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Angular & Firebase – registracija i prijava\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/\",\"name\":\"Tomislav Stankovi\u0107\",\"description\":\"Sam svoj bloger\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/#\\\/schema\\\/person\\\/0329c549c57700034ea77f5d3d78396d\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"hr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/#\\\/schema\\\/person\\\/0329c549c57700034ea77f5d3d78396d\",\"name\":\"Tomislav Stankovi\u0107\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"hr\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/10\\\/cropped-TomislavStankovic.jpg\",\"url\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/10\\\/cropped-TomislavStankovic.jpg\",\"contentUrl\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/10\\\/cropped-TomislavStankovic.jpg\",\"width\":248,\"height\":165,\"caption\":\"Tomislav Stankovi\u0107\"},\"logo\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/10\\\/cropped-TomislavStankovic.jpg\"},\"description\":\"Bloger \u0161irokog raspona interesa od kojih dio voli objaviti na ovom blogu. U neslobodno vrijeme Angular developer mobilnih i web aplikacija.\",\"sameAs\":[\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/tomislavstankovic\\\/\"],\"url\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/author\\\/tomislavstankovic\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Angular & Firebase - registracija i prijava - Tomislav Stankovi\u0107","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.tomislavstankovic.com\/blog\/angular-firebase-registracija-prijava\/","og_locale":"hr_HR","og_type":"article","og_title":"Angular & Firebase - registracija i prijava - Tomislav Stankovi\u0107","og_description":"U ovom \u0107u blog postu napraviti primjer Angular web aplikacije koja \u0107e se sastojati od nekoliko ekrana. Glavna svrha ove web aplikacije je omogu\u0107iti korisnicima da se registriraju tj. prijave kako bi ju mogli koristiti. To \u0107e mo\u0107i u\u010diniti koriste\u0107i e-mail, Google ili Facebook korisni\u010dki ra\u010dun. Nekoliko sam blog postova ve\u0107 objavio na ovu temu, … Nastavi \u010ditati Angular & Firebase – registracija i prijava","og_url":"https:\/\/www.tomislavstankovic.com\/blog\/angular-firebase-registracija-prijava\/","og_site_name":"Tomislav Stankovi\u0107","article_published_time":"2018-03-18T16:21:27+00:00","article_modified_time":"2019-01-05T17:49:43+00:00","og_image":[{"width":825,"height":510,"url":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2018\/03\/angular-firebase-registracija-prijava-login-min.png","type":"image\/png"}],"author":"Tomislav Stankovi\u0107","twitter_card":"summary_large_image","twitter_misc":{"Napisao\/la":"Tomislav Stankovi\u0107","Procijenjeno vrijeme \u010ditanja":"9 minuta"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.tomislavstankovic.com\/blog\/angular-firebase-registracija-prijava\/#article","isPartOf":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/angular-firebase-registracija-prijava\/"},"author":{"name":"Tomislav Stankovi\u0107","@id":"https:\/\/www.tomislavstankovic.com\/blog\/#\/schema\/person\/0329c549c57700034ea77f5d3d78396d"},"headline":"Angular & Firebase – registracija i prijava","datePublished":"2018-03-18T16:21:27+00:00","dateModified":"2019-01-05T17:49:43+00:00","mainEntityOfPage":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/angular-firebase-registracija-prijava\/"},"wordCount":745,"commentCount":0,"publisher":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/#\/schema\/person\/0329c549c57700034ea77f5d3d78396d"},"image":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/angular-firebase-registracija-prijava\/#primaryimage"},"thumbnailUrl":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2018\/03\/angular-firebase-registracija-prijava-login-min.png","keywords":["Angular","Google Firebase","login","prijava","registracija"],"articleSection":["Frontend","Razvoj"],"inLanguage":"hr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.tomislavstankovic.com\/blog\/angular-firebase-registracija-prijava\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.tomislavstankovic.com\/blog\/angular-firebase-registracija-prijava\/","url":"https:\/\/www.tomislavstankovic.com\/blog\/angular-firebase-registracija-prijava\/","name":"Angular & Firebase - registracija i prijava - Tomislav Stankovi\u0107","isPartOf":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/angular-firebase-registracija-prijava\/#primaryimage"},"image":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/angular-firebase-registracija-prijava\/#primaryimage"},"thumbnailUrl":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2018\/03\/angular-firebase-registracija-prijava-login-min.png","datePublished":"2018-03-18T16:21:27+00:00","dateModified":"2019-01-05T17:49:43+00:00","breadcrumb":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/angular-firebase-registracija-prijava\/#breadcrumb"},"inLanguage":"hr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.tomislavstankovic.com\/blog\/angular-firebase-registracija-prijava\/"]}]},{"@type":"ImageObject","inLanguage":"hr","@id":"https:\/\/www.tomislavstankovic.com\/blog\/angular-firebase-registracija-prijava\/#primaryimage","url":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2018\/03\/angular-firebase-registracija-prijava-login-min.png","contentUrl":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2018\/03\/angular-firebase-registracija-prijava-login-min.png","width":825,"height":510,"caption":"Angular & Firebase - registracija i prijava"},{"@type":"BreadcrumbList","@id":"https:\/\/www.tomislavstankovic.com\/blog\/angular-firebase-registracija-prijava\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Po\u010detna stranica","item":"https:\/\/www.tomislavstankovic.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Angular & Firebase – registracija i prijava"}]},{"@type":"WebSite","@id":"https:\/\/www.tomislavstankovic.com\/blog\/#website","url":"https:\/\/www.tomislavstankovic.com\/blog\/","name":"Tomislav Stankovi\u0107","description":"Sam svoj bloger","publisher":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/#\/schema\/person\/0329c549c57700034ea77f5d3d78396d"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.tomislavstankovic.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"hr"},{"@type":["Person","Organization"],"@id":"https:\/\/www.tomislavstankovic.com\/blog\/#\/schema\/person\/0329c549c57700034ea77f5d3d78396d","name":"Tomislav Stankovi\u0107","image":{"@type":"ImageObject","inLanguage":"hr","@id":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/10\/cropped-TomislavStankovic.jpg","url":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/10\/cropped-TomislavStankovic.jpg","contentUrl":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/10\/cropped-TomislavStankovic.jpg","width":248,"height":165,"caption":"Tomislav Stankovi\u0107"},"logo":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/10\/cropped-TomislavStankovic.jpg"},"description":"Bloger \u0161irokog raspona interesa od kojih dio voli objaviti na ovom blogu. U neslobodno vrijeme Angular developer mobilnih i web aplikacija.","sameAs":["https:\/\/www.tomislavstankovic.com\/blog\/","https:\/\/www.linkedin.com\/in\/tomislavstankovic\/"],"url":"https:\/\/www.tomislavstankovic.com\/blog\/author\/tomislavstankovic\/"}]}},"_links":{"self":[{"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/posts\/7184","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/comments?post=7184"}],"version-history":[{"count":49,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/posts\/7184\/revisions"}],"predecessor-version":[{"id":7246,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/posts\/7184\/revisions\/7246"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/media\/7185"}],"wp:attachment":[{"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/media?parent=7184"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/categories?post=7184"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/tags?post=7184"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}