首页 文章

Google身份验证无法使用AngularFire2

提问于
浏览
2

我正在通过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 回答

  • 0

    在你的myapp.component.html ....我建议你做以下事情:

    <div> {{(af.auth | async )?.auth.email}} logged in</div>
    <div *ngIf="!(af.auth | async)">
    

相关问题