Я пытаюсь создать веб-приложение на основе Angular, которое использует проверку подлинности Firebase с Google в качестве поставщика проверки подлинности.
Все примеры в Интернете, которые я могу найти, используют angularfire2, но когда я его устанавливаю,Я получаю предупреждение о том, что он устарел, и теперь я должен использовать @ angular / fire.
Поэтому я создаю проект с использованием @ angular / fire, запустил проект с ng serve.Но когда я пытаюсь войти в систему с помощью Google в качестве поставщика аутентификации, я получаю сообщение об ошибке 403, в котором говорится:
Это приложение еще не настроено для отправки запросов OAuth.Для этого настройте экран согласия OAuth в приложении в облачной консоли Google.
Что странно, поскольку согласно списку авторизованных доменов консоли Firebase localhost является авторизованным доменом
Это то, что я сделал до сих пор:
Я настроил проект firebase и включил Google на вкладке метода входа в систему аутентификации консоли firebase.
Я скопировал фрагмент конфигурации, чтобы использовать их для моего файла environment.ts
установить файл auth.service на основе @ angular / fire / auth
отредактировал app.module
создал небольшой компонент, чтобы дать мне кнопку, при нажатии на которую запускается функция loginWithGoogle (), предложенная моим автором.service.
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 { }