AngularFire2登录注销订阅Auth问题 - Angular2
好的，所以我一直在撞墙挡了半天试图解决这个问题，因为我还没有因为AngularFire2和Angular2的知识水平而AngularFire2有些初学者。
我有一个应用程序，一个简单的登录表单，使用Facebook连接到Access Token，检索用户Facebook Id和Facebook Graph API，然后调用loginWithFacebook(): FirebaseListObservable<string> {
return FirebaseListObservable.create(obs => {
this.af.auth.login({
provider: AuthProviders.Facebook,
method: AuthMethods.Popup,
scope: ['public_profile']
}).then((authState: any) => {
let authSubscription = this.af.auth.subscribe(auth => {
if (auth == null) return;
let url = `https://graph.facebook.com/v2.8/${auth.facebook.uid}?fields=first_name,last_name,gender,email&access_token=${authState.facebook.accessToken}`;
this.http.get(url).subscribe(response => {
let user = response.json()
this.af.database.object('/users/' + authState.uid).update({
first_name: user.first_name,
last_name: user.last_name,
display_name: auth.facebook.displayName,
gender: user.gender,
email_address: auth.facebook.email,
accessToken: authState.facebook.accessToken,
facebook_Id: auth.facebook.uid,
})
},
err => {
obs.next(false);
});
});
authSubscription.unsubscribe();
obs.next(true);
}).catch(err => {
obs.next(false);
});
});
}
返回名字，姓氏，性别，电子邮件等。
如下所示：
Facebook Id auth =来自Access Token
authState =来自Facebook Graph API
然后，我将Firebase返回的信息保存到auth。
现在问题就出现了，正如您在上面指定的函数中看到的那样，我订阅了Facebook Id方法，这样我就可以访问Access Token和Facebook Graph API需要致电this.af.auth.logout();
在我的应用程序导航中，我有一个注销按钮。当用户点击此按钮时，我致电
auth一旦我按下注销，我将调用上面指定的函数，因为订阅了Facebook Graph API的更改，我在内部放置了一个if语句来检查auth是否为null，如果这样返回哪个有效 - 对我来说似乎有点笨拙。
如果我尝试重新登录，则调用${auth.facebook.uid}的网址会在undefined上失败，其中auth表示Facebook Id，我不完全确定为什么这会失败，因为对我来说它被归类为新登录，因此该方法应该从头到尾再次运行。
现在我的问题是：
如何在我登录facebook方法中订阅Access Token？并仍然可以访问Github和login.service
我试图找出一种方法，该方法适用于以下两种情况：
- 用户已存在于数据库中
- 用户不存在，所以它是一个新的注册。
- 在注册页面登录facebook
- 使用注销按钮注销
- 退出后直接用facebook登录
注销和注册/登录应该彼此隔离，不要干扰彼此的责任。
如果有人可以分享任何知识或建议更清洁的方式，我会非常感激。
更新
我已在if (auth.facebook.uid == null) return;
上创建了一个存储库，它是我的应用程序的缩减版本，它显示了我遇到的错误。
要复制：
在auth.facebook.uid loginWithFacebook方法中，您将看到以下代码行：
auth对此进行评论并按照以下步骤操作。
您会注意到首次登录时，只要您注销并使用Facebook重新登录，图表API就会因1. User navigates to website
2. Signs in with Facebook
3. Popup appears
4. Users grants the permissions I’ve requested
5. Callback to website <- at this point I have access to users Facebook Id and accessToken via the auth
6. Call Facebook Graph API retrieve first_name, last name etc passing in users Facebook Id and accessToken
7. Then save the information returned from Facebook Graph to Firebase
未定义而失败。
现在理想情况下，我不想订阅auth事件的原因是因为我们将使用Google和电子邮件及密码实现登录。
我想订阅{
"_args": [
[
{
"raw": "angularfire2@^2.0.0-beta.7",
"scope": null,
"escapedName": "angularfire2",
"name": "angularfire2",
"rawSpec": "^2.0.0-beta.7",
"spec": ">=2.0.0-beta.7 <3.0.0",
"type": "range"
},
"/Users/Scott/Desktop/test-application-master 2"
]
],
"_from": "angularfire2@>=2.0.0-beta.7 <3.0.0",
"_id": "angularfire2@2.0.0-beta.7",
"_inCache": true,
"_location": "/angularfire2",
"_nodeVersion": "6.9.1",
"_npmOperationalInternal": {
"host": "packages-12-west.internal.npmjs.com",
"tmp": "tmp/angularfire2-2.0.0-beta.7.tgz_1484315670561_0.09154823864810169"
},
"_npmUser": {
"name": "davideast",
"email": "dceast@gmail.com"
},
"_npmVersion": "3.10.8",
"_phantomChildren": {},
"_requested": {
"raw": "angularfire2@^2.0.0-beta.7",
"scope": null,
"escapedName": "angularfire2",
"name": "angularfire2",
"rawSpec": "^2.0.0-beta.7",
"spec": ">=2.0.0-beta.7 <3.0.0",
"type": "range"
},
"_requiredBy": [
"/"
],
"_resolved": "https://registry.npmjs.org/angularfire2/-/angularfire2-2.0.0-beta.7.tgz",
"_shasum": "ce4f98467c5a8b2cc1dfd607fda718aee8d64521",
"_shrinkwrap": null,
"_spec": "angularfire2@^2.0.0-beta.7",
"_where": "/Users/Scott/Desktop/test-application-master 2",
"author": {
"name": "jeffbcross,davideast"
},
"bugs": {
"url": "https://github.com/angular/angularfire2/issues"
},
"dependencies": {},
"description": "<p align=\"center\"> <h1 align=\"center\">AngularFire2</h1> <p align=\"center\">The official library for Firebase and Angular 2</p> </p>",
"devDependencies": {
"@angular/compiler-cli": "^2.0.0",
"@angular/platform-server": "^2.0.0-rc.5",
"@types/jasmine": "^2.5.36",
"@types/request": "0.0.30",
"concurrently": "^2.2.0",
"conventional-changelog-cli": "^1.2.0",
"es6-module-loader": "^0.17.10",
"es6-shim": "^0.35.0",
"gulp": "^3.9.0",
"gulp-jasmine": "^2.2.1",
"gulp-typescript": "^2.10.0",
"http-server": "^0.8.5",
"jasmine": "^2.4.1",
"jasmine-core": "^2.4.1",
"json": "^9.0.3",
"karma": "^0.13.19",
"karma-chrome-launcher": "^0.2.2",
"karma-firefox-launcher": "^0.1.7",
"karma-jasmine": "^0.3.6",
"karma-mocha-reporter": "^2.0.2",
"karma-systemjs": "^0.10.0",
"ncp": "^2.0.0",
"parse5": "^1.3.2",
"protractor": "3.0.0",
"reflect-metadata": "0.1.2",
"rimraf": "^2.5.4",
"rollup": "^0.35.11",
"rollup-watch": "^2.5.0",
"systemjs": "^0.19.16",
"systemjs-builder": "^0.15.7",
"traceur": "0.0.96",
"typedoc": "github:jeffbcross/typedoc",
"typescript": "^2.0.2",
"zone.js": "^0.7.2"
},
"directories": {},
"dist": {
"shasum": "ce4f98467c5a8b2cc1dfd607fda718aee8d64521",
"tarball": "https://registry.npmjs.org/angularfire2/-/angularfire2-2.0.0-beta.7.tgz"
},
"homepage": "https://github.com/angular/angularfire2#readme",
"keywords": [
"angular2",
"angular",
"firebase"
],
"license": "MIT",
"main": "bundles/angularfire2.umd.js",
"maintainers": [
{
"name": "angularcore",
"email": "angular-core+npm@google.com"
},
{
"name": "davideast",
"email": "dceast@gmail.com"
},
{
"name": "jeffbcross",
"email": "middlefloor@gmail.com"
}
],
"module": "index.js",
"name": "angularfire2",
"optionalDependencies": {},
"peerDependencies": {
"@angular/common": "^2.0.0",
"@angular/compiler": "^2.0.0",
"@angular/core": "^2.0.0",
"@angular/platform-browser": "^2.0.0",
"@angular/platform-browser-dynamic": "^2.0.0",
"firebase": "^3.0.0",
"rxjs": "^5.0.1"
},
"readme": "ERROR: No README data found!",
"repository": {
"type": "git",
"url": "git+https://github.com/angular/angularfire2.git"
},
"scripts": {},
"typings": "index.d.ts",
"version": "2.0.0-beta.7"
}
事件的唯一地方是导航栏内部，当用户获得授权时，它会更改菜单导航。
注意：这与firebase上的测试帐户相关联。解决此问题后，将删除测试帐户。因此，将删除用于测试此信息的所有帐户信息。
最终更新
好的，所以我决定打开这个奖金以帮助找到解决方案。
我能看到这个工作的唯一方法是拥有一个登录页面，这个登录页面将迎合新用户和现有用户，如果用户使用Facebook登录，如果他们是新的，则调用Facebook Graph API检索有关他们的信息和然后保存它，如果它们存在则不要调用Facebook Graph API。
我希望如何发挥作用：
新用户：
{{1}}
现有用户
如果用户已使用Facebook注册，那么当他/她登录时我不想调用Facebook Graph API时，只需对新帐户调用一次图表。
此外，回购协议仍然可用。
在首次注册，注销，登录后打印到控制台时出错：
AngularFire2包json
{{1}}
1 个答案:
答案 0 :(得分：2)
您应该创建一个LoginService！
单独登录和授权订阅。
export class LoginService {
public isLoggedIn = false;
private _authSubsription;
constructor(private _af: AngularFire) {
this._authSubscription = this._af.auth.subscribe(auth => {
if (!auth) {
console.log('LOGGED OUT!!');
this.isLoggedIn = false;
return;
}
this.isLoggedIn = true;
// do your stuff here ..
});
}
public login() {
this._af.auth.login({
provider: AuthProviders.Facebook,
method: AuthMethods.Popup,
scope: ['public_profile']
});
}
public logout() {
this._af.auth.logout();
}
}
查看我的分支：https://github.com/mxii/test-application
PR：https://github.com/Atkinson88/test-application/pull/1
您的LoginService存在问题。它实例化了两次，我不知道为什么。
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？