Skip to content

Commit 8352291

Browse files
nicolaslwilsondavideast
authored andcommitted
docs(ionic): Update Auth-with-Ionic3-Angular4.md (#1129)
Fixed some minor spelling errors, made punctuation more consistent throughout.
1 parent b0d40c0 commit 8352291

File tree

1 file changed

+31
-31
lines changed

1 file changed

+31
-31
lines changed

docs/Auth-with-Ionic3-Angular4.md

Lines changed: 31 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -12,34 +12,34 @@ This tutorial uses **Facebook** as the sign-in provider. After completion of thi
1212
other 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.
1616
You can get the latest version from [here](https://nodejs.org).
1717
This 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

2323
C:\projects>node -v
2424
v6.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,
2828
please 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

3333
C:\projects>npm -v
3434
3.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
4040
C:\projects>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
4545
C:\projects>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
6969
C:\projects>cordova -v
@@ -73,19 +73,19 @@ C:\projects>ionic -v
7373
3.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
8383
C:\projects> 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
```
116116
You 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

148148
If 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

154154
C:\projects\auth-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
402402
and 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
406406
authenticate. Once authenticated, you should see the response from Facebook in console window.
407407

408408
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 {
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.
486486
Once you authenticate yourself, you should see your Facebook display name on your screen.
487487
Click 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
502502
This adds android platform for your project.
503503
Replace 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

519519
List 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.
525525
Next go to command prompt in your project directory and execute the following command by replacing the `APP_ID` with your App Id
526526
and `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

547547
You 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

553553
C:\projects\auth-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

573573
Update 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

630630
You'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

691691
C:\projects\auth-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

699699
C:\projects\auth-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.
704704
On successful authentication, you should see your Facebook Display name and profile picture on your screen.

0 commit comments

Comments
 (0)