Google 身份验证不适用于 AngularFire2答案

【问题标题】：Google authentication not working with AngularFire2Google 身份验证不适用于 AngularFire2
【发布时间】：2016-10-22 11:05:31
【问题描述】：

我正在通过 Firebase 和 AngularFire2 设置 Google 身份验证。它部分有效，但不完全有效，而且行为很奇怪。该应用程序最初加载良好，并提供了登录按钮，如果没有用户登录，该按钮应该显示。

当我单击该按钮时，重定向发生在 Google 身份验证对话框中，并且似乎一切正常。但是，在重定向回应用程序时，Chrome 控制台中会出现两个模糊错误，并且应用程序会再次加载，就好像没有用户通过身份验证一样。

当我查看 Firebase 控制台时，它显示我已登录。这通过 Firebase 托管和本地调试实例都发生。我让它在没有 Angular2/AngularFire2 的情况下工作。

有什么想法吗？

错误是：

未捕获的类型错误：无法读取 null o @ bundle.js:2518 的属性“数据集”

Uncaught TypeError: Cannot read property 'appendChild' of null h @ content.js:1(anonymous function) @ content.js:1(anonymous function) @ 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
  })
]);

【问题讨论】：

标签： angular firebase angularfire firebase-authentication

【解决方案1】：

在你的 myapp.component.html.... 我建议执行以下操作：

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

【讨论】：