Настройка аутентификации Firebase в автономном Angular

Я использую хранилище Firebase для одного из своих проектов с автономным интерфейсом Angular 17. Я также хотел интегрировать аутентификацию Firebase. Поскольку я использую автономный angular, у меня нет ngmodules. Вот настройка firebaseapp, хранилища и getAuth в моем app.config.ts:

import { ApplicationConfig, importProvidersFrom } from '@angular/core';
import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
import { provideStorage, getStorage } from '@angular/fire/storage';
import { provideAuth, getAuth } from '@angular/fire/auth';
//bunch of other irrelevant imports

import { environment } from 'myenvpath';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideAnimationsAsync(),
    importProvidersFrom([BrowserAnimationsModule], MatDialogModule),
    provideHttpClient(withInterceptors([authInterceptor])),
    JwtstoreService,
    {
      provide: JWT_OPTIONS,
      //jwt setup
    },
    JwtHelperService,
    provideFirebaseApp(() => initializeApp(environment.firebaseConfig)),
    provideStorage(() => getStorage()),
    provideAuth(() => getAuth()),
  ],
};

Я использую собственный токен jwt для аутентификации Firebase, который у меня есть в локальном хранилище. Я создал файл Storage.service.ts для аутентификации. У него также есть один метод получения данных из хранилища Firebase.

import { Injectable } from '@angular/core';
import { getStorage, ref, getDownloadURL } from '@angular/fire/storage';
import { getAuth, signInWithCustomToken } from '@angular/fire/auth';

@Injectable({
  providedIn: 'root',
})
export class StorageService {
  private authInitialized = false;

  constructor() {}

  private async initializeAuth(): Promise<void> {
    if (this.authInitialized) return;

    const firebaseToken = localStorage.getItem('fbtoken');
    if (!firebaseToken) {
      throw new Error('Firebase token is missing.');
    }

    const auth = getAuth();
    await signInWithCustomToken(auth, firebaseToken);
    this.authInitialized = true;
  }

  async getDownloadURL(path: string): Promise<string> {
    await this.initializeAuth();
    const storage = getStorage();
    const storageRef = ref(storage, path);
    return await getDownloadURL(storageRef);
  }
}

В своих компонентах я просто вызываю метод getDownloadURL(), если хочу получить что-то из хранилища (конечно, служба хранилища внедряется в конструктор компонента).

Когда я запускаю свое приложение и дохожу до момента, когда инициируется взаимодействие с хранилищем (вызывается метод getDownloadURL()), я получаю следующую ошибку в консоли браузера:

Error: Either AngularFireModule has not been provided in your AppModule (this can be done manually or implictly using
provideFirebaseApp) or you're calling an AngularFire method outside of an NgModule (which is not supported).

Поскольку я не получаю сообщения об отсутствии токена или других подобных ошибок, похоже, проблема в настройке app.config и/или Storage.service. В ошибке постоянно упоминается appmodule, но я снова использую автономный angular, у меня нет app.module или @ngmodules...

Я не думаю, что ошибка исходит из моего бэкэнда, поскольку я отлично получаю обратно свой собственный токен.

Некоторое время я использовал хранилище Firebase без интеграции аутентификации, и оно работало нормально.

Любая помощь приветствуется!

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
0
69
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Не понимаю почему, но это сработало:

import { Injectable, inject } from '@angular/core';
import { getStorage, ref, getDownloadURL } from '@angular/fire/storage';
import { Auth, getAuth, signInWithCustomToken } from '@angular/fire/auth';

@Injectable({
  providedIn: 'root',
})
export class StorageService {
  private authInitialized = false;
  private auth = inject(Auth); //Auth injection

  constructor() {}

  private async initializeAuth(): Promise<void> {
    if (this.authInitialized) return;

    const firebaseToken = localStorage.getItem('fbtoken');
    if (!firebaseToken) {
      throw new Error('Firebase token is missing.');
    }
    this.auth = getAuth(); //refer getAuth() to this.auth
    await signInWithCustomToken(this.auth, firebaseToken);
    this.authInitialized = true;
  }

  async getDownloadURL(path: string): Promise<string> {
    await this.initializeAuth();
    const storage = getStorage();
    const storageRef = ref(storage, path);
    return await getDownloadURL(storageRef);
  }
}

Кажется, мне нужно было ввести Auth таким образом...

Другие вопросы по теме

Вход в Flutter Google не получает имя пользователя Google - Firestore
Регистрация во Flutter с использованием Firebase не работает
Перенаправление на главную страницу после входа или регистрации не работает. Firebase, частный маршрут, аутентификация по электронной почте
Как авторизовать запрос к API FCM v1 с помощью токена доступа
Firebase Auth сохраняет пользователей без идентификатора с помощью OIDC
Firebase Auth, React JS, ошибка: «logIn не является функцией»
Firebase Admin SDK – разрешение отклонено для служебной учетной записи в базе данных реального времени
Интегрируйте функцию аутентификации телефона Firebase с Google AppScript – веб-приложение
Как немедленно прослушать событие ошибки поставщика аутентификации Firebase?
Ошибка: [auth/missing-client-identifier] В этом запросе отсутствует действительный идентификатор приложения, проверки целостности Play и проверки reCAPTCHA не увенчались успехом

Похожие вопросы

Невозможно передать значение из службы в компонент
В Angular 17 попытка очистить ввод после того, как пользователь зашел на страницу с помощью кнопки «Назад», приводит к появлению некогерентных значений
TS2305: модуль @angular/core/testing не имеет экспортированного асинхронного члена
Angular 18 — фоновое изображение не отображается на мобильном устройстве, но работает в браузере и инструментах Chrome
Socketio-client вызывает «Внутреннюю ошибку сервера: страница / не отображается в течение 30 секунд» в Angular 18
Ag-grid — определение значений заголовков настраиваемых столбцов при экспорте в Excel/CSV
Автозаполнение Angular Material в версии 15.4.9 не работает
Ошибка типа: невозможно прочитать свойства неопределенного значения (чтение «ɵcmp») в Angular 18
Пользовательский интерфейс Angular Material – Как добавить проверку onBlur для флажков/переключателей?
Когда именно запускается APP_INITIALIZER?