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

เพิ่มการลงชื่อเข้าใช้ไปยังเว็บแอปได้ง่ายๆ ด้วย Firebase UI

FirebaseUI สำหรับเว็บคือชุดไลบรารีที่สร้างขึ้นบน JavaScript SDK ของ การตรวจสอบสิทธิ์ Firebase ซึ่งช่วยให้คุณเผยแพร่โฟลว์การตรวจสอบสิทธิ์ได้อย่างรวดเร็ว

FirebaseUI สำหรับเว็บมีประโยชน์ดังนี้

รองรับ SDK แบบแยกส่วนที่ทันสมัยด้วย initializeApp(...) และ Firebase JS SDK ปัจจุบัน
หน้าจอ แบบฟอร์ม และปุ่มที่ประกอบได้แทนวิดเจ็ตแบบโมโนลิธเดียว
รองรับ React, Shadcn และ Angular
ลักษณะการทำงานที่กำหนดค่าได้สำหรับการเปลี่ยนเส้นทางเทียบกับโฟลว์ป๊อปอัป, Google One Tap, การอัปเกรดแบบไม่ระบุตัวตน, การตั้งค่าโทรศัพท์ และอื่นๆ
การสนับสนุนการแปลผ่าน @firebase-oss/ui-translations
รองรับอีเมล/รหัสผ่าน ลิงก์อีเมล การตรวจสอบสิทธิ์ทางโทรศัพท์ ผู้ให้บริการ OAuth และขั้นตอนการตรวจสอบสิทธิ์แบบหลายปัจจัยในตัว

คู่มือนี้จะอธิบายวิธีการติดตั้ง การเริ่มต้นใช้งาน วิธีการลงชื่อเข้าใช้ และ การกำหนดค่าทั่วไปสำหรับแอป React, Shadcn และ Angular

ก่อนเริ่มต้น

เพิ่ม Firebase ไปยังเว็บแอปโดยทำดังนี้

เปิดใช้การตรวจสอบสิทธิ์ในคอนโซล Firebase

ติดตั้ง firebase หากยังไม่ได้ติดตั้งในโปรเจ็กต์
```
npm install firebase
```
ใช้ Firebase JS SDK แบบแยกส่วน
```
import { initializeApp } from 'firebase/app';

const app = initializeApp({
  /* your Firebase config */
});
```
เลือกแพลตฟอร์มและติดตั้ง FirebaseUI

สําหรับแอป React ที่อิงตาม shadcn/ui ให้เพิ่ม รีจิสทรี Firebase ไปยัง components.json
```
{
  "registries": {
    "@firebase": "https://firebaseopensource.com/r/{name}.json"
  }
}
```
คอมโพเนนต์การตรวจสอบสิทธิ์ที่ใช้ตลอดทั้งคู่มือนี้พร้อมใช้งานจากรีจิสทรีดังกล่าว ซึ่งรวมถึง 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 และ github-sign-in-button

จากนั้นเพิ่มคอมโพเนนต์ที่ต้องการใช้
```
npx shadcn@latest add @firebase/sign-in-auth-screen @firebase/google-sign-in-button
```
ซึ่งจะติดตั้งทรัพยากร Dependency ของ React FirebaseUI พื้นฐานให้คุณ

สำหรับแอป React ที่ไม่มี shadcn/ui ให้ติดตั้ง
```
npm install @firebase-oss/ui-react@beta @firebase-oss/ui-styles
```
สำหรับแอป Angular ให้ติดตั้ง
```
npm install @angular/fire @firebase-oss/ui-angular@beta @firebase-oss/ui-core@beta @firebase-oss/ui-styles@beta
```

เริ่มต้น FirebaseUI

สร้างที่เก็บ UI ที่แชร์ด้วย initializeUI(...) จากนั้นส่งไปยังการผสานรวมเฟรมเวิร์ก

โต้ตอบ

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 ใช้การตั้งค่าเดียวกับ React เนื่องจากใช้ @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>;
}

คอมโพเนนต์เหล่านี้ใช้สไตล์ shadcn ที่มีอยู่แล้ว โดยปกติคุณจะไม่ต้องนำเข้า CSS ที่รวมไว้ของ FirebaseUI เมื่อใช้รีจิสทรี 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],
      }),
    ),
  ],
};

รวมรูปแบบ

FirebaseUI มีคอมโพเนนต์ UI ที่สร้างไว้ล่วงหน้าสำหรับ React และ Angular หากต้องการใช้ คอมโพเนนต์ คุณต้องรวม CSS ของคอมโพเนนต์นั้นๆ ดังนี้

หากคุณใช้ Tailwind กับ React หรือ Angular ให้ทำดังนี้

หรือจะรวมสไตล์ FirebaseUI ก็ได้

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

FirebaseUI สำหรับเว็บรองรับการกำหนดธีมที่กำหนดเองผ่านการลบล้างตัวแปร CSS ดูรายละเอียดเพิ่มเติมได้ที่เอกสารประกอบเกี่ยวกับการกำหนดธีม

ก่อนที่ผู้ใช้จะลงชื่อเข้าใช้ได้ ให้เปิดใช้ผู้ให้บริการแต่ละรายที่คุณต้องการในการตรวจสอบสิทธิ์ -> วิธีการลงชื่อเข้าใช้ในคอนโซล Firebase

FirebaseUI สำหรับเว็บใช้หน้าจอ แบบฟอร์ม และปุ่มที่คุณแสดงผลโดยตรง การกำหนดค่าที่แชร์สำหรับโฟลว์เหล่านั้นจะอยู่ใน behaviors ที่ส่งไปยัง initializeUI(...)

อีเมลและรหัสผ่าน

เปิดใช้อีเมล/รหัสผ่านในคอนโซล Firebase
แสดงผล SignInAuthScreen หรือ SignUpAuthScreen ใน React, คอมโพเนนต์ sign-in-auth-screen หรือ sign-up-auth-screen ที่สร้างขึ้นใน Shadcn หรือ fui-sign-in-auth-screen หรือ fui-sign-up-auth-screen ใน Angular

การตรวจสอบสิทธิ์ลิงก์ในอีเมล

เปิดใช้อีเมล/รหัสผ่านและลิงก์อีเมล (การลงชื่อเข้าใช้แบบไม่ต้องใช้รหัสผ่าน) ในคอนโซล Firebase
แสดงผล EmailLinkAuthScreen ใน React, คอมโพเนนต์ email-link-auth-screen ที่สร้างขึ้นใน Shadcn หรือ fui-email-link-auth-screen ใน Angular
ลงชื่อเข้าใช้ให้เสร็จสมบูรณ์ด้วย URL ปัจจุบันโดยใช้ตัวช่วยหลักเมื่อจำเป็น

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

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

ผู้ให้บริการ OAuth

FirebaseUI สำหรับเว็บรองรับปุ่มในตัวสำหรับผู้ให้บริการ เช่น Google, Apple, Facebook, GitHub, Microsoft และ X/Twitter

เปิดใช้ผู้ให้บริการในคอนโซล Firebase
เพิ่มโดเมนแอปไปยังโดเมนที่ได้รับอนุญาตหากจำเป็น
แสดงผล OAuthScreen ด้วยปุ่มผู้ให้บริการที่คุณต้องการ เช่น GoogleSignInButton, AppleSignInButton, FacebookSignInButton GitHubSignInButton, MicrosoftSignInButton หรือ TwitterSignInButton ใน React, องค์ประกอบที่เทียบเท่ากับ shadcn ที่สร้างขึ้นในแอป หรือ fui-oauth-screen ด้วย 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 หรือ fui-twitter-sign-in-button ใน Angular

หมายเลขโทรศัพท์

เปิดใช้โทรศัพท์ในคอนโซล Firebase
เพิ่มโดเมนของแอปไปยังโดเมนที่ได้รับอนุญาต
แสดงผล PhoneAuthScreen หรือ PhoneAuthForm ใน React, คอมโพเนนต์ phone-auth-screen หรือ phone-auth-form ที่สร้างขึ้นใน Shadcn หรือ fui-phone-auth-screen ใน Angular

ไม่บังคับ: กำหนดค่าประเทศที่อนุญาต ประเทศเริ่มต้น หรือลักษณะการทำงานของ 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',
    }),
  ],
});

การปรับแต่ง

กำหนดค่าลักษณะการทำงานของการตรวจสอบสิทธิ์ที่แชร์ใน behaviors ที่ส่งไปยัง initializeUI(...)

กำหนดให้ระบุชื่อที่แสดงระหว่างการลงชื่อสมัครใช้

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

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

อัปเกรดผู้ใช้ที่ไม่ระบุชื่อ

ใช้ลักษณะการทำงานของ autoUpgradeAnonymousUsers(...) เพื่อผสานเซสชันที่ไม่ระบุตัวตน เข้ากับบัญชีที่ลงชื่อเข้าใช้

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

โปรดดูรายละเอียดเกี่ยวกับการย้ายข้อมูลที่ MIGRATION.md)

แสดงหน้าจอการให้สิทธิ์ที่ต้องการและจัดการความสำเร็จในแฮนเดิลการเรียกกลับของคอมโพเนนต์หรือเอาต์พุต Angular

โต้ตอบ

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

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

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

Shadcn

Shadcn ใช้รันไทม์และโฟลว์เดียวกันกับ React ความแตกต่างเพียงอย่างเดียวคือ คุณจะนำเข้าคอมโพเนนต์ที่สร้างขึ้นจากแอปแทนที่จะนำเข้าจาก @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']);
  }
}

ออกจากระบบ

หากต้องการนำผู้ใช้ออกจากระบบ ให้ใช้ API การออกจากระบบการตรวจสอบสิทธิ์ Firebase มาตรฐาน

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

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

เลือกโฟลว์การลงชื่อเข้าใช้ของผู้ให้บริการที่มีลักษณะการทำงานต่อไปนี้

providerPopupStrategy() สำหรับโฟลว์ป๊อปอัป
providerRedirectStrategy() สำหรับขั้นตอนการเปลี่ยนเส้นทาง

ป๊อปอัปเป็นค่าเริ่มต้น ดังนั้นคุณจึงต้องกำหนดค่าการเปลี่ยนเส้นทางอย่างชัดเจนเท่านั้น

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

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

หากต้องการแสดงปุ่ม OAuth ให้เพิ่มปุ่มดังกล่าวลงในหน้าจอเฉพาะแพลตฟอร์ม

โต้ตอบ

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

ใช้ลักษณะการทำงานของ oneTapSignIn(...) เพื่อเปิดใช้ Google One Tap:

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

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

ตรวจสอบว่าได้เปิดใช้ Google Sign-In ในคอนโซล Firebase แล้ว จากนั้นคัดลอก รหัสไคลเอ็นต์ของเว็บจากการตั้งค่าผู้ให้บริการ Google

ข้อกำหนดในการให้บริการและนโยบายความเป็นส่วนตัว

แนบลิงก์นโยบายผ่านการกำหนดค่าผู้ให้บริการแพลตฟอร์ม

โต้ตอบ

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

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

{children} ; ```

Shadcn

ใช้การกำหนดค่า FirebaseUIProvider เดียวกับ 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',
    })),
  ],
};

คำแปล

FirebaseUI สำหรับเว็บรองรับการแปลผ่าน @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,
});

ขั้นตอนถัดไป

อ่าน README.md เพื่อดู API, ลักษณะการทำงาน และข้อมูลอ้างอิงของคอมโพเนนต์ทั้งหมด
อ่าน MIGRATION.md หากคุณย้ายข้อมูลแอปที่มีอยู่ไปยัง FirebaseUI สำหรับเว็บ
ดูเอกสารเฉพาะแพ็กเกจได้ที่ packages/react/README.md, packages/shadcn/README.md และ packages/angular/README.md
ดูตัวอย่างได้ที่ examples/react, examples/shadcn และ examples/angular

ก่อนเริ่มต้น

เริ่มต้น FirebaseUI

โต้ตอบ

Shadcn

Angular

รวมรูปแบบ

ตั้งค่าวิธีการลงชื่อเข้าใช้

อีเมลและรหัสผ่าน

การตรวจสอบสิทธิ์ลิงก์ในอีเมล

ผู้ให้บริการ OAuth

หมายเลขโทรศัพท์

การปรับแต่ง

กำหนดให้ระบุชื่อที่แสดงระหว่างการลงชื่อสมัครใช้

อัปเกรดผู้ใช้ที่ไม่ระบุชื่อ

ลงชื่อเข้าใช้

โต้ตอบ

Shadcn

Angular

ออกจากระบบ

ผู้ให้บริการ OAuth: ป๊อปอัปเทียบกับการเปลี่ยนเส้นทาง

โต้ตอบ

Shadcn

Angular

Google One Tap

ข้อกำหนดในการให้บริการและนโยบายความเป็นส่วนตัว

โต้ตอบ

Shadcn

Angular

คำแปล

ขั้นตอนถัดไป