[英]Ionic Facebook Authentication Redirection Problem
I followed this tutorial step by step https://ionicthemes.com/tutorials/about/ionic-facebook-login 我一步一步地遵循了本教程https://ionicthemes.com/tutorials/about/ionic-facebook-login
The issue I'm having is that after the login, my app is not redirecting to the page I need it to. 我遇到的问题是登录后,我的应用程序没有重定向到我需要的页面。 No error on the console when testing this on an emulated Pixel 2 device running Android 9 . 在运行Android 9的模拟Pixel 2设备上进行测试时,控制台上没有错误。 Here's the code for handling the authentication: 这是用于处理身份验证的代码:
const permissions = ['public_profile', 'email'];
await this.facebook.login(permissions).then(response => {
this.uid = response.authResponse.userID;
this.facebook.api('/me?fields=name,email', permissions)
.then(user => {
user.picture = 'https://graph.facebook.com/' + userId +
'/picture?type=large';
this.dataService.getUser(this.uid).subscribe((data) => {
if (data.data() !== undefined) {
if (data.data().isNew) {
this.zone.run(() => {
this.router.navigate(['/profile']);
});
} else {
this.zone.run(() => {
this.router.navigate(['/home']);
});
}
} else {
this.dataService.addUser(....)}).then(() => {
this.zone.run(() => {
this.router.navigate(['/profile']);
});
}
});
});
I expect that after login success the app is redirected correctly using the router angular component. 我希望登录成功后,可以使用路由器角度组件正确重定向应用。
I figured the problem was related to my Angular Fire Auth Observable: 我认为问题与我的Angular Fire Auth Observable有关:
this.afAuth.auth.onAuthStateChanged((user) => {
console.log('user state:', user);
if (user) {
this.fireUser = user;
this.deviceStorage.set('uid', user.uid);
this.dataService.userNewListener(user.uid);
} else {
this.deviceStorage.set('uid', '');
this.router.navigate(['/login']);
}
});
Since I'm using a native solution (facebook cordova plugin) that observable doesn't change, since it was redirecting me back to login. 由于我使用的是本机解决方案(facebook cordova插件),因此可观察性不会更改,因为它会将我重定向回登录。
The solution was that after I successfully perform the login using the plugin, I could use the response access token as a credential to proceed and sign in with it using AngularFire: 解决方案是,在使用插件成功执行登录后,我可以使用响应访问令牌作为凭证来继续进行操作,并使用AngularFire进行登录:
this.facebook.login(permissions).then(response => {
const facebookCredential = firebase.auth.FacebookAuthProvider.credential(response.authResponse.accessToken);
this.afAuth.auth.signInWithCredential(facebookCredential).then(() => {
console.log('navigating profile');
this.router.navigate(['/profile']);
});
});
I would start by unravelling the code. 我将从解开代码开始。
You can use Chrome to see the output of whats happening and debug it: 您可以使用Chrome浏览器查看发生的情况并对其进行调试:
Using Chrome DevTools - Android Development - Ionic Documentation 使用Chrome DevTools-Android开发-Ionic文档
Put some console.logs in the code like: 将一些console.logs放入代码中,例如:
if (data.data() !== undefined) {
if (data.data().isNew) {
this.zone.run(() => {
console.log("routing to profile");
this.router.navigate(['/profile']);
});
} else {
this.zone.run(() => {
console.log("routing to home");
this.router.navigate(['/home']);
});
}
} else {
this.dataService.addUser(....)}).then(() => {
this.zone.run(() => {
console.log("adduser - routing to profile");
this.router.navigate(['/profile']);
});
}
Strip out your Firebase dataService
calls and see if its getting to that point. 剥离Firebase dataService
调用,看看它是否达到了这一点。
I think this was something that was sprinkled into the code for the beta of Ionic4 but mostly it's been resolved. 我认为这是Ionic4 beta版的代码,但大部分已经解决。 I don't fully understand what it is but maybe you are following an out of date Firebase tutorial. 我不完全了解它是什么,但也许您正在关注过时的Firebase教程。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.