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.
|
1 2 3 |
$ ionic start IonicPrijavaG blank $ cd IonicPrijavaG $ ionic cordova platform add android |
Sada ću odmah promijeniti i APP ID oznaku unutar config.xml iz id="io.ionic.starter" u id="hr.tomislavstankovic.ionicprijavag".
Postavljanje Firebase projekta
Temelj za uspješnu Google prijavu je pravilno postavljen Firebase projekt.
Na poveznici https://developers.facebook.com/apps/ kreiram profil za aplikaciju i pod Authentication – Sign-in providers odabirem Google.
Ovdje sada imam i Web Client ID koji će mi kasnije trebati unutar funkcije za prijavu.
SHA-1
Kako je i navedeno na slici iznad, moram kreirati SHA-1. Ovo radim na isti način kao i prilikom pripreme aplikacije za objavu na Google Play Store.
|
1 |
$ keytool -genkey -v -keystore IonicGooglePrijava.keystore -alias IonicGooglePrijava -keyalg RSA -keysize 2048 -validity 10000 |
Google sign-in is automatically configured on your connected iOS and web apps. To set up Google sign-in for your Android apps, you need to add the SHA1 fingerprint for each app on your Project Settings.
Sada imam IonicGooglePrijava.keystore datoteku koja je preduvjet za kreiranje SHA-1.
Kreiranje, produkcijskog, SHA-1 potpisa radi se sljedećom naredbom
|
1 2 |
keytool -exportcert -list -v \ -alias myalias -keystore IonicGooglePrijava.keystore |
Kreiranje, dev, SHA-1 potpisa radi se sljedećom naredbom uz password android
|
1 |
$ keytool -exportcert -list -v -alias androiddebugkey -keystore ~/.android/debug.keystore |
Pod Project settings – Your apps klikom na Add Firebase to your Android app radim pripremu za Android verziju Ionic aplikacije.
Ovdje unosim ranije kreiran SHA-1.
Implementacija Google prijave
Prije svega moram instalirati Ionic Native Google Plus plugin koristeći sljedeću naredbu
|
1 2 |
$ ionic cordova plugin add cordova-plugin-googleplus --variable REVERSED_CLIENT_ID=myreversedclientid $ npm install --save @ionic-native/google-plus |
U ovom je koraku potreban REVERSED_CLIENT_ID kojega mogu dobiti ako posjetim https://console.developers.google.com/, 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
|
1 2 3 4 5 6 7 8 |
import { GooglePlus } from '@ionic-native/google-plus'; ... providers: [ StatusBar, SplashScreen, GooglePlus, {provide: ErrorHandler, useClass: IonicErrorHandler} ] |
Ako sada pokrenem aplikaciju vidjet ću samo HomePage stranicu jer sam koristio blank temu i zato ću sada kreirati novu stranicu koja će sadržavati gumb za prijavu. Tek nakon uspješne prijave prikaz će se HomePage stranica.
|
1 |
$ ionic generate page Prijava |
Sada ću u app.component.ts postaviti da mi je PrijavaPage početna stranica (rootPage) nakon što se pokrene aplikacija.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<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> |
Funkcionalnost će se sastojati samo od funkcije za prijavu prijavaGoogle().
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<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> |
Funkcionalnost HomePage stranice sastoji se od prikaza detalja o korisniku i funkcije za odjavu.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
{ "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" ] } } |
