Question

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

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

因此，我使用@ angular / fire构建了一个项目，并以ng serve开始了该项目。但是，当我尝试以Google身份验证提供商身份登录时，出现403错误，提示：

此应用尚未配置为发出OAuth请求。为此，请在Google Cloud Console中设置应用的OAuth同意屏幕。

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

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

我已经设置了一个Firebase项目，并在Firebase控制台的身份验证登录方法标签中启用了Google。
我复制了配置片段以将其用于我的environment.ts文件
基于@ angular / fire / auth
编辑了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();
  }
}

app.module.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库中的错误。

使用@ angular / fire / auth登录会在本地主机

1 个答案: