|
| 1 | +# Step 1: install this plugin: |
| 2 | +``` |
| 3 | +ionic cordova plugin add cordova-universal-links-plugin |
| 4 | +ionic cordova plugin add cordova-plugin-buildinfo |
| 5 | +ionic cordova plugin add cordova-plugin-browsertab |
| 6 | +ionic cordova plugin add cordova-plugin-inappbrowser |
| 7 | +(for ios) |
| 8 | +ionic cordova plugin add cordova-plugin-customurlscheme |
| 9 | +``` |
| 10 | + |
| 11 | +# Step 2: Add Firebase to your Ionic |
| 12 | + |
| 13 | + **Install firebase to angular project** |
| 14 | + |
| 15 | +Follow [this tutorial](https://github.com/angular/angularfire2/blob/master/docs/install-and-setup.md) to make a basic setup for your Ionic project. |
| 16 | + |
| 17 | + **To set up in an Android app** |
| 18 | + |
| 19 | +Go to [Firebase console](https://console.firebase.google.com/) then click **Add Firebase to your Android app** and follow the setup steps. |
| 20 | + |
| 21 | + |
| 22 | +# Step 3: Set up Firebase Authentication for Cordova ( summary from [firebase instruction](https://firebase.google.com/docs/auth/web/cordova)) |
| 23 | + |
| 24 | + **Setup Dynamic Link** |
| 25 | + In the Firebase console, open the **Dynamic Links** section at bottom left panel, setup by their instruction |
| 26 | + |
| 27 | + **Add dynamic link** |
| 28 | + *Add this to config.xml at root level of project:* |
| 29 | +```xml |
| 30 | + <universal-links> |
| 31 | + <!-- this is dynamic link created in firebase --> |
| 32 | + <host name="zm4e4.app.goo.gl" scheme="https" /> |
| 33 | + <!-- this is your firebase app link --> |
| 34 | + <host name="routing-aadd4.firebaseapp.com" scheme="https"> |
| 35 | + <path url="/__/auth/callback" /> |
| 36 | + </host> |
| 37 | + </universal-links> |
| 38 | + <!-- for android --> |
| 39 | + <preference name="AndroidLaunchMode" value="singleTask" /> |
| 40 | +``` |
| 41 | + |
| 42 | + *Make sure your `<widget id="com.yourandroid.id" ... >` the same with android app's id you |
| 43 | + added in firebase* |
| 44 | + |
| 45 | +# Step 4: Add login code: |
| 46 | +at `login.service.ts` add this function: |
| 47 | +```ts |
| 48 | + |
| 49 | +import { AngularFireAuth } from 'angularfire2/auth'; |
| 50 | +import * as firebase from 'firebase/app'; |
| 51 | +import AuthProvider = firebase.auth.AuthProvider; |
| 52 | + |
| 53 | +export class AuthService { |
| 54 | + private user: firebase.User; |
| 55 | + constructor(public afAuth: AngularFireAuth) { |
| 56 | + afAuth.authState.subscribe(user => { |
| 57 | + this.user = user; |
| 58 | + }); |
| 59 | + } |
| 60 | + |
| 61 | + signInWithFacebook() { |
| 62 | + console.log('Sign in with google'); |
| 63 | + return this.oauthSignIn(new firebase.auth.FacebookAuthProvider()); |
| 64 | + } |
| 65 | + |
| 66 | + signInWithGoogle() { |
| 67 | + console.log('Sign in with google'); |
| 68 | + return this.oauthSignIn(new firebase.auth.GoogleAuthProvider()); |
| 69 | + } |
| 70 | + |
| 71 | + private oauthSignIn(provider: AuthProvider) { |
| 72 | + if (!(<any>window).cordova) { |
| 73 | + return this.afAuth.auth.signInWithPopup(provider); |
| 74 | + } else { |
| 75 | + return this.afAuth.auth.signInWithRedirect(provider) |
| 76 | + .then(() => { |
| 77 | + return this.afAuth.auth.getRedirectResult().then( result => { |
| 78 | + // This gives you a Google Access Token. |
| 79 | + // You can use it to access the Google API. |
| 80 | + let token = result.credential.accessToken; |
| 81 | + // The signed-in user info. |
| 82 | + let user = result.user; |
| 83 | + console.log(token, user); |
| 84 | + }).catch(function(error) { |
| 85 | + // Handle Errors here. |
| 86 | + alert(error.message); |
| 87 | + }); |
| 88 | + }); |
| 89 | + } |
| 90 | + } |
| 91 | +} |
| 92 | +``` |
| 93 | + |
| 94 | +# Common problems |
| 95 | + |
| 96 | +If you got error when build code like this: |
| 97 | +`UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): TypeError: Cannot read property 'manifest' of undefined` |
| 98 | + |
| 99 | +Please, using this fix from [issue](https://github.com/nordnet/cordova-universal-links-plugin/issues/134): |
| 100 | +> Making this change in 'cordova-universal-links-plugin/hooks/lib/android/manifestWriter.js' fixed this issue for me: |
| 101 | +> [b2c5784#diff-d5955d9f4d88b42e5efd7a3385be79e9](https://github.com/nordnet/cordova-universal-links-plugin/commit/b2c5784764225319648e26aa5d3f42ede6d1b289#diff-d5955d9f4d88b42e5efd7a3385be79e9) |
0 commit comments