Google 身份验证不适用于 AngularFire2

Posted 2023-02-23

【中文标题】Google 身份验证不适用于 AngularFire2

【英文标题】：Google authentication not working with 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
  )
]);

【参考方案1】：

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

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