@@ -12,34 +12,34 @@ This tutorial uses **Facebook** as the sign-in provider. After completion of thi
12
12
other sign-in providers like ** Twitter** , ** Google** on your own.
13
13
14
14
### Prerequisites
15
- The first step is to ensure you've latest version of ** Node** installed.
15
+ The first step is to ensure you have latest version of ** Node** installed.
16
16
You can get the latest version from [ here] ( https://nodejs.org ) .
17
17
This will install both node and npm.
18
18
19
- After installing node, check the version by executing the following command in your prompt window.
19
+ After installing node, check the version by executing the following command in your prompt window:
20
20
21
21
``` bash
22
22
23
23
C:\p rojects> node -v
24
24
v6.10.2
25
25
26
26
```
27
- As of writting this document , this is the most stable version. If you're not on this version,
27
+ As of this writing , this is the most stable version. If you're not on this version,
28
28
please upgrade yourself to latest version by installing node from [ here] ( https://nodejs.org ) .
29
29
30
- Check your npm version by executing the following command.
30
+ Check your npm version by executing the following command:
31
31
``` bash
32
32
33
33
C:\p rojects> npm -v
34
34
3.10.10
35
35
36
36
```
37
- Install the Angular CLI, which will be used to build our Angular project and install Angular version 4 later.
37
+ Install the Angular CLI, which will be used to build our Angular project and install Angular version 4 or later.
38
38
39
39
``` bash
40
40
C:\p rojects> npm install -g @angular/cli
41
41
```
42
- Check your angular version by executing the following command.
42
+ Check your angular version by executing the following command:
43
43
44
44
``` bash
45
45
C:\p rojects> ng -v
@@ -63,7 +63,7 @@ C:\projects>npm install -g ionic
63
63
64
64
```
65
65
66
- Once the above commands are executed successfully, Check the versions of cordova and ionic by executing the following commands.
66
+ Once the above commands are executed successfully, check the versions of cordova and ionic by executing the following commands.
67
67
68
68
``` bash
69
69
C:\p rojects> cordova -v
@@ -73,19 +73,19 @@ C:\projects>ionic -v
73
73
3.4.0
74
74
```
75
75
76
- These are the latest versions as of writting this document .
76
+ These are the latest versions as of this writing .
77
77
78
- On successful execution of above commands, you're all set to create your app with Ionic framework.
78
+ On successful execution of the above commands, you're all set to create your app with Ionic framework.
79
79
80
- To create your app, change into the directory where you want your app to reside and execute the following command
80
+ To create your app, change into the directory where you want your app to reside and execute the following command:
81
81
82
82
``` bash
83
83
C:\p rojects> ionic start auth-ng4-ionic3-af2 blank
84
84
```
85
85
86
86
> The command ionic start will create the project with name "Ionic_AngularFire2_Project" using "blank" template.
87
87
88
- Change to the project directory, which was just created with above command
88
+ Change to the project directory, which was just created with the above command.
89
89
90
90
> C:\projects\auth-ng4-ionic3-af2>ionic info
91
91
@@ -115,7 +115,7 @@ System:
115
115
```
116
116
You need to ensure you've got Ionic Framework Version 3, as shown above.
117
117
118
- Alternatively you can open ` package.json ` to ensure you've got the following Angular and Ionic versions
118
+ Alternatively you can open ` package.json ` to ensure you've got the following Angular and Ionic versions:
119
119
120
120
``` json
121
121
"dependencies" : {
@@ -147,19 +147,19 @@ Alternatively you can open `package.json` to ensure you've got the following Ang
147
147
148
148
If not, replace them to match above. These are the latest as of writing this tutorial.
149
149
150
- To start your app, execute the following command
150
+ To start your app, execute the following command:
151
151
152
152
``` bash
153
153
154
154
C:\p rojects\a uth-ng4-ionic3-af2> ionic serve
155
155
156
156
```
157
- If everything is installed correctly, the app should open your browser with the dev server running at following url
157
+ If everything is installed correctly, the app should open your browser with the dev server running at the following url
158
158
** ` http://localhost:8100 ` ** and will display default home page.
159
159
160
160
### Configuring AngularFire2 and Firebase
161
161
162
- Install angularfire2 and firebase by executing the following command in your project directory
162
+ Install angularfire2 and firebase by executing the following command in your project directory:
163
163
164
164
``` ts
165
165
@@ -249,7 +249,7 @@ following changes:
249
249
250
250
> 3 ) Call the list method on AngularFireDatabase object.
251
251
252
- Your ` home.ts ` file should look like this.
252
+ Your ` home.ts ` file should look like this:
253
253
254
254
``` typescript
255
255
@@ -402,7 +402,7 @@ Also, update your `app.module.ts` to contain following import
402
402
and add it to the imports array.
403
403
404
404
405
- Run the app and click on the Login Button, you should see a pop-up asking you to enter username and password for facebook to
405
+ Run the app and click on the Login Button, you should see a pop-up asking you to enter username and password for Facebook to
406
406
authenticate. Once authenticated, you should see the response from Facebook in console window.
407
407
408
408
Inspect the Object in the console, under ` user ` property, you should see all the attributes and we're going to use two of them, next.
@@ -458,7 +458,7 @@ export class HomePage {
458
458
459
459
```
460
460
461
- and ` home.html ` shouldlook like this
461
+ and ` home.html ` should look like this:
462
462
463
463
``` html
464
464
@@ -486,12 +486,12 @@ which should open the facebook pop-up.
486
486
Once you authenticate yourself, you should see your Facebook display name on your screen.
487
487
Click the Logout button, which will make the AuthState to null and you should see the difference on your screen.
488
488
489
- You can try redirecting yourself to another page to grab additional details from Facebook and experiement on your own.
489
+ You can try redirecting yourself to another page to grab additional details from Facebook and experiment on your own.
490
490
491
491
492
492
*** Running our application on mobile phone***
493
493
494
- Ensure you've the platform added to your project. If not add the platform by executing the following command.
494
+ Ensure you've the platform added to your project. If not add the platform by executing the following command:
495
495
496
496
```
497
497
@@ -502,7 +502,7 @@ C:\projects\auth-ng4-ionic3-af2>ionic platform add android
502
502
This adds android platform for your project.
503
503
Replace android with ios, if you're on Mac book or add both. The generic command is ``` ionic platform add <platform-name> ```
504
504
505
- Now, let's try to run the app in browser. Execute the command
505
+ Now, let's try to run the app in browser. Execute the command:
506
506
507
507
```
508
508
@@ -518,10 +518,10 @@ mobile phones, we need to have access to ***Native Mobile API's***, which are pr
518
518
519
519
List of all Ionic Native API's for cordova plugins can be found [ here] ( http://ionicframework.com/docs/v2/native/ ) .
520
520
521
- Let's look at configuring and installing facebook plugin [ here] ( http://ionicframework.com/docs/v2/native/facebook/ ) .
521
+ Let's look at configuring and installing the Facebook plugin [ here] ( http://ionicframework.com/docs/v2/native/facebook/ ) .
522
522
_ Ensure you follow the steps correctly to configure your app._
523
523
524
- Login to facebook dashboard [ here] ( https://developers.facebook.com/apps/ ) , go to your App and make a note of your App ID.
524
+ Login to the Facebook dashboard [ here] ( https://developers.facebook.com/apps/ ) , go to your App and make a note of your App ID.
525
525
Next go to command prompt in your project directory and execute the following command by replacing the ` APP_ID ` with your App Id
526
526
and ` APP_NAME ` with your App Name.
527
527
@@ -532,7 +532,7 @@ ionic cordova plugin add cordova-plugin-facebook4 --variable APP_ID="123456789"
532
532
533
533
```
534
534
535
- This should add following entry in your config.xml, located at the root of your project.
535
+ This should add the following entry in your config.xml, located at the root of your project:
536
536
537
537
``` xml
538
538
@@ -546,15 +546,15 @@ This will install the cordova plugin for facebook.
546
546
547
547
You should also see a sub-folder named ` cordova-plugin-facebook4 ` under your ` plugins ` folder.
548
548
549
- Add the native dependencies by executing the following command.
549
+ Add the native dependencies by executing the following command:
550
550
551
551
``` bash
552
552
553
553
C:\p rojects\a uth-ng4-ionic3-af2> npm install --save @ionic-native/facebook
554
554
555
555
```
556
556
557
- After executing the above command, ensure you got following entry in your ` package.json `
557
+ After executing the above command, ensure you have the following entry in your ` package.json ` :
558
558
559
559
``` bash
560
560
@@ -572,7 +572,7 @@ import { Facebook } from '@ionic-native/facebook';
572
572
573
573
Update the "signInWithFacebook" method and use Platform Service to determine the platform and run the appropriate code.
574
574
575
- your ` home.ts ` should look as below
575
+ Your ` home.ts ` should look as below:
576
576
577
577
``` typescript
578
578
@@ -629,7 +629,7 @@ export class HomePage {
629
629
630
630
You'll also need to add the "Facebook" object in the provider section in app.module.ts.
631
631
632
- The final ` app.module.ts ` should look like below
632
+ The final ` app.module.ts ` should look like below:
633
633
634
634
``` typescript
635
635
@@ -684,21 +684,21 @@ export class AppModule {}
684
684
685
685
```
686
686
687
- Verfiy your app is running in browser by executing the following command
687
+ Verfiy your app is running in browser by executing the following command:
688
688
689
689
``` bash
690
690
691
691
C:\p rojects\a uth-ng4-ionic3-af2> ionic serve
692
692
693
693
```
694
694
695
- Everything should work. Now trying running the app on your android phone
695
+ Everything should work. Now trying running the app on your android phone:
696
696
697
697
``` bash
698
698
699
699
C:\p rojects\a uth-ng4-ionic3-af2> ionic cordova run android
700
700
701
701
```
702
702
703
- Once the App launches click on the Login button. You should get the facebook pop-up window. Enter your credentials.
703
+ Once the App launches click on the Login button. You should get the Facebook pop-up window. Enter your credentials.
704
704
On successful authentication, you should see your Facebook Display name and profile picture on your screen.
0 commit comments