Ł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żącym pakietem 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, numeru 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 swojej aplikacji internetowej:

    Włącz Uwierzytelnianie w konsoli Firebase.

    Zainstaluj firebase, jeśli nie ma jej 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 dodać ich kod CSS:

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

W przeciwnym razie dodaj 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 używa ekranów, formularzy i przycisków, które renderujesz bezpośrednio. Wspólna konfiguracja tych procesów znajduje się w behaviors przekazywanym do initializeUI(...).

Adres e-mail i hasło

  1. Włącz e-maila 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 w konsoli Firebase opcje Adres e-mail/hasło i Link w e-mailu (logowanie bez hasła).
  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 dostawców, 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 sekcji Autoryzowane domeny.
  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 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 autoUpgradeAnonymousUsers(...), aby scalić anonimową sesję z zalogowanym kontem.

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ż sukces 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 u dostawcy z zachowaniami:

  • providerPopupStrategy() w przypadku przepływów 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 {}

Logowanie jednym dotknięciem w Google

Aby włączyć jedno dotknięcie Google, użyj działania 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 za pomocą 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 dla aplikacji internetowych obsługuje lokalizację za pomocą tagu @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