Question

我通过Firebase和AngularFire2设置Google身份验证。它部分工作，但不完全，行为很奇怪。应用程序最初加载正常，并提供“登录”按钮，如果没有用户登录则应显示该按钮。

当我点击该按钮时，重定向会发生在Google Auth对话框中，并且看起来一切正常。但是，在重定向回应用时，Chrome控制台中会出现两个不明显的错误，并且应用再次加载，就好像没有用户通过身份验证一样。

当我查看Firebase控制台时，它显示我已登录。这通过Firebase托管和本地调试实例发生。我没有Angular2 / AngularFire2就可以使用它。

有什么想法吗？

错误是：

未捕获的TypeError：无法读取属性＆＃39;数据集＆＃39; of null o @bund.js：2518

未捕获的TypeError：无法读取属性＆quot; appendChild＆＃39; null h @ content.js：1（匿名函数）@ content.js：1（匿名函数）@ content.js：1

导航到https://accounts.google.com/AccountChooser?continue=https://accounts.google ... true％26from_login％3D8＆amp; btmpl = authsub＆amp; scc = 1＆amp; 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
  })
]);

Answer 1

在myapp.component.html上.... 我建议做以下事情：

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

Google身份验证无法使用AngularFire2

1 个答案: