From 89d2fdf7433c7369be43aa5e54573cf15e04856d Mon Sep 17 00:00:00 2001 From: hiepxanh Date: Mon, 11 Jun 2018 08:11:11 +0700 Subject: [PATCH 1/6] authentication tutorial with ionic authentication with ionic and firebase --- docs/ionic/authentication.md | 94 ++++++++++++++++++++++++++++++++++++ 1 file changed, 94 insertions(+) create mode 100644 docs/ionic/authentication.md diff --git a/docs/ionic/authentication.md b/docs/ionic/authentication.md new file mode 100644 index 000000000..3cc84e062 --- /dev/null +++ b/docs/ionic/authentication.md @@ -0,0 +1,94 @@ +# STEP 1: install this plugin: +``` +1) ionic cordova plugin add cordova-universal-links-plugin +2) ionic cordova plugin add cordova-plugin-buildinfo +3) ionic cordova plugin add cordova-plugin-browsertab +4) ionic cordova plugin add cordova-plugin-inappbrowser +5) ionic cordova plugin add cordova-plugin-customurlscheme (for ios) +``` + +# STEP 2: Add Firebase to your Ionic + + STEP 2.1: [setup firebase to angular project] + (https://github.com/angular/angularfire2/blob/master/docs/install-and-setup.md) + + STEP 2.2: To set up an Android app, go to [Firebase Console](https://console.firebase.google.com/) then + Click **Add Firebase to your Android app** and follow the setup steps. + +# STEP 3: Set up Firebase Authentication for Cordova ( sumary from [firebase instruction](https://firebase.google.com/docs/auth/web/cordova)) + + STEP 3.1: In the Firebase console, open the **Dynamic Links** section at bottom left panel, setup by they instruction + + STEP 3.2: add this to config.xml at root level of project: +``` + + + + + + + + + + +``` + + STEP 3.3: make sure your `` the same with android app's id you + added in firebase at STEP 2.2. + +# STEP 4: add login code: +at login.service.ts add this function: +``` +import { AngularFireAuth } from 'angularfire2/auth'; +import * as firebase from 'firebase/app'; +import AuthProvider = firebase.auth.AuthProvider; + +export class AuthService { + private user: firebase.User; + constructor(public afAuth: AngularFireAuth) { + afAuth.authState.subscribe(user => { + this.user = user; + }); + } + + signInWithFacebook() { + console.log('Sign in with google'); + return this.oauthSignIn(new firebase.auth.FacebookAuthProvider()); + } + + signInWithGoogle() { + console.log('Sign in with google'); + return this.oauthSignIn(new firebase.auth.GoogleAuthProvider()); + } + + private oauthSignIn(provider: AuthProvider) { + if (!(window).cordova) { + return this.afAuth.auth.signInWithPopup(provider); + } else { + return this.afAuth.auth.signInWithRedirect(provider) + .then(() => { + return this.afAuth.auth.getRedirectResult().then( result => { + // This gives you a Google Access Token. + // You can use it to access the Google API. + let token = result.credential.accessToken; + // The signed-in user info. + let user = result.user; + console.log(token, user); + }).catch(function(error) { + // Handle Errors here. + alert(error.message); + }); + }); + } + } +} +``` + +# Problem 1: + +if you got error when build code like this: +`UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): TypeError: Cannot read property 'manifest' of undefined` + +Please, using this fix from [issue](https://github.com/nordnet/cordova-universal-links-plugin/issues/134): +> Making this change in 'cordova-universal-links-plugin/hooks/lib/android/manifestWriter.js' fixed this issue for me: +> [b2c5784#diff-d5955d9f4d88b42e5efd7a3385be79e9](https://github.com/nordnet/cordova-universal-links-plugin/commit/b2c5784764225319648e26aa5d3f42ede6d1b289#diff-d5955d9f4d88b42e5efd7a3385be79e9) From f80b33e0cd26bcfd95007a5cea427914b07cb8f9 Mon Sep 17 00:00:00 2001 From: hiepxanh Date: Mon, 25 Jun 2018 08:33:17 +0700 Subject: [PATCH 2/6] fix typo error thank you @davideast for guiding me to present the article better --- docs/ionic/authentication.md | 52 +++++++++++++++++++----------------- 1 file changed, 28 insertions(+), 24 deletions(-) diff --git a/docs/ionic/authentication.md b/docs/ionic/authentication.md index 3cc84e062..46e871f3c 100644 --- a/docs/ionic/authentication.md +++ b/docs/ionic/authentication.md @@ -1,26 +1,29 @@ -# STEP 1: install this plugin: +# Step 1: install this plugin: ``` -1) ionic cordova plugin add cordova-universal-links-plugin -2) ionic cordova plugin add cordova-plugin-buildinfo -3) ionic cordova plugin add cordova-plugin-browsertab -4) ionic cordova plugin add cordova-plugin-inappbrowser -5) ionic cordova plugin add cordova-plugin-customurlscheme (for ios) +ionic cordova plugin add cordova-universal-links-plugin +ionic cordova plugin add cordova-plugin-buildinfo +ionic cordova plugin add cordova-plugin-browsertab +ionic cordova plugin add cordova-plugin-inappbrowser +(for ios) +ionic cordova plugin add cordova-plugin-customurlscheme ``` -# STEP 2: Add Firebase to your Ionic +# Step 2: Add Firebase to your Ionic - STEP 2.1: [setup firebase to angular project] - (https://github.com/angular/angularfire2/blob/master/docs/install-and-setup.md) + **[Setup firebase to angular project](https://github.com/angular/angularfire2/blob/master/docs/install-and-setup.md)** - STEP 2.2: To set up an Android app, go to [Firebase Console](https://console.firebase.google.com/) then - Click **Add Firebase to your Android app** and follow the setup steps. + **To set up in an Android app** + Go to [Firebase console](https://console.firebase.google.com/) then click **Add Firebase to your Android app** and follow the setup steps. -# STEP 3: Set up Firebase Authentication for Cordova ( sumary from [firebase instruction](https://firebase.google.com/docs/auth/web/cordova)) - STEP 3.1: In the Firebase console, open the **Dynamic Links** section at bottom left panel, setup by they instruction +# Step 3: Set up Firebase Authentication for Cordova ( summary from [firebase instruction](https://firebase.google.com/docs/auth/web/cordova)) - STEP 3.2: add this to config.xml at root level of project: -``` + **Setup Dynamic Link** + In the Firebase console, open the **Dynamic Links** section at bottom left panel, setup by their instruction + + **Add dynamic link** + *Add this to config.xml at root level of project:* +```xml @@ -33,18 +36,19 @@ ``` - STEP 3.3: make sure your `` the same with android app's id you - added in firebase at STEP 2.2. + *Make sure your `` the same with android app's id you + added in firebase* + +# Step 4: Add login code: +at `login.service.ts` add this function: +```ts -# STEP 4: add login code: -at login.service.ts add this function: -``` import { AngularFireAuth } from 'angularfire2/auth'; import * as firebase from 'firebase/app'; import AuthProvider = firebase.auth.AuthProvider; export class AuthService { - private user: firebase.User; + private user: firebase.User; constructor(public afAuth: AngularFireAuth) { afAuth.authState.subscribe(user => { this.user = user; @@ -61,7 +65,7 @@ export class AuthService { return this.oauthSignIn(new firebase.auth.GoogleAuthProvider()); } - private oauthSignIn(provider: AuthProvider) { + private oauthSignIn(provider: AuthProvider) { if (!(window).cordova) { return this.afAuth.auth.signInWithPopup(provider); } else { @@ -84,9 +88,9 @@ export class AuthService { } ``` -# Problem 1: +# Common problems -if you got error when build code like this: +If you got error when build code like this: `UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): TypeError: Cannot read property 'manifest' of undefined` Please, using this fix from [issue](https://github.com/nordnet/cordova-universal-links-plugin/issues/134): From 92a4ef171a45966b0dfc6dcf0e9173fd9fb1f880 Mon Sep 17 00:00:00 2001 From: hiepxanh Date: Mon, 25 Jun 2018 08:41:13 +0700 Subject: [PATCH 3/6] small changes --- docs/ionic/authentication.md | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/docs/ionic/authentication.md b/docs/ionic/authentication.md index 46e871f3c..2182e6cae 100644 --- a/docs/ionic/authentication.md +++ b/docs/ionic/authentication.md @@ -10,10 +10,13 @@ ionic cordova plugin add cordova-plugin-customurlscheme # Step 2: Add Firebase to your Ionic - **[Setup firebase to angular project](https://github.com/angular/angularfire2/blob/master/docs/install-and-setup.md)** + **Install firebase to angular project** + +Follow [this tutorial](https://github.com/angular/angularfire2/blob/master/docs/install-and-setup.md) to make a basic setup for your Ionic project. **To set up in an Android app** - Go to [Firebase console](https://console.firebase.google.com/) then click **Add Firebase to your Android app** and follow the setup steps. + +Go to [Firebase console](https://console.firebase.google.com/) then click **Add Firebase to your Android app** and follow the setup steps. # Step 3: Set up Firebase Authentication for Cordova ( summary from [firebase instruction](https://firebase.google.com/docs/auth/web/cordova)) From 08e0ea47e00853c08908be9864aa6d0ab53792bc Mon Sep 17 00:00:00 2001 From: hiepxanh Date: Fri, 29 Jun 2018 09:58:00 +0700 Subject: [PATCH 4/6] update rxjs-compat for angular v6 --- docs/ionic/v3.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/ionic/v3.md b/docs/ionic/v3.md index 4e066a74d..a916bec54 100644 --- a/docs/ionic/v3.md +++ b/docs/ionic/v3.md @@ -168,6 +168,8 @@ _This should add angularfire2, promise-polyfill and firebase entry in your proje "promise-polyfill": "^6.0.2", ``` +As the Angularfire2 v5+ rc10 requires rxjs6, you need to install rxjs-compat for angular version < 6.0: +`npm install --save rxjs-compat` ### Setup @NgModule Open your project in your favourite editor and open the `app.module.ts` file, under `src/app` From c26fdc4ac7c0bf7f37d540193648a9168a7cd7ce Mon Sep 17 00:00:00 2001 From: hiepxanh Date: Tue, 10 Jul 2018 21:31:27 +0700 Subject: [PATCH 5/6] update for angularfire rc 11 --- docs/ionic/v3.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/ionic/v3.md b/docs/ionic/v3.md index a916bec54..ceacd2e1e 100644 --- a/docs/ionic/v3.md +++ b/docs/ionic/v3.md @@ -169,7 +169,9 @@ _This should add angularfire2, promise-polyfill and firebase entry in your proje ``` As the Angularfire2 v5+ rc10 requires rxjs6, you need to install rxjs-compat for angular version < 6.0: -`npm install --save rxjs-compat` +``` +npm i rxjs@6 rxjs-compat@6 promise-polyfill --save +``` ### Setup @NgModule Open your project in your favourite editor and open the `app.module.ts` file, under `src/app` From 5d2009966068d741b48881d2ea2cb36c52ab7f81 Mon Sep 17 00:00:00 2001 From: hiepxanh Date: Tue, 10 Jul 2018 21:32:08 +0700 Subject: [PATCH 6/6] no shortcode --- docs/ionic/v3.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/ionic/v3.md b/docs/ionic/v3.md index ceacd2e1e..c53fb145c 100644 --- a/docs/ionic/v3.md +++ b/docs/ionic/v3.md @@ -170,7 +170,7 @@ _This should add angularfire2, promise-polyfill and firebase entry in your proje As the Angularfire2 v5+ rc10 requires rxjs6, you need to install rxjs-compat for angular version < 6.0: ``` -npm i rxjs@6 rxjs-compat@6 promise-polyfill --save +npm install rxjs@6 rxjs-compat@6 promise-polyfill --save ``` ### Setup @NgModule