Skip to content

Commit cd2d6f6

Browse files
mukesh51katowulf
authored andcommitted
Update Auth-with-Ionic2.md
Added the section for running application on mobile phone.
1 parent 515ab48 commit cd2d6f6

File tree

1 file changed

+130
-0
lines changed

1 file changed

+130
-0
lines changed

docs/Auth-with-Ionic2.md

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -406,3 +406,133 @@ which should open the facebook pop-up.
406406
Once you authenticate yourself, you should see your Facebook display name in console.
407407
408408
You can try redirecting yourself to another page to grab additional details from Facebook.
409+
410+
411+
***Running our application on mobile phone.***
412+
413+
Ensure you've the platform added to your project. If not add the platform by executing the following command.
414+
415+
```
416+
417+
C:\projects\Ionic_AngularFire2_Project>ionic platform add android
418+
419+
```
420+
421+
This adds android platform for your project.
422+
Replace android with ios, if you're on Mac book or add both. The generic command is ```ionic platform add <platform-name>```
423+
424+
Now, let's try to run the app in browser. Execute the command
425+
426+
```
427+
428+
C:\projects\Ionic_AngularFire2_Project> ionic run android
429+
430+
```
431+
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+
435+
**We can access these corodva plugins, using Ionic Native, which are nothing but wrappers for cordova plugins.**
436+
437+
List of all Ionic Native API's for corodova plugins can be found [here](http://ionicframework.com/docs/v2/native/).
438+
439+
Let's look at configuring and installing facebook plugin [here](http://ionicframework.com/docs/v2/native/facebook/).
440+
_Ensure you follow the steps correctly to configure your app._
441+
442+
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+
444+
```
445+
C:\projects\Ionic_AngularFire2_Project>
446+
ionic plugin add cordova-plugin-facebook4 --save --variable APP_ID="123456789" --variable APP_NAME="myApp"
447+
448+
```
449+
450+
Replace App ID with your app id from portal and provide your app name.
451+
452+
This will install the corodva plugin for facebook.
453+
454+
Add the platform to your facebook portal as mentioned in the document [here](http://ionicframework.com/docs/v2/native/facebook/).
455+
456+
Now import the Platform and Facebook objects in your ```auth-service.ts```
457+
458+
```
459+
import { Platform } from 'ionic-angular';
460+
import { Facebook } from 'ionic-native';
461+
```
462+
463+
and update the signInWithFacebook() method.
464+
465+
your ```auth-service.ts``` code should look like this.
466+
467+
```ts
468+
469+
470+
import { Injectable } from '@angular/core';
471+
import { AuthProviders, FirebaseAuth, FirebaseAuthState, AuthMethods } from 'angularfire2';
472+
473+
import { Platform } from 'ionic-angular';
474+
import { Facebook } from 'ionic-native';
475+
476+
@Injectable()
477+
export class AuthService {
478+
private authState: FirebaseAuthState;
479+
480+
constructor(public auth$: FirebaseAuth, private platform: Platform) {
481+
this.authState = auth$.getAuth();
482+
auth$.subscribe((state: FirebaseAuthState) => {
483+
this.authState = state;
484+
});
485+
}
486+
487+
get authenticated(): boolean {
488+
return this.authState !== null;
489+
}
490+
491+
signInWithFacebook(): firebase.Promise<FirebaseAuthState> {
492+
if (this.platform.is('cordova')) {
493+
Facebook.login(['email', 'public_profile']).then(res => {
494+
const facebookCredential = firebase.auth.FacebookAuthProvider.credential(res.authResponse.accessToken);
495+
return firebase.auth().signInWithCredential(facebookCredential);
496+
});
497+
} else {
498+
return this.auth$.login({
499+
provider: AuthProviders.Facebook,
500+
method: AuthMethods.Popup
501+
});
502+
}
503+
504+
}
505+
506+
signOut(): void {
507+
this.auth$.logout();
508+
}
509+
510+
displayName(): string {
511+
if (this.authState != null) {
512+
return this.authState.facebook.displayName;
513+
} else {
514+
return '';
515+
}
516+
}
517+
}
518+
519+
520+
```
521+
522+
Verfiy your app is running in browser by executing the following command
523+
524+
```
525+
526+
C:\projects\Ionic_AngularFire2_Project>ionic serve
527+
528+
```
529+
530+
Everything should work. Now trying running the app on your android phone
531+
532+
```
533+
534+
C:\projects\Ionic_AngularFire2_Project> ionic run android
535+
536+
```
537+
538+
Once the App launches click on the Facebook login button and it should open up the native facebook app for authentication and once your enter credentials and gets succesfully authenticated, it should redirect you back to the home page.

0 commit comments

Comments
 (0)