Łatwe logowanie się w aplikacji internetowej dzięki FirebaseUI

FirebaseUI na potrzeby internetu to zestaw bibliotek opartych na pakiecie SDK JavaScript Uwierzytelnianie Firebase, które pomagają szybko wdrażać procesy uwierzytelniania.

FirebaseUI dla aplikacji internetowych zapewnia te korzyści:

  • Obsługa nowoczesnych modułowych pakietów SDK z initializeApp(...) i bieżącego pakietu Firebase JS SDK.
  • Ekrany, formularze i przyciski, które można łączyć, zamiast jednego monolitycznego widżetu.
  • Obsługa platform React, Shadcn i Angular.
  • Konfigurowalne zachowania w przypadku przekierowań i wyskakujących okien, Google One Tap, anonimowego przejścia na wyższy pakiet, ustawień telefonu i innych funkcji.
  • Obsługa lokalizacji za pomocą @firebase-oss/ui-translations.
  • Wbudowana obsługa uwierzytelniania za pomocą adresu e-mail i hasła, linku w e-mailu, telefonu, dostawców OAuth i procesów uwierzytelniania wielopoziomowego.

Ten przewodnik zawiera informacje o instalacji, inicjowaniu, metodach logowania i konfiguracji aplikacji React, Shadcn i Angular.

Zanim zaczniesz

  1. Dodaj Firebase do aplikacji internetowej:

    Włącz Uwierzytelnianie w konsoli Firebase.

    Zainstaluj firebase, jeśli nie ma go jeszcze w Twoim projekcie:

    npm install firebase

    Używaj modułowego pakietu Firebase JS SDK:

    import { initializeApp } from 'firebase/app';

const app = initializeApp({
  /* your Firebase config */
});

  2. Wybierz platformę i zainstaluj FirebaseUI:

    W przypadku aplikacji React opartych na shadcn/ui dodaj rejestr Firebase do components.json:

    {
  "registries": {
    "@firebase": "https://firebaseopensource.com/r/{name}.json"
  }
}

    Komponenty uwierzytelniania używane w tym przewodniku są dostępne w tym rejestrze, w tym sign-in-auth-screen, sign-up-auth-screen, email-link-auth-screen, oauth-screen, phone-auth-screen, google-sign-in-button, apple-sign-in-button i github-sign-in-button.

    Następnie dodaj komponenty, których chcesz użyć:

    npx shadcn@latest add @firebase/sign-in-auth-screen @firebase/google-sign-in-button

    Spowoduje to zainstalowanie podstawowych zależności React FirebaseUI.

    W przypadku aplikacji React bez shadcn/ui zainstaluj:

    npm install @firebase-oss/ui-react@beta @firebase-oss/ui-styles

    W przypadku aplikacji Angular zainstaluj:

    npm install @angular/fire @firebase-oss/ui-angular@beta @firebase-oss/ui-core@beta @firebase-oss/ui-styles@beta

Inicjowanie FirebaseUI

Utwórz wspólny magazyn interfejsu użytkownika za pomocą initializeUI(...), a następnie przekaż go do integracji z platformą.

Dodaj reakcję

import { initializeApp } from 'firebase/app';
import { initializeUI } from '@firebase-oss/ui-core';
import { FirebaseUIProvider } from '@firebase-oss/ui-react';

const app = initializeApp({
  /* your Firebase config */
});

const ui = initializeUI({
  app,
});

export function AppProviders({ children }: { children: React.ReactNode }) {
  return <FirebaseUIProvider ui={ui}>{children}</FirebaseUIProvider>;
}

Shadcn

Shadcn używa tej samej konfiguracji co React, ponieważ również korzysta z @firebase-oss/ui-react:

import { initializeApp } from 'firebase/app';
import { initializeUI } from '@firebase-oss/ui-core';
import { FirebaseUIProvider } from '@firebase-oss/ui-react';

const app = initializeApp({
  /* your Firebase config */
});

const ui = initializeUI({
  app,
});

export function AppProviders({ children }: { children: React.ReactNode }) {
  return <FirebaseUIProvider ui={ui}>{children}</FirebaseUIProvider>;
}

Te komponenty używają istniejących stylów shadcn. Zwykle nie importujesz pakietu CSS FirebaseUI, gdy używasz rejestru shadcn.

Angular

import { type ApplicationConfig } from '@angular/core';
import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
import { provideFirebaseUI } from '@firebase-oss/ui-angular';
import { initializeUI } from '@firebase-oss/ui-core';

export const appConfig: ApplicationConfig = {
  providers: [
    provideFirebaseApp(() =>
      initializeApp({
        /* your Firebase config */
      }),
    ),
    provideFirebaseUI((apps) =>
      initializeUI({
        app: apps[0],
      }),
    ),
  ],
};

Uwzględnij style

FirebaseUI ma gotowe komponenty interfejsu do Reacta i Angulara. Aby używać komponentów, musisz dołączyć ich kod CSS:

Jeśli używasz Tailwind z Reactem lub Angularem:

W przeciwnym razie uwzględnij style FirebaseUI:

@import '@firebase-oss/ui-styles/dist.min.css';

FirebaseUI na potrzeby internetu obsługuje niestandardowe motywy za pomocą zastąpień zmiennych CSS. Więcej informacji znajdziesz w dokumentacji dotyczącej motywów.

Konfigurowanie metod logowania

Zanim użytkownicy będą mogli się zalogować, włącz każdego dostawcę, którego chcesz używać, w sekcji Uwierzytelnianie –> Metoda logowania w konsoli Firebase.

FirebaseUI na potrzeby internetu korzysta z ekranów, formularzy i przycisków, które renderujesz bezpośrednio. Wspólna konfiguracja tych procesów znajduje się w usłudze behaviors przekazywanej do usługi initializeUI(...).

Adres e-mail i hasło

  1. Włącz adres e-mail i hasło w konsoli Firebase.
  2. Renderuj SignInAuthScreen lub SignUpAuthScreen w React, wygenerowane komponenty sign-in-auth-screen lub sign-up-auth-screen w Shadcn albo fui-sign-in-auth-screen lub fui-sign-up-auth-screen w Angular.
  1. Włącz Adres e-mail/hasło i Link do e-maila (logowanie bez hasła) w konsoli Firebase.
  2. Wyrenderuj EmailLinkAuthScreen w React, wygenerowany komponent email-link-auth-screen w Shadcn lub fui-email-link-auth-screen w Angular.
  3. W razie potrzeby dokończ logowanie za pomocą bieżącego adresu URL, korzystając z podstawowych funkcji pomocniczych.
import { completeEmailLinkSignIn } from '@firebase-oss/ui-core';

await completeEmailLinkSignIn(ui, window.location.href);

Dostawcy OAuth

FirebaseUI na potrzeby internetu obsługuje wbudowane przyciski dostawców takich jak Google, Apple, Facebook, GitHub, Microsoft i X/Twitter.

  1. Włącz dostawcę w konsoli Firebase.
  2. W razie potrzeby dodaj domenę aplikacji do sekcji Autoryzowane domeny.
  3. Wyrenderuj OAuthScreen za pomocą wybranych przycisków dostawcy, np. GoogleSignInButton, AppleSignInButton, FacebookSignInButton, GitHubSignInButton, MicrosoftSignInButton lub TwitterSignInButton w React, wygenerowanych odpowiedników shadcn w aplikacji lub fui-oauth-screen za pomocą fui-google-sign-in-button, fui-apple-sign-in-button, fui-facebook-sign-in-button, fui-github-sign-in-button, fui-microsoft-sign-in-button lub fui-twitter-sign-in-button w Angular.

Numer telefonu

  1. Włącz Telefon w konsoli Firebase.
  2. Dodaj domenę aplikacji do Autoryzowanych domen.
  3. Renderuj PhoneAuthScreen lub PhoneAuthForm w React, wygenerowane komponenty phone-auth-screen lub phone-auth-form w Shadcn lub fui-phone-auth-screen w Angular.

Opcjonalnie: skonfiguruj dozwolone kraje, kraj domyślny lub działanie reCAPTCHA:

import {
  countryCodes,
  initializeUI,
  recaptchaVerification,
} from '@firebase-oss/ui-core';

const ui = initializeUI({
  app,
  behaviors: [
    countryCodes({
      allowedCountries: ['GB', 'US', 'FR'],
      defaultCountry: 'GB',
    }),
    recaptchaVerification({
      size: 'compact',
      theme: 'light',
    }),
  ],
});

Dostosowywanie

Skonfiguruj działanie uwierzytelniania współdzielonego w parametrze behaviors przekazywanym do initializeUI(...).

Wymaganie wyświetlanej nazwy podczas rejestracji

import { initializeUI, requireDisplayName } from '@firebase-oss/ui-core';

const ui = initializeUI({
  app,
  behaviors: [requireDisplayName()],
});

Zwiększanie poziomu dostępu użytkowników anonimowych

Użyj działania autoUpgradeAnonymousUsers(...), aby scalić anonimową sesję z kontem, na które użytkownik jest zalogowany.

import {
  autoUpgradeAnonymousUsers,
  initializeUI,
} from '@firebase-oss/ui-core';

const ui = initializeUI({
  app,
  behaviors: [
    autoUpgradeAnonymousUsers({
      async onUpgrade(ui, oldUserId, credential) {
        // Migrate or merge user data here if needed.
      },
    }),
  ],
});

Szczegółowe informacje o migracji znajdziesz w pliku MIGRATION.md.

Zaloguj się

Wyświetl ekran uwierzytelniania i obsłuż powodzenie w wywołaniach zwrotnych komponentu lub w danych wyjściowych Angulara.

Dodaj reakcję

```tsx import { SignInAuthScreen } from '@firebase-oss/ui-react'; import { useNavigate } from 'react-router';

export function SignInPage() { const navigate = useNavigate();

return ( { navigate('/dashboard'); }} /> ); } ```

Shadcn

Shadcn używa tego samego środowiska wykonawczego i przepływu co React. Jedyna różnica polega na tym, że wygenerowany komponent importujesz z aplikacji, a nie z @firebase-oss/ui-react:

```tsx import { SignInAuthScreen } from '@/components/sign-in-auth-screen'; import { useNavigate } from 'react-router';

export function SignInPage() { const navigate = useNavigate();

return ( { navigate('/dashboard'); }} /> ); } ```

Angular

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { SignInAuthScreenComponent } from '@firebase-oss/ui-angular';
import type { User } from '@angular/fire/auth';

@Component({
  selector: 'app-sign-in-page',
  standalone: true,
  imports: [SignInAuthScreenComponent],
  template: `
    <fui-sign-in-auth-screen (signIn)="onSignIn($event)" />
  `,
})
export class SignInPageComponent {
  constructor(private router: Router) {}

  onSignIn(user: User) {
    this.router.navigate(['/dashboard']);
  }
}

Wyloguj się

Aby wylogować użytkowników, użyj standardowego interfejsu API wylogowywania usługi Uwierzytelnianie Firebase:

import { getAuth, signOut } from 'firebase/auth';

const auth = getAuth(app);
await signOut(auth);

Dostawcy OAuth: wyskakujące okienko a przekierowanie

Wybierz wzorzec logowania dostawcy z zachowaniami:

  • providerPopupStrategy() w przypadku automatyzacji wyskakujących okienek,
  • providerRedirectStrategy() w przypadku przepływów przekierowania,

Wyskakujące okienko jest domyślnym ustawieniem, więc musisz tylko skonfigurować przekierowanie:

import { initializeUI, providerRedirectStrategy } from '@firebase-oss/ui-core';

const ui = initializeUI({
  app,
  behaviors: [providerRedirectStrategy()],
});

Aby wyrenderować przyciski OAuth, dodaj je do ekranu specyficznego dla platformy.

Dodaj reakcję

import {
  GitHubSignInButton,
  GoogleSignInButton,
  OAuthScreen,
} from '@firebase-oss/ui-react';

export function OAuthPage() {
  return (
    <OAuthScreen>
      <GoogleSignInButton />
      <GitHubSignInButton />
    </OAuthScreen>
  );
}

Shadcn

import { GitHubSignInButton } from '@/components/github-sign-in-button';
import { GoogleSignInButton } from '@/components/google-sign-in-button';
import { OAuthScreen } from '@/components/oauth-screen';

export function OAuthPage() {
  return (
    <OAuthScreen>
      <GoogleSignInButton />
      <GitHubSignInButton />
    </OAuthScreen>
  );
}

Angular

import { Component } from '@angular/core';
import {
  GithubSignInButtonComponent,
  GoogleSignInButtonComponent,
  OAuthScreenComponent,
} from '@firebase-oss/ui-angular';

@Component({
  selector: 'app-oauth-page',
  standalone: true,
  imports: [
    OAuthScreenComponent,
    GoogleSignInButtonComponent,
    GithubSignInButtonComponent,
  ],
  template: `
    <fui-oauth-screen>
      <fui-google-sign-in-button />
      <fui-github-sign-in-button />
    </fui-oauth-screen>
  `,
})
export class OAuthPageComponent {}

Google One Tap

Aby włączyć jedno dotknięcie Google, użyj tego zachowania: oneTapSignIn(...)

import { initializeUI, oneTapSignIn } from '@firebase-oss/ui-core';

const ui = initializeUI({
  app,
  behaviors: [
    oneTapSignIn({
      clientId: 'YOUR_GOOGLE_WEB_CLIENT_ID',
      autoSelect: false,
      cancelOnTapOutside: false,
    }),
  ],
});

Sprawdź, czy logowanie przez Google jest włączone w konsoli Firebase, a następnie skopiuj identyfikator klienta internetowego z ustawień dostawcy Google.

Warunki korzystania z usługi i polityka prywatności

Dołącz linki do zasad w konfiguracji dostawcy platformy.

Dodaj reakcję

```tsx import { FirebaseUIProvider } from '@firebase-oss/ui-react';

<FirebaseUIProvider ui={ui} policies={{ termsOfServiceUrl: 'https://example.com/terms', privacyPolicyUrl: 'https://example.com/privacy', }}

{children} ; ```

Shadcn

Użyj tej samej konfiguracji FirebaseUIProvider co w przypadku Reacta.

Angular

import { type ApplicationConfig } from '@angular/core';
import { provideFirebaseUIPolicies } from '@firebase-oss/ui-angular';

export const appConfig: ApplicationConfig = {
  providers: [
    provideFirebaseUIPolicies(() => ({
      termsOfServiceUrl: 'https://example.com/terms',
      privacyPolicyUrl: 'https://example.com/privacy',
    })),
  ],
};

Tłumaczenia

FirebaseUI na potrzeby internetu obsługuje lokalizację za pomocą @firebase-oss/ui-translations.

import { initializeUI } from '@firebase-oss/ui-core';
import { registerLocale } from '@firebase-oss/ui-translations';

const enUsCustom = registerLocale('en-US', {
  labels: {
    signIn: 'Continue',
  },
});

const ui = initializeUI({
  app,
  locale: enUsCustom,
});

Dalsze kroki