@@ -7,19 +7,19 @@ Ensure that you're executing these commands as **Administrator** on Windows and
7
7
8
8
### Prerequisites
9
9
The first step is to ensure you've latest version of ** Node** installed.
10
- You can get the latest version from [ here] ( https://nodejs.org ) .
10
+ You can get the latest version from [ here] ( https://nodejs.org ) .
11
11
This will install both node and npm.
12
12
13
13
After installing node, check the version by executing the following command in your prompt window.
14
14
15
15
``` bash
16
16
17
17
C:\p rojects> node -v
18
- v6.9.1
18
+ v6.9.1
19
19
20
20
```
21
21
22
- As of writting this document, this is the most stable version. If you're not on this version,
22
+ As of writting this document, this is the most stable version. If you're not on this version,
23
23
please upgrade yourself to latest version by installing node from [ here] ( https://nodejs.org ) .
24
24
25
25
Check your npm version by executing the following command.
@@ -84,18 +84,18 @@ C:\projects\Ionic_AngularFire2_Project> ionic serve
84
84
85
85
```
86
86
87
- If everything is installed correctly, the app should open your browser with the dev server running at following url
87
+ If everything is installed correctly, the app should open your browser with the dev server running at following url
88
88
** ` http://localhost:8100 ` ** and will display default home page.
89
89
90
- Stop you server by pressing "ctrl + c", if it is still running from the above step and
90
+ Stop you server by pressing "ctrl + c", if it is still running from the above step and
91
91
install typings and typescript globally by executing the following commands:
92
92
93
93
** Note:-** typings is not required for our current application to work, but it will be helpful incase you want to bring in
94
94
external libraries and extend this application.
95
95
96
96
``` bash
97
97
98
- C:\p rojects\I onic_AngularFire2_Project> npm install -g typings
98
+ C:\p rojects\I onic_AngularFire2_Project> npm install -g typings
99
99
100
100
C:\p rojects\I onic_AngularFire2_Project> npm install -g typescript
101
101
@@ -156,6 +156,7 @@ export const firebaseConfig = {
156
156
authDomain: " your-domain-name.firebaseapp.com" ,
157
157
databaseURL: " https://your-domain-name.firebaseio.com" ,
158
158
storageBucket: " your-domain-name.appspot.com" ,
159
+ messagingSenderId: ' <your-messaging-sender-id>'
159
160
};
160
161
161
162
@NgModule({
@@ -201,7 +202,7 @@ import { AngularFire, FirebaseListObservable } from 'angularfire2';
201
202
templateUrl: ' home.html'
202
203
})
203
204
export class HomePage {
204
-
205
+
205
206
items: FirebaseListObservable<any[]>;
206
207
207
208
constructor(public navCtrl: NavController,af: AngularFire) {
@@ -246,7 +247,7 @@ C:\projects\Ionic_AngularFire2_Project> ionic serve
246
247
247
248
## Configuring AngularFire2 Auth with Ionic2
248
249
249
- Continuing with the above example stop your server by pressing `ctrl+c` and go to command prompt and
250
+ Continuing with the above example stop your server by pressing `ctrl+c` and go to command prompt and
250
251
generate a service by executing the following command
251
252
252
253
```bash
@@ -295,7 +296,7 @@ export class AuthService {
295
296
} else {
296
297
return ' ' ;
297
298
}
298
- }
299
+ }
299
300
}
300
301
301
302
```
@@ -318,6 +319,7 @@ export const firebaseConfig = {
318
319
authDomain: "your-domain-name.firebaseapp.com",
319
320
databaseURL: "https://your-domain-name.firebaseio.com",
320
321
storageBucket: "your-domain-name.appspot.com",
322
+ messagingSenderId: ' < your-messaging-sender-id> '
321
323
};
322
324
323
325
@NgModule({
@@ -364,7 +366,7 @@ Update your `home.html` to add a login button. Your `home.html` should look like
364
366
365
367
```
366
368
367
- and finally, add the corresponding click handlers in `home.ts` as follows.
369
+ and finally, add the corresponding click handlers in `home.ts` as follows.
368
370
Also, ensure the *AuthService* is injected in the constructor. Your `home.ts` should look like this
369
371
370
372
```bash
@@ -380,7 +382,7 @@ import { AngularFire, FirebaseListObservable } from 'angularfire2';
380
382
templateUrl: ' home.html'
381
383
})
382
384
export class HomePage {
383
-
385
+
384
386
items: FirebaseListObservable<any[]>;
385
387
386
388
constructor(public navCtrl: NavController,af: AngularFire,private _auth: AuthService) {
@@ -392,20 +394,20 @@ export class HomePage {
392
394
.then(() => this.onSignInSuccess());
393
395
}
394
396
395
- private onSignInSuccess(): void {
397
+ private onSignInSuccess(): void {
396
398
console.log("Facebook display name ",this._auth.displayName());
397
399
}
398
400
399
401
}
400
402
401
403
```
402
404
403
- Now run your app and if everything is configured correctly, you should be able to click on the login button in your app,
405
+ Now run your app and if everything is configured correctly, you should be able to click on the login button in your app,
404
406
which should open the facebook pop-up.
405
407
406
408
Once you authenticate yourself, you should see your Facebook display name in console.
407
409
408
- You can try redirecting yourself to another page to grab additional details from Facebook.
410
+ You can try redirecting yourself to another page to grab additional details from Facebook.
409
411
410
412
411
413
***Running our application on mobile phone.***
@@ -414,11 +416,11 @@ Ensure you've the platform added to your project. If not add the platform by exe
414
416
415
417
` ` `
416
418
417
- C:\p rojects\I onic_AngularFire2_Project> ionic platform add android
419
+ C:\p rojects\I onic_AngularFire2_Project> ionic platform add android
418
420
419
421
` ` `
420
422
421
- This adds android platform for your project.
423
+ This adds android platform for your project.
422
424
Replace android with ios, if you' re on Mac book or add both. The generic command is ```ionic platform add <platform-name>```
423
425
424
426
Now, let' s try to run the app in browser. Execute the command
@@ -429,8 +431,8 @@ C:\projects\Ionic_AngularFire2_Project> ionic run android
429
431
430
432
` ` `
431
433
432
- This should run the app on your mobile phone. Now click on the Facebook button and you' ll notice the button doesn' t work anymore.
433
- This is because the code written so far is good for running our application in browsers, but when running the application on mobile phones, we need to have access to *** Native Mobile API' s***, which are provided by _Corodova Plugins_.
434
+ This should run the app on your mobile phone. Now click on the Facebook button and you' ll notice the button doesn' t work anymore.
435
+ This is because the code written so far is good for running our application in browsers, but when running the application on mobile phones, we need to have access to *** Native Mobile API' s***, which are provided by _Corodova Plugins_.
434
436
435
437
**We can access these corodva plugins, using Ionic Native, which are nothing but wrappers for cordova plugins.**
436
438
@@ -440,7 +442,7 @@ Let's look at configuring and installing facebook plugin [here](http://ionicfram
440
442
_Ensure you follow the steps correctly to configure your app._
441
443
442
444
Once you create your app and make a note of your App ID, go to command prompt in your project directory and execute the following command
443
-
445
+
444
446
```
445
447
C:\projects\Ionic_AngularFire2_Project>
446
448
ionic plugin add cordova-plugin-facebook4 --save --variable APP_ID="123456789" --variable APP_NAME="myApp"
@@ -519,7 +521,7 @@ export class AuthService {
519
521
520
522
```
521
523
522
- Verfiy your app is running in browser by executing the following command
524
+ Verfiy your app is running in browser by executing the following command
523
525
524
526
```
525
527
0 commit comments