@@ -142,7 +142,7 @@ and add the following three entries.
142
142
143
143
your ` app.module.ts ` file should look something like this.
144
144
145
- ``` bash
145
+ ``` ts
146
146
147
147
import { NgModule } from ' @angular/core' ;
148
148
import { IonicApp , IonicModule } from ' ionic-angular' ;
@@ -190,7 +190,7 @@ Now inject AngularFireDatabase in your component. Open your `home.ts` by going i
190
190
191
191
Your ` home.ts ` file should look like this.
192
192
193
- ` ` ` bash
193
+ ``` ts
194
194
195
195
import { Component } from ' @angular/core' ;
196
196
import { NavController } from ' ionic-angular' ;
@@ -215,7 +215,7 @@ export class HomePage {
215
215
216
216
** Update** your ` home.html ` at ` src/pages/home/home.html ` , with following entry
217
217
218
- ` ` ` bash
218
+ ``` html
219
219
220
220
<ion-header >
221
221
<ion-navbar >
@@ -259,21 +259,20 @@ C:\projects\Ionic_AngularFire2_Project> ionic g provider AuthService
259
259
This should create the AuthService under ` src/providers/auth-service.ts ` .
260
260
Update the service with the following code.
261
261
262
- ` ` ` bash
262
+ ``` typescript
263
263
import { Observable } from ' rxjs/Observable' ;
264
264
import { Injectable } from ' @angular/core' ;
265
265
import { AngularFireAuth } from ' angularfire2/auth' ;
266
- import { User } from ' firebase' ;
267
- import { FacebookAuthProvider } from ' firebase/auth' ;
266
+ import * as firebase from ' firebase/app' ;
268
267
269
268
@Injectable ()
270
269
export class AuthService {
271
- private authState: Observable< User> ;
272
- private currentUser: User;
270
+ private authState: Observable <firebase . User >;
271
+ private currentUser: firebase . User ;
273
272
274
273
constructor (public afAuth$ : AngularFireAuth ) {
275
274
this .authState = afAuth$ .authState ;
276
- afAuth$.subscribe(( user: User) => {
275
+ afAuth$ .subscribe ((user : firebase . User ) => {
277
276
this .currentUser = user ;
278
277
});
279
278
}
@@ -283,7 +282,7 @@ export class AuthService {
283
282
}
284
283
285
284
signInWithFacebook(): firebase .Promise <FirebaseAuthState > {
286
- return this.afAuth$.auth.signInWithPopup(new FacebookAuthProvider()) ;
285
+ return this .afAuth$ .auth .signInWithPopup (new firebase . auth . FacebookAuthProvider ());
287
286
}
288
287
289
288
signOut(): void {
@@ -303,7 +302,7 @@ export class AuthService {
303
302
304
303
Add your service in ` app.module.ts ` . Your ` app.module.ts ` should look like this
305
304
306
- ` ` ` bash
305
+ ``` ts
307
306
308
307
import { NgModule } from ' @angular/core' ;
309
308
import { IonicApp , IonicModule } from ' ionic-angular' ;
@@ -344,7 +343,7 @@ export class AppModule { }
344
343
345
344
Update your ` home.html ` to add a login button. Your ` home.html ` should look like this
346
345
347
- ` ` ` bash
346
+ ``` html
348
347
349
348
<ion-header >
350
349
<ion-navbar >
@@ -369,7 +368,7 @@ Update your `home.html` to add a login button. Your `home.html` should look like
369
368
and finally, add the corresponding click handlers in ` home.ts ` as follows.
370
369
Also, ensure the * AuthService* is injected in the constructor. Your ` home.ts ` should look like this
371
370
372
- ` ` ` bash
371
+ ``` ts
373
372
374
373
import { Component } from ' @angular/core' ;
375
374
import { NavController } from ' ionic-angular' ;
@@ -457,7 +456,7 @@ Add the platform to your facebook portal as mentioned in the document [here](htt
457
456
458
457
Now import the Platform and Facebook objects in your ``` auth-service.ts ```
459
458
460
- ` ` `
459
+ ``` ts
461
460
import { Platform } from ' ionic-angular' ;
462
461
import { Facebook } from ' ionic-native' ;
463
462
```
@@ -470,19 +469,19 @@ your ```auth-service.ts``` code should look like this.
470
469
import { Observable } from ' rxjs/Observable' ;
471
470
import { Injectable } from ' @angular/core' ;
472
471
import { AngularFireAuth } from ' angularfire2/auth' ;
473
- import { User } from ' firebase' ;
474
- import { FacebookAuthProvider } from ' firebase/auth ' ;
472
+ import * as firebase from ' firebase/app ' ;
473
+
475
474
import { Platform } from ' ionic-angular' ;
476
475
import { Facebook } from ' ionic-native' ;
477
476
478
477
@Injectable ()
479
478
export class AuthService {
480
- private authState: Observable< User> ;
481
- private currentUser: User;
479
+ private authState: Observable <firebase . User >;
480
+ private currentUser: firebase . User ;
482
481
483
482
constructor (public afAuth$ : AngularFireAuth ) {
484
483
this .authState = afAuth$ .authState ;
485
- afAuth$.subscribe(( user: User) => {
484
+ afAuth$ .subscribe ((user : firebase . User ) => {
486
485
this .currentUser = user ;
487
486
});
488
487
}
@@ -495,10 +494,10 @@ export class AuthService {
495
494
if (this .platform .is (' cordova' )) {
496
495
return Facebook .login ([' email' , ' public_profile' ]).then (res => {
497
496
const facebookCredential = firebase .auth .FacebookAuthProvider .credential (res .authResponse .accessToken );
498
- return this.afAuth$.aut .signInWithCredential(facebookCredential);
497
+ return this .afAuth$ .auth .signInWithCredential (facebookCredential );
499
498
});
500
499
} else {
501
- return this.afAuth$.auth.signInWithPopup(new FacebookAuthProvider ());
500
+ return this .afAuth$ .auth .signInWithPopup (new firebase . auth . FacebookAuthProvider ());
502
501
}
503
502
504
503
}
0 commit comments