{"id":8910,"date":"2019-01-07T06:00:39","date_gmt":"2019-01-07T04:00:39","guid":{"rendered":"https:\/\/www.tomislavstankovic.com\/blog\/?p=8910"},"modified":"2019-01-06T19:51:43","modified_gmt":"2019-01-06T17:51:43","slug":"sms-login-angular-firebase","status":"publish","type":"post","link":"https:\/\/www.tomislavstankovic.com\/blog\/sms-login-angular-firebase\/","title":{"rendered":"SMS login – Angular & Firebase"},"content":{"rendered":"

U nastavku ovog blog posta pokazati \u0107u kako napraviti jednostavnu Angular<\/em> web aplikaciju sa funkcionalnom SMS prijavom.<\/p>\n

Prednosti kori\u0161tenja SMS prijave:<\/p>\n

– Spre\u010davanje la\u017enih korisnika<\/strong> – kori\u0161tenjem SMS prijave onemogu\u0107ava se kreiranje la\u017enih korisnika jer svaki korisnik koji se \u017eeli prijaviti treba imati jedinstveni broj telefona na koji \u0107e dobiti kod pomo\u0107u kojega \u0107e se prijaviti.
\n– Daje dodatnu vrijednost bazi korisnika<\/strong> – svaki potvr\u0111eni korisnik koji stoji iza svakog od tih brojeva telefona predstavlja odre\u0111enu vrijednost jer mo\u017eemo biti sigurni da to nije la\u017eni korisnik.
\n– Pove\u0107ana sigurnost i pobolj\u0161ava korisni\u010dko iskustvo<\/strong> – u dana\u0161nje vrijeme korisnici koriste jako puno raznih aplikacija i postaje sve te\u017ee pratiti login<\/em> podatke svake od njih. Omogu\u0107avanjem SMS prijave korisnik ne mora smi\u0161ljati novo korisni\u010dko ime ili lozinku nego je samo dovoljno da uz sebe ima svoj mobitel kako bi se uspje\u0161no prijavio. Tako\u0111er, tre\u0107a strana se ne mo\u017ee prijaviti kao npr. ja ako uz sebe nema moj mobilni telefon da pro\u010dita kod \u010dime se drasti\u010dno pove\u0107ava sigurnost. <\/p>\n

Kreiranje projekta<\/h2>\n

Kreiram novi Angular<\/em> web projekt koriste\u0107i Angular CLI<\/a><\/em>. <\/p>\n

$ ng new angular-firebase-sms-login\r\n$ cd angular-firebase-sms-login<\/pre>\n
\"Angular<\/a><\/p>\n
Google Firebase<\/h2>\n
Nakon \u0161to sam kreirao Angular<\/em> projekt mogu se prebaciti na Google Firebase<\/a><\/em> i ondje postaviti projekt kako bi uop\u0107e mogao koristiti SMS login<\/em>.<\/p>\n
\"Google<\/a><\/p>\n
Kroz nekoliko sekundi Firebase<\/em> projekt \u0107e biti spreman.<\/p>\n
\"Google<\/a><\/p>\n
Unutar izbornika Develop<\/strong><\/em> – Authentication<\/strong><\/em> potrebno je odabrati Sign-in-method<\/strong><\/em> tab. Ondje se nalazi popis opcija dostupnih za login\/prijavu. <\/p>\n
\"Google<\/a><\/p>\n
Ja \u0107u, naravno, ovaj put odabrati Phone<\/a><\/strong><\/em>.<\/p>\n
Allow users to sign in with a mobile phone number, using Firebase SDK phone verification and user authentication tools.<\/p><\/blockquote>\n
\"Google<\/a><\/p>\n
Phone<\/em> tj. SMS<\/em> prijava je aktivirana.<\/p>\n
\"Google<\/a><\/p>\n
Ako sada u izborniku Authentication<\/strong><\/em> – Users<\/strong><\/em> pogledam popis korisnika on \u0107e biti prazan jer za sada jo\u0161 nisam napravio niti jednu prijavu. Nakon \u0161to se sa bilo kojim brojem mobitela prvi put prijavim taj \u0107e se broj prikazati kao novi korisnik.<\/p>\n
\"Firebase<\/a><\/p>\n
Prema trenutnim postavkama moj \u0107e projekt raditi ako web aplikaciju pokrenem na adresi http:\/\/localhost:4200\/.<\/p>\n
\"Firebase<\/a><\/p>\n
Me\u0111utim ako imam neku (pod)domenu kao npr. test.angularaplikacija.com ondje prijava putem SMS-a ne\u0107e raditi dok ru\u010dno ne odobrim tu (pod)domenu.<\/p>\n
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.<\/p>\n
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<\/a>. Note: whitelisting a domain allows for requests from any URL and port of that domain.<\/p><\/blockquote>\n
\"Firebase<\/a><\/p>\n
Prije nego se vratim svojem Angular<\/em> projektu trebaju mi jo\u0161 neki podaci bez kojih moj Angular<\/em> projekt ne bi znao kako se povezati s Firebaseom<\/em>.<\/p>\n
Ovdje idem na Project settings<\/em><\/strong>.<\/p>\n
\"Google<\/a><\/p>\n
Nakon toga idem na Add Firebase to your web app<\/strong><\/em>.<\/p>\n
\"Google<\/a><\/p>\n
I kona\u010dno, ovdje imam konfiguracijski config<\/span> objekt koju \u0107u kasnije postaviti u svoj Angular<\/em> projekt i tako ga povezati sa Firebaseom<\/em>.<\/p>\n
\"Google<\/a><\/p>\n
Implementacija prijave\/logina<\/h2>\n
Sada se vra\u0107am u svoj Angular<\/em> projekt. <\/p>\n
AppComponent<\/span> \u0107u malo prilagoditi tj. dodati joj nekoliko detalja kojih trenutno nema.<\/p>\n
import { Component, \r\n         OnInit, \r\n         Injectable } from '@angular\/core';\r\n\r\n@Injectable()\r\n@Component({\r\n  selector: 'app-root',\r\n  templateUrl: '.\/app.component.html',\r\n  styleUrls: ['.\/app.component.css']\r\n})\r\n\r\nexport class AppComponent implements OnInit {\r\n\r\n  title = 'angular-firebase-sms-login';\r\n\r\n  constructor() {\r\n  }\r\n\r\n  ngOnInit() {\r\n  }\r\n\r\n}<\/pre>\n
Trebat \u0107e mi window objekt pa \u0107u napraviti servis za njega kako bi ga mogao pozivati u cijelog projektu sa jednog mjesta.<\/p>\n
$ ng g service window<\/pre>\n
U servisu se nalazi sljede\u0107e:<\/p>\n
import { Injectable } from '@angular\/core';\r\n\r\n@Injectable()\r\nexport class WindowService {\r\n\r\n  get windowRef() {\r\n    return window\r\n  }\r\n\r\n}<\/pre>\n
Sada sam spreman za dodavanje Firebasea<\/em> unutar projekta, a to radim naredbama:<\/p>\n
$ npm install --save firebase\r\n$ npm install angularfire2 firebase --save<\/pre>\n
Sada sve to trebam navesti unutar app.module.ts<\/em><\/strong> datoteke. Ovdje moram uvesti FormsModule<\/span> zato \u0161to \u0107u u login formi koristiti [(ngModel)]<\/span>. <\/p>\n
import { BrowserModule } from '@angular\/platform-browser';\r\nimport { NgModule } from '@angular\/core';\r\n\r\nimport { AppComponent } from '.\/app.component';\r\nimport { DashboardComponent } from '.\/dashboard\/dashboard.component';\r\nimport { FormsModule } from '@angular\/forms';\r\n\r\nimport { AngularFireModule } from 'angularfire2';\r\nimport { AngularFireAuthModule } from 'angularfire2\/auth';\r\n\r\nexport const firebaseConfig = {\r\n  apiKey: \"***************************************\",\r\n  authDomain: \"angular-firebase-sms-login.firebaseapp.com\",\r\n  databaseURL: \"https:\/\/angular-firebase-sms-login.firebaseio.com\",\r\n  projectId: \"angular-firebase-sms-login\",\r\n  storageBucket: \"angular-firebase-sms-login.appspot.com\",\r\n  messagingSenderId: \"************\"\r\n};\r\n\r\n@NgModule({\r\n  declarations: [\r\n    AppComponent,\r\n    DashboardComponent\r\n  ],\r\n  imports: [\r\n    BrowserModule,\r\n    AngularFireModule.initializeApp(firebaseConfig),\r\n    AngularFireAuthModule,\r\n    FormsModule\r\n  ],\r\n  providers: [],\r\n  bootstrap: [AppComponent]\r\n})\r\nexport class AppModule { }<\/pre>\n
Na ekranu \u0107e to izgledati ovako:<\/p>\n
<div style=\"text-align:center\">\r\n  <h1>\r\n    Welcome to {{ title }}!\r\n  <\/h1>\r\n  <img width=\"300\" alt=\"Angular Logo\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==\">\r\n   \r\n  <div [hidden]=\"user\" style=\"text-align:center\">\r\n    <label for=\"phone\">Broj mobitela:<\/label><br>\r\n    <input type=\"text\" [(ngModel)]=\"phoneNumber.country\" class=\"input\" placeholder=\"+385\"  maxlength=\"4\">\r\n    <input type=\"text\" [(ngModel)]=\"phoneNumber.line\"  class=\"input\" placeholder=\"9********\" maxlength=\"9\">\r\n  \r\n    <div id=\"recaptcha-container\"><\/div>\r\n  \r\n    <button (click)=\"sendLoginCode()\">Po\u0161alji SMS<\/button>\r\n  \r\n    <div *ngIf=\"windowRef.confirmationResult\">\r\n      <hr>\r\n      <label for=\"code\">Ovdje unesite svoj pin<\/label><br>\r\n      <input type=\"text\" name=\"code\" [(ngModel)]=\"verificationCode\">\r\n  \r\n      <button (click)=\"verifyLoginCode()\">Potvrdi<\/button>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div *ngIf=\"user\">\r\n    <p>Prijava uspje\u0161na!<\/p>\r\n    <p>UserId: {{ user?.uid }}<\/p>\r\n  <\/div>\r\n\r\n<\/div><\/pre>\n
Funkcionalnost se mo\u017ee vidjeti u nastavku, a sastoji se od nekoliko funkcija. Osnova svega je broj mobitela koji je u E.164<\/a> obliku.<\/p>\n
import { Component, OnInit, Injectable } from '@angular\/core';\r\nimport { WindowService } from '.\/window.service';\r\n\r\nimport { AngularFireAuth } from 'angularfire2\/auth';\r\nimport * as firebase from 'firebase\/app';\r\n\r\nexport class PhoneNumber {\r\n  country: string = \"+385\";\r\n  line: string;\r\n  get e164() {\r\n    const num = this.country + this.line\r\n    return `+${num}`\r\n  }\r\n}\r\n\r\n@Injectable()\r\n@Component({\r\n  selector: 'app-root',\r\n  templateUrl: '.\/app.component.html',\r\n  styleUrls: ['.\/app.component.css'],\r\n  providers: [WindowService]\r\n})\r\nexport class AppComponent implements OnInit {\r\n  \r\n  title = 'Angular Firebase SMS Login';\r\n\r\n  windowRef: any;\r\n  phoneNumber = new PhoneNumber()\r\n  verificationCode: string;\r\n  user: any; \r\n\r\n  constructor(\r\n    private win: WindowService,\r\n    public _angularAuth: AngularFireAuth) {\r\n  }\r\n\r\n  ngOnInit() {\r\n    this.windowRef = this.win.windowRef;\r\n    this.windowRef.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container')\r\n    this.windowRef.recaptchaVerifier.render();\r\n  }\r\n\r\n  sendLoginCode() {\r\n    const appVerifier = this.windowRef.recaptchaVerifier;\r\n    const num = this.phoneNumber.e164;\r\n    firebase.auth().signInWithPhoneNumber(num, appVerifier)\r\n            .then(result => {\r\n                this.windowRef.confirmationResult = result;\r\n            })\r\n            .catch( error => console.log(error) );\r\n  }\r\n\r\n  verifyLoginCode() {\r\n    this.windowRef.confirmationResult\r\n                  .confirm(this.verificationCode)\r\n                  .then( result => {\r\n                    this.user = result.user;\r\n                    console.log(this.user);\r\n    })\r\n    .catch( error => console.log(error, \"Pogre\u0161an kod?\"));\r\n  } \r\n\r\n}<\/pre>\n
U praksi to izgleda ovako:<\/p>\n
\"SMS<\/a><\/p>\n
Klikom na “Po\u0161alji SMS” \u0161alje se SMS poruka na uneseni broj mobitela.<\/p>\n
\"Firebase<\/a><\/p>\n
Nakon unosa koda iz SMS-a uspje\u0161no se prijavljujem.<\/p>\n
\"Angular<\/a><\/p>\n
U slu\u010daju da se idem nekoliko puta za redom prijaviti i Google Firebase<\/em> posumnja na zloupotrebu pojavit \u0107e se napredna reCAPTCHA<\/a><\/em>.<\/p>\n
\"Firebase<\/a>
Izvor: https:\/\/angularfirebase.com\/lessons\/firebase-phone-authentication-with-angular-4-tutorial\/<\/figcaption><\/figure>\n
Tek sada, nakon \u0161to je prijava uspje\u0161no pro\u0161la, mogu svoj broj mobitela vidjeti unutar Google Firebase<\/em> su\u010delja.<\/p>\n
\"Firebase<\/a><\/p>\n
Zaklju\u010dak<\/h2>\n
Ovo je bio primjer jednostavne<\/strong> Angular<\/strong><\/em> web aplikacije sa SMS prijavom gdje se sva logika odvija na klijentskoj strani<\/strong>. Nedavno sam napravio i verziju gdje se sva logika odvija na serverskoj strani unutar NodeJS<\/a><\/em>-a sa dodatnim sigurnosnim provjerama. Bilo bi previ\u0161e za ovaj blog post da sam i\u0161ao i taj dio obraditi. Mo\u017eda u nekom od sljede\u0107ih blog postova, ako netko od posjetitelja bloga bude zainteresiran. <\/p>\n
Osim SMS prijave obradio sam nekoliko tema s ostalim vrstama prijave kao \u0161to su:
\n– Angular & Firebase \u2013 registracija i prijava<\/a>
\n– Ionic 3 \u2013 Google login\/prijava <\/a>
\n– Ionic 3 \u2013 Facebook prijava<\/a>
\n– Ionic 3 \u2013 Firebase registracija i prijava<\/a><\/p>\n
Struktura projekta prema package.json<\/strong><\/p>\n
{\r\n  \"name\": \"angular-firebase-sms-login\",\r\n  \"version\": \"0.0.0\",\r\n  \"scripts\": {\r\n    \"ng\": \"ng\",\r\n    \"start\": \"ng serve\",\r\n    \"build\": \"ng build\",\r\n    \"test\": \"ng test\",\r\n    \"lint\": \"ng lint\",\r\n    \"e2e\": \"ng e2e\"\r\n  },\r\n  \"private\": true,\r\n  \"dependencies\": {\r\n    \"@angular\/animations\": \"~7.1.0\",\r\n    \"@angular\/common\": \"~7.1.0\",\r\n    \"@angular\/compiler\": \"~7.1.0\",\r\n    \"@angular\/core\": \"~7.1.0\",\r\n    \"@angular\/forms\": \"~7.1.0\",\r\n    \"@angular\/platform-browser\": \"~7.1.0\",\r\n    \"@angular\/platform-browser-dynamic\": \"~7.1.0\",\r\n    \"@angular\/router\": \"~7.1.0\",\r\n    \"angularfire2\": \"^5.1.1\",\r\n    \"core-js\": \"^2.5.4\",\r\n    \"firebase\": \"^5.7.2\",\r\n    \"rxjs\": \"~6.3.3\",\r\n    \"tslib\": \"^1.9.0\",\r\n    \"zone.js\": \"~0.8.26\"\r\n  },\r\n  \"devDependencies\": {\r\n    \"@angular-devkit\/build-angular\": \"~0.11.0\",\r\n    \"@angular\/cli\": \"~7.1.4\",\r\n    \"@angular\/compiler-cli\": \"~7.1.0\",\r\n    \"@angular\/language-service\": \"~7.1.0\",\r\n    \"@types\/node\": \"~8.9.4\",\r\n    \"@types\/jasmine\": \"~2.8.8\",\r\n    \"@types\/jasminewd2\": \"~2.0.3\",\r\n    \"codelyzer\": \"~4.5.0\",\r\n    \"jasmine-core\": \"~2.99.1\",\r\n    \"jasmine-spec-reporter\": \"~4.2.1\",\r\n    \"karma\": \"~3.1.1\",\r\n    \"karma-chrome-launcher\": \"~2.2.0\",\r\n    \"karma-coverage-istanbul-reporter\": \"~2.0.1\",\r\n    \"karma-jasmine\": \"~1.1.2\",\r\n    \"karma-jasmine-html-reporter\": \"^0.2.2\",\r\n    \"protractor\": \"~5.4.0\",\r\n    \"ts-node\": \"~7.0.0\",\r\n    \"tslint\": \"~5.11.0\",\r\n    \"typescript\": \"~3.1.6\"\r\n  }\r\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"
U nastavku ovog blog posta pokazati \u0107u kako napraviti jednostavnu Angular web aplikaciju sa funkcionalnom SMS prijavom. Prednosti kori\u0161tenja SMS prijave: – Spre\u010davanje la\u017enih korisnika – kori\u0161tenjem SMS prijave onemogu\u0107ava se kreiranje la\u017enih korisnika jer svaki korisnik koji se \u017eeli prijaviti treba imati jedinstveni broj telefona na koji \u0107e dobiti kod pomo\u0107u kojega \u0107e se … Nastavi \u010ditati SMS login – Angular & Firebase<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":8936,"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,417],"class_list":["post-8910","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-frontend","category-razvoj","tag-angular","tag-google-firebase","tag-login","tag-sms"],"yoast_head":"\nSMS login - Angular & Firebase - 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\/sms-login-angular-firebase\/\" \/>\n<meta property=\"og:locale\" content=\"hr_HR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"SMS login - Angular & Firebase - Tomislav Stankovi\u0107\" \/>\n<meta property=\"og:description\" content=\"U nastavku ovog blog posta pokazati \u0107u kako napraviti jednostavnu Angular web aplikaciju sa funkcionalnom SMS prijavom. Prednosti kori\u0161tenja SMS prijave: – Spre\u010davanje la\u017enih korisnika – kori\u0161tenjem SMS prijave onemogu\u0107ava se kreiranje la\u017enih korisnika jer svaki korisnik koji se \u017eeli prijaviti treba imati jedinstveni broj telefona na koji \u0107e dobiti kod pomo\u0107u kojega \u0107e se … Nastavi \u010ditati SMS login – Angular & Firebase\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.tomislavstankovic.com\/blog\/sms-login-angular-firebase\/\" \/>\n<meta property=\"og:site_name\" content=\"Tomislav Stankovi\u0107\" \/>\n<meta property=\"article:published_time\" content=\"2019-01-07T04:00:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/01\/angular-firebase-sms-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=\"7 minuta\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/sms-login-angular-firebase\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/sms-login-angular-firebase\\\/\"},\"author\":{\"name\":\"Tomislav Stankovi\u0107\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/#\\\/schema\\\/person\\\/0329c549c57700034ea77f5d3d78396d\"},\"headline\":\"SMS login – Angular & Firebase\",\"datePublished\":\"2019-01-07T04:00:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/sms-login-angular-firebase\\\/\"},\"wordCount\":817,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/#\\\/schema\\\/person\\\/0329c549c57700034ea77f5d3d78396d\"},\"image\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/sms-login-angular-firebase\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/01\\\/angular-firebase-sms-login-min.png\",\"keywords\":[\"Angular\",\"Google Firebase\",\"login\",\"SMS\"],\"articleSection\":[\"Frontend\",\"Razvoj\"],\"inLanguage\":\"hr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/sms-login-angular-firebase\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/sms-login-angular-firebase\\\/\",\"url\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/sms-login-angular-firebase\\\/\",\"name\":\"SMS login - Angular & Firebase - Tomislav Stankovi\u0107\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/sms-login-angular-firebase\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/sms-login-angular-firebase\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/01\\\/angular-firebase-sms-login-min.png\",\"datePublished\":\"2019-01-07T04:00:39+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/sms-login-angular-firebase\\\/#breadcrumb\"},\"inLanguage\":\"hr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/sms-login-angular-firebase\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"hr\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/sms-login-angular-firebase\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/01\\\/angular-firebase-sms-login-min.png\",\"contentUrl\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/01\\\/angular-firebase-sms-login-min.png\",\"width\":825,\"height\":510,\"caption\":\"SMS login \u2013 Angular & Firebase\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/sms-login-angular-firebase\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Po\u010detna stranica\",\"item\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"SMS login – Angular & Firebase\"}]},{\"@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":"SMS login - Angular & Firebase - 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\/sms-login-angular-firebase\/","og_locale":"hr_HR","og_type":"article","og_title":"SMS login - Angular & Firebase - Tomislav Stankovi\u0107","og_description":"U nastavku ovog blog posta pokazati \u0107u kako napraviti jednostavnu Angular web aplikaciju sa funkcionalnom SMS prijavom. Prednosti kori\u0161tenja SMS prijave: – Spre\u010davanje la\u017enih korisnika – kori\u0161tenjem SMS prijave onemogu\u0107ava se kreiranje la\u017enih korisnika jer svaki korisnik koji se \u017eeli prijaviti treba imati jedinstveni broj telefona na koji \u0107e dobiti kod pomo\u0107u kojega \u0107e se … Nastavi \u010ditati SMS login – Angular & Firebase","og_url":"https:\/\/www.tomislavstankovic.com\/blog\/sms-login-angular-firebase\/","og_site_name":"Tomislav Stankovi\u0107","article_published_time":"2019-01-07T04:00:39+00:00","og_image":[{"width":825,"height":510,"url":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/01\/angular-firebase-sms-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":"7 minuta"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.tomislavstankovic.com\/blog\/sms-login-angular-firebase\/#article","isPartOf":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/sms-login-angular-firebase\/"},"author":{"name":"Tomislav Stankovi\u0107","@id":"https:\/\/www.tomislavstankovic.com\/blog\/#\/schema\/person\/0329c549c57700034ea77f5d3d78396d"},"headline":"SMS login – Angular & Firebase","datePublished":"2019-01-07T04:00:39+00:00","mainEntityOfPage":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/sms-login-angular-firebase\/"},"wordCount":817,"commentCount":0,"publisher":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/#\/schema\/person\/0329c549c57700034ea77f5d3d78396d"},"image":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/sms-login-angular-firebase\/#primaryimage"},"thumbnailUrl":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/01\/angular-firebase-sms-login-min.png","keywords":["Angular","Google Firebase","login","SMS"],"articleSection":["Frontend","Razvoj"],"inLanguage":"hr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.tomislavstankovic.com\/blog\/sms-login-angular-firebase\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.tomislavstankovic.com\/blog\/sms-login-angular-firebase\/","url":"https:\/\/www.tomislavstankovic.com\/blog\/sms-login-angular-firebase\/","name":"SMS login - Angular & Firebase - Tomislav Stankovi\u0107","isPartOf":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/sms-login-angular-firebase\/#primaryimage"},"image":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/sms-login-angular-firebase\/#primaryimage"},"thumbnailUrl":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/01\/angular-firebase-sms-login-min.png","datePublished":"2019-01-07T04:00:39+00:00","breadcrumb":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/sms-login-angular-firebase\/#breadcrumb"},"inLanguage":"hr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.tomislavstankovic.com\/blog\/sms-login-angular-firebase\/"]}]},{"@type":"ImageObject","inLanguage":"hr","@id":"https:\/\/www.tomislavstankovic.com\/blog\/sms-login-angular-firebase\/#primaryimage","url":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/01\/angular-firebase-sms-login-min.png","contentUrl":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/01\/angular-firebase-sms-login-min.png","width":825,"height":510,"caption":"SMS login \u2013 Angular & Firebase"},{"@type":"BreadcrumbList","@id":"https:\/\/www.tomislavstankovic.com\/blog\/sms-login-angular-firebase\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Po\u010detna stranica","item":"https:\/\/www.tomislavstankovic.com\/blog\/"},{"@type":"ListItem","position":2,"name":"SMS login – Angular & Firebase"}]},{"@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\/8910","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=8910"}],"version-history":[{"count":63,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/posts\/8910\/revisions"}],"predecessor-version":[{"id":8991,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/posts\/8910\/revisions\/8991"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/media\/8936"}],"wp:attachment":[{"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/media?parent=8910"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/categories?post=8910"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/tags?post=8910"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}