-
Notifications
You must be signed in to change notification settings - Fork 2.2k
docs(): authentication tutorial with ionic and rxjs compact for angularfire2 ^rc.10 #1721
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from 1 commit
89d2fdf
f80b33e
92a4ef1
08e0ea4
c26fdc4
5d20099
ad2d142
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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: | ||
|
||
``` | ||
|
||
<universal-links> | ||
<!-- this is dynamic link created in firebase --> | ||
<host name="zm4e4.app.goo.gl" scheme="https" /> | ||
<!-- this is your firebase app link --> | ||
<host name="routing-aadd4.firebaseapp.com" scheme="https"> | ||
<path url="/__/auth/callback" /> | ||
</host> | ||
</universal-links> | ||
<!-- for android --> | ||
<preference name="AndroidLaunchMode" value="singleTask" /> | ||
``` | ||
|
||
STEP 3.3: make sure your `<widget id="com.yourandroid.id" ... >` 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 (!(<any>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` | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Use a three backtick code block here:
|
||
|
||
Please, using this fix from [issue](https://github.com/nordnet/cordova-universal-links-plugin/issues/134): | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Try: "Use this fix from..." |
||
> 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) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Use capitalization instead of uppercase for the word "step". I find that when something is placed in uppercase by itself too many times it can come off a bit aggressive.