@@ -12,34 +12,34 @@ This tutorial uses **Facebook** as the sign-in provider. After completion of thi
1212other sign-in providers like ** Twitter** , ** Google** on your own.
1313
1414### 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.
1616You can get the latest version from [ here] ( https://nodejs.org ) .
1717This will install both node and npm.
1818
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:
2020
2121``` bash
2222
2323C:\p rojects> node -v
2424v6.10.2
2525
2626```
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,
2828please upgrade yourself to latest version by installing node from [ here] ( https://nodejs.org ) .
2929
30- Check your npm version by executing the following command.
30+ Check your npm version by executing the following command:
3131``` bash
3232
3333C:\p rojects> npm -v
34343.10.10
3535
3636```
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.
3838
3939``` bash
4040C:\p rojects> npm install -g @angular/cli
4141```
42- Check your angular version by executing the following command.
42+ Check your angular version by executing the following command:
4343
4444``` bash
4545C:\p rojects> ng -v
@@ -63,7 +63,7 @@ C:\projects>npm install -g ionic
6363
6464```
6565
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.
6767
6868``` bash
6969C:\p rojects> cordova -v
@@ -73,19 +73,19 @@ C:\projects>ionic -v
73733.4.0
7474```
7575
76- These are the latest versions as of writting this document .
76+ These are the latest versions as of this writing .
7777
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.
7979
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:
8181
8282``` bash
8383C:\p rojects> ionic start auth-ng4-ionic3-af2 blank
8484```
8585
8686> The command ionic start will create the project with name "Ionic_AngularFire2_Project" using "blank" template.
8787
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.
8989
9090> C:\projects\auth-ng4-ionic3-af2>ionic info
9191
@@ -115,7 +115,7 @@ System:
115115```
116116You need to ensure you've got Ionic Framework Version 3, as shown above.
117117
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:
119119
120120``` json
121121"dependencies" : {
@@ -147,19 +147,19 @@ Alternatively you can open `package.json` to ensure you've got the following Ang
147147
148148If not, replace them to match above. These are the latest as of writing this tutorial.
149149
150- To start your app, execute the following command
150+ To start your app, execute the following command:
151151
152152``` bash
153153
154154C:\p rojects\a uth-ng4-ionic3-af2> ionic serve
155155
156156```
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
158158** ` http://localhost:8100 ` ** and will display default home page.
159159
160160### Configuring AngularFire2 and Firebase
161161
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:
163163
164164``` ts
165165
@@ -249,7 +249,7 @@ following changes:
249249
250250> 3 ) Call the list method on AngularFireDatabase object.
251251
252- Your ` home.ts ` file should look like this.
252+ Your ` home.ts ` file should look like this:
253253
254254``` typescript
255255
@@ -402,7 +402,7 @@ Also, update your `app.module.ts` to contain following import
402402and add it to the imports array.
403403
404404
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
406406authenticate. Once authenticated, you should see the response from Facebook in console window.
407407
408408Inspect 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 {
458458
459459```
460460
461- and ` home.html ` shouldlook like this
461+ and ` home.html ` should look like this:
462462
463463``` html
464464
@@ -486,12 +486,12 @@ which should open the facebook pop-up.
486486Once you authenticate yourself, you should see your Facebook display name on your screen.
487487Click the Logout button, which will make the AuthState to null and you should see the difference on your screen.
488488
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.
490490
491491
492492*** Running our application on mobile phone***
493493
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:
495495
496496```
497497
@@ -502,7 +502,7 @@ C:\projects\auth-ng4-ionic3-af2>ionic platform add android
502502This adds android platform for your project.
503503Replace android with ios, if you're on Mac book or add both. The generic command is ``` ionic platform add <platform-name> ```
504504
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:
506506
507507```
508508
@@ -518,10 +518,10 @@ mobile phones, we need to have access to ***Native Mobile API's***, which are pr
518518
519519List of all Ionic Native API's for cordova plugins can be found [ here] ( http://ionicframework.com/docs/v2/native/ ) .
520520
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/ ) .
522522_ Ensure you follow the steps correctly to configure your app._
523523
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.
525525Next go to command prompt in your project directory and execute the following command by replacing the ` APP_ID ` with your App Id
526526and ` APP_NAME ` with your App Name.
527527
@@ -532,7 +532,7 @@ ionic cordova plugin add cordova-plugin-facebook4 --variable APP_ID="123456789"
532532
533533```
534534
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:
536536
537537``` xml
538538
@@ -546,15 +546,15 @@ This will install the cordova plugin for facebook.
546546
547547You should also see a sub-folder named ` cordova-plugin-facebook4 ` under your ` plugins ` folder.
548548
549- Add the native dependencies by executing the following command.
549+ Add the native dependencies by executing the following command:
550550
551551``` bash
552552
553553C:\p rojects\a uth-ng4-ionic3-af2> npm install --save @ionic-native/facebook
554554
555555```
556556
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 ` :
558558
559559``` bash
560560
@@ -572,7 +572,7 @@ import { Facebook } from '@ionic-native/facebook';
572572
573573Update the "signInWithFacebook" method and use Platform Service to determine the platform and run the appropriate code.
574574
575- your ` home.ts ` should look as below
575+ Your ` home.ts ` should look as below:
576576
577577``` typescript
578578
@@ -629,7 +629,7 @@ export class HomePage {
629629
630630You'll also need to add the "Facebook" object in the provider section in app.module.ts.
631631
632- The final ` app.module.ts ` should look like below
632+ The final ` app.module.ts ` should look like below:
633633
634634``` typescript
635635
@@ -684,21 +684,21 @@ export class AppModule {}
684684
685685```
686686
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:
688688
689689``` bash
690690
691691C:\p rojects\a uth-ng4-ionic3-af2> ionic serve
692692
693693```
694694
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:
696696
697697``` bash
698698
699699C:\p rojects\a uth-ng4-ionic3-af2> ionic cordova run android
700700
701701```
702702
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.
704704On successful authentication, you should see your Facebook Display name and profile picture on your screen.
0 commit comments