我正在通过Firebase和AngularFire2设置Google身份验证 . 它部分工作,但不完全,行为很奇怪 . 应用程序最初加载正常,并提供登录按钮,如果没有用户登录则应显示该按钮 .
当我点击该按钮时,重定向会发生在Google Auth对话框中,并且看起来一切正常 . 但是,在重定向回应用时,Chrome控制台中会出现两个不明显的错误,并且应用再次加载,就好像没有用户通过身份验证一样 .
当我查看Firebase控制台时,它显示我已登录 . 这通过Firebase托管和本地调试实例发生 . 我没有Angular2 / AngularFire2就可以使用它 .
有任何想法吗?
错误是:
未捕获TypeError:无法读取null @ bundle.js的属性'dataset':2518 Uncaught TypeError:无法读取属性'appendChild'的null h @ content.js:1(匿名函数)@ content.js:1(匿名函数) )@ content.js:1导航到https://accounts.google.com/AccountChooser?continue=https://accounts.google...true%26from_login%3D8&btmpl=authsub&scc=1&oauth=1导航到https:// myapp- d20b8.firebaseapp.com/__/auth/handler
MyApp.component.ts
import { Component } from '@angular/core';
import { AngularFire, AuthProviders, AuthMethods, FirebaseAuth, FirebaseListObservable } from 'angularfire2';
@Component({
moduleId: module.id,
selector: 'myapp-app',
templateUrl: 'myapp.component.html',
styleUrls: ['myapp.component.css']
})
export class MyAppComponent {
title = 'My App';
items: FirebaseListObservable<any[]>;
constructor(public af: AngularFire) {
this.items = af.database.list('items');
}
login() {
this.af.auth.login();
}
}
MyApp.component.html
<div *ngIf="auth | async">{{authInfo.email}} logged in</div>
<div *ngIf="!(auth | async)">
<button (click)="login()">Login with Google</button>
</div>
Main.ts
import { bootstrap } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { MyAppComponent, environment } from './app/';
import {FIREBASE_PROVIDERS,
defaultFirebase,
AngularFire,
AuthMethods,
AuthProviders,
firebaseAuthConfig
} from 'angularfire2';
if (environment.production) {
enableProdMode();
}
bootstrap(MyAppComponent, [
FIREBASE_PROVIDERS,
defaultFirebase({
apiKey: "<>",
authDomain: "myapp.firebaseapp.com",
databaseURL: "https://myapp.firebaseio.com",
storageBucket: "myapp.appspot.com",
}),
firebaseAuthConfig({
provider: AuthProviders.Google,
method: AuthMethods.Redirect
})
]);
1 回答
在你的myapp.component.html ....我建议你做以下事情: