Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

Dễ dàng thêm tính năng đăng nhập vào ứng dụng web bằng FirebaseUI

FirebaseUI cho web là một tập hợp các thư viện được xây dựng trên SDK JavaScript Xác thực Firebase giúp bạn nhanh chóng triển khai các quy trình xác thực.

FirebaseUI cho Web mang lại những lợi ích sau:

Hỗ trợ SDK dạng mô-đun hiện đại bằng initializeApp(...) và Firebase JS SDK hiện tại.
Màn hình, biểu mẫu và nút có thể kết hợp thay vì một tiện ích đơn nguyên.
Hỗ trợ React, Shadcn và Angular.
Các hành vi có thể định cấu hình cho luồng chuyển hướng so với luồng cửa sổ bật lên, Google One Tap, nâng cấp ẩn danh, chế độ cài đặt điện thoại và nhiều hành vi khác.
Hỗ trợ bản địa hoá thông qua @firebase-oss/ui-translations.
Hỗ trợ sẵn cho email/mật khẩu, đường liên kết qua email, xác thực bằng điện thoại, nhà cung cấp OAuth và quy trình xác thực đa yếu tố.

Hướng dẫn này trình bày quy trình cài đặt, khởi tạo, các phương thức đăng nhập và cấu hình chung cho các ứng dụng React, Shadcn và Angular.

Trước khi bắt đầu

Thêm Firebase vào ứng dụng web của bạn:

Bật Xác thực trong bảng điều khiển của Firebase.

Cài đặt firebase nếu ứng dụng này chưa có trong dự án của bạn:
```
npm install firebase
```
Sử dụng Firebase JS SDK dạng mô-đun:
```
import { initializeApp } from 'firebase/app';

const app = initializeApp({
  /* your Firebase config */
});
```
Chọn nền tảng của bạn rồi cài đặt FirebaseUI:

Đối với các ứng dụng React dựa trên shadcn/ui, hãy thêm sổ đăng ký Firebase vào components.json:
```
{
  "registries": {
    "@firebase": "https://firebaseopensource.com/r/{name}.json"
  }
}
```
Các thành phần xác thực được dùng trong suốt hướng dẫn này đều có trong sổ đăng ký đó, bao gồm 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 và github-sign-in-button.

Sau đó, hãy thêm các thành phần bạn muốn sử dụng:
```
npx shadcn@latest add @firebase/sign-in-auth-screen @firebase/google-sign-in-button
```
Thao tác này sẽ cài đặt các phần phụ thuộc cơ bản của React FirebaseUI cho bạn.

Đối với các ứng dụng React không có shadcn/ui, hãy cài đặt:
```
npm install @firebase-oss/ui-react@beta @firebase-oss/ui-styles
```
Đối với các ứng dụng Angular, hãy cài đặt:
```
npm install @angular/fire @firebase-oss/ui-angular@beta @firebase-oss/ui-core@beta @firebase-oss/ui-styles@beta
```

Khởi tạo FirebaseUI

Tạo một kho giao diện người dùng dùng chung bằng initializeUI(...), sau đó truyền kho này đến chế độ tích hợp khung.

Thể hiện cảm xúc

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 sử dụng cùng một chế độ thiết lập như React, vì Shadcn cũng sử dụng @firebase-oss/ui-react nâng cao:

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>;
}

Các thành phần này sử dụng các kiểu shadcn hiện có của bạn; bạn thường không nhập CSS đi kèm của FirebaseUI khi sử dụng sổ đăng ký 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],
      }),
    ),
  ],
};

Bao gồm các kiểu

FirebaseUI có các thành phần giao diện người dùng dựng sẵn cho React và Angular. Để sử dụng các thành phần này, bạn cần thêm CSS của chúng:

Nếu bạn đang sử dụng Tailwind với React hoặc Angular:

Nếu không, hãy thêm các kiểu FirebaseUI:

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

FirebaseUI cho Web hỗ trợ việc tạo giao diện tuỳ chỉnh thông qua các chế độ ghi đè biến CSS. Để biết thêm thông tin chi tiết, hãy xem tài liệu về việc tạo giao diện.

Trước khi người dùng có thể đăng nhập, hãy bật từng nhà cung cấp mà bạn muốn trong phần Xác thực -> Phương thức đăng nhập trong bảng điều khiển của Firebase.

FirebaseUI cho Web sử dụng các màn hình, biểu mẫu và nút mà bạn hiển thị trực tiếp. Cấu hình dùng chung cho các luồng đó nằm trong behaviors được truyền đến initializeUI(...).

Địa chỉ email và mật khẩu

Bật Email/Password (Email/Mật khẩu) trong bảng điều khiển của Firebase.
Kết xuất SignInAuthScreen hoặc SignUpAuthScreen trong React, các thành phần sign-in-auth-screen hoặc sign-up-auth-screen được tạo trong Shadcn, hoặc fui-sign-in-auth-screen hoặc fui-sign-up-auth-screen trong Angular.

Xác thực bằng đường liên kết trong email

Bật Email/Mật khẩu và Đường liên kết qua email (đăng nhập không cần mật khẩu) trong bảng điều khiển của Firebase.
Kết xuất EmailLinkAuthScreen trong React, thành phần email-link-auth-screen được tạo trong Shadcn hoặc fui-email-link-auth-screen trong Angular.
Hoàn tất quy trình đăng nhập bằng URL hiện tại bằng cách sử dụng các trình trợ giúp cốt lõi khi cần.

import { completeEmailLinkSignIn } from '@firebase-oss/ui-core';

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

Nhà cung cấp OAuth

FirebaseUI cho Web hỗ trợ các nút tích hợp sẵn cho các nhà cung cấp như Google, Apple, Facebook, GitHub, Microsoft và X/Twitter.

Bật trình cung cấp trong bảng điều khiển của Firebase.
Thêm miền ứng dụng của bạn vào Miền được uỷ quyền (nếu cần).
Hiển thị OAuthScreen bằng các nút nhà cung cấp mà bạn muốn, chẳng hạn như GoogleSignInButton, AppleSignInButton, FacebookSignInButton, GitHubSignInButton, MicrosoftSignInButton hoặc TwitterSignInButton trong React, các nút tương đương được tạo bằng shadcn trong ứng dụng của bạn hoặc fui-oauth-screen bằng 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 hoặc fui-twitter-sign-in-button trong Angular.

Số điện thoại

Bật Điện thoại trong bảng điều khiển của Firebase.
Thêm miền của ứng dụng vào Miền được uỷ quyền.
Kết xuất PhoneAuthScreen hoặc PhoneAuthForm trong React, các thành phần phone-auth-screen hoặc phone-auth-form được tạo trong Shadcn hoặc fui-phone-auth-screen trong Angular.

Không bắt buộc: định cấu hình các quốc gia được phép, quốc gia mặc định hoặc hành vi 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',
    }),
  ],
});

Tùy chỉnh

Định cấu hình hành vi xác thực dùng chung trong behaviors được truyền đến initializeUI(...).

Yêu cầu người dùng nhập tên hiển thị trong quá trình đăng ký

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

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

Nâng cấp người dùng ẩn danh

Sử dụng hành vi autoUpgradeAnonymousUsers(...) để hợp nhất một phiên ẩn danh vào một tài khoản đã đăng nhập.

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.
      },
    }),
  ],
});

Để biết thông tin chi tiết về hoạt động di chuyển, hãy xem MIGRATION.md).

Kết xuất màn hình xác thực mà bạn muốn và xử lý thành công trong các lệnh gọi lại thành phần hoặc đầu ra Angular.

Thể hiện cảm xúc

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

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

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

Shadcn

Shadcn sử dụng cùng một thời gian chạy và quy trình như React. Điểm khác biệt duy nhất là bạn nhập thành phần đã tạo từ ứng dụng của mình thay vì từ @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']);
  }
}

Đăng xuất

Để đăng xuất người dùng, hãy sử dụng API đăng xuất tiêu chuẩn của Xác thực Firebase:

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

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

Chọn quy trình đăng nhập bằng nhà cung cấp có các hành vi sau:

providerPopupStrategy() cho luồng bật lên
providerRedirectStrategy() cho các luồng chuyển hướng

Cửa sổ bật lên là chế độ mặc định, vì vậy bạn chỉ cần định cấu hình rõ ràng lệnh chuyển hướng:

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

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

Để hiển thị các nút OAuth, hãy thêm các nút đó vào màn hình dành riêng cho nền tảng của bạn.

Thể hiện cảm xúc

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

Sử dụng hành vi oneTapSignIn(...) để bật tính năng Một lần nhấn của Google:

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

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

Đảm bảo bạn đã bật tính năng đăng nhập bằng Google trong bảng điều khiển của Firebase, sau đó sao chép mã ứng dụng khách web từ phần cài đặt nhà cung cấp Google.

Điều khoản dịch vụ và chính sách quyền riêng tư

Đính kèm đường liên kết đến chính sách thông qua cấu hình nhà cung cấp nền tảng.

Thể hiện cảm xúc

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

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

{children} ; ```

Shadcn

Sử dụng cùng cấu hình FirebaseUIProvider như React.

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',
    })),
  ],
};

Bản dịch

FirebaseUI cho Web hỗ trợ bản địa hoá thông qua @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,
});

Các bước tiếp theo

Đọc README.md để biết toàn bộ API, hành vi và thông tin tham khảo về thành phần.
Đọc MIGRATION.md nếu bạn đang di chuyển một ứng dụng hiện có sang FirebaseUI cho Web.
Hãy xem tài liệu dành riêng cho gói trong packages/react/README.md, packages/shadcn/README.md và packages/angular/README.md.
Khám phá các ví dụ trong examples/react, examples/shadcn và examples/angular.

Dễ dàng thêm tính năng đăng nhập vào ứng dụng web bằng FirebaseUI Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.

Trước khi bắt đầu

Khởi tạo FirebaseUI

Thể hiện cảm xúc

Shadcn

Angular

Bao gồm các kiểu

Thiết lập phương thức đăng nhập

Địa chỉ email và mật khẩu

Xác thực bằng đường liên kết trong email

Nhà cung cấp OAuth

Số điện thoại

Tùy chỉnh

Yêu cầu người dùng nhập tên hiển thị trong quá trình đăng ký

Nâng cấp người dùng ẩn danh

Đăng nhập

Thể hiện cảm xúc

Shadcn

Angular

Đăng xuất

Nhà cung cấp OAuth: cửa sổ bật lên so với chuyển hướng

Thể hiện cảm xúc

Shadcn

Angular

Google One Tap

Điều khoản dịch vụ và chính sách quyền riêng tư

Thể hiện cảm xúc

Shadcn

Angular

Bản dịch

Các bước tiếp theo

Dễ dàng thêm tính năng đăng nhập vào ứng dụng web bằng FirebaseUI