angular - 使用@angular/fire/auth 登录导致本地主机出现 403 错误

Question

我正在尝试构建一个基于 Angular 的 Web 应用程序，该应用程序使用 Firebase 身份验证，Google 作为身份验证提供程序。

我在 Internet 上找到的所有示例都使用了 angularfire2，但是当我安装它时，我收到一条警告，提示它已被弃用，我现在应该使用 @angular/fire。

因此，我使用@angular/fire 构建了一个项目，并使用ng serve 启动了该项目。但是当我尝试使用 Google 作为身份验证提供者登录时，我收到 403 错误，指出:

This app is not yet configured to make OAuth requests. To do that, set up the app’s OAuth consent screen in the Google Cloud Console.

这很奇怪，因为根据 firebase 控制台的授权域列表 localhost 是一个授权域

这是我到目前为止所做的:

• 我已经设置了一个 firebase 项目并在 firebase 控制台的身份验证登录方法选项卡中启用了 Google。

• 我复制了配置片段以将它们用于我的 environment.ts 文件

• 基于@angular/fire/auth设置auth.service文件

• 编辑了 app.module

• 创建了一个小组件来给我一个按钮，单击该按钮会触发我的 auth.service 提供的 loginWithGoogle() 函数。

environment.ts(将本文中的一些值替换为“...”):

export const environment = {
  production: true,
  firebaseConfig: {
    apiKey: "...",
    authDomain: "vkfep-422d5.firebaseapp.com",
    databaseURL: "https://vkfep-422d5.firebaseio.com",
    projectId: "vkfep-422d5",
    storageBucket: "vkfep-422d5.appspot.com",
    messagingSenderId: "...",
    appId: "..."
  }
};

auth.service.ts

import { AngularFireAuth } from '@angular/fire/auth';
import * as firebase from 'firebase/app';
import { Injectable } from '@angular/core';

@Injectable()
export class AuthService {

  constructor(private firebaseAuth: AngularFireAuth) { }

  loginWithGoogle() {
    const provider = new firebase.auth.GoogleAuthProvider();

    return this.firebaseAuth.auth.signInWithPopup(provider);
  }

  logout() {
    return this.firebaseAuth.auth.signOut();
  }
}

应用程序模块.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AngularFireModule } from '@angular/fire';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { AngularFireDatabaseModule } from '@angular/fire/database';
import { environment } from 'src/environments/environment';

import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { AuthService } from './core/auth.service';


@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
  ],
  imports: [
    BrowserModule,
    AngularFireAuthModule,
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFireDatabaseModule
  ],
  providers: [AuthService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

这个问题确实可以通过在 firebase 控制台中设置支持电子邮件地址来解决。我不确定这是 firebase 文档中的缺点还是 angularfire 库中的错误。