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

FirebaseUI ile web uygulamanızda kolayca oturum açma olanağı ekleyin

Web için FirebaseUI, Firebase Authentication JavaScript SDK'sı üzerine kurulu bir kitaplıklar kümesidir. Bu kitaplıklar, kimlik doğrulama akışlarını hızlı bir şekilde yayınlamanıza yardımcı olur.

Web için FirebaseUI aşağıdaki avantajları sunar:

initializeApp(...) ve mevcut Firebase JS SDK ile modern modüler SDK desteği.
Tek bir monolitik widget yerine birleştirilebilir ekranlar, formlar ve düğmeler.
React, Shadcn ve Angular desteği.
Yönlendirme ve pop-up akışları, Google One Tap, anonim yükseltme, telefon ayarları ve daha fazlası için yapılandırılabilir davranışlar.
@firebase-oss/ui-translations üzerinden yerelleştirme desteği.
E-posta/şifre, e-posta bağlantısı, telefonla kimlik doğrulama, OAuth sağlayıcıları ve çok öğeli akışlar için yerleşik destek.

Bu kılavuzda, React, Shadcn ve Angular uygulamaları için yükleme, ilk kullanıma hazırlama, oturum açma yöntemleri ve yaygın yapılandırma işlemleri açıklanmaktadır.

Başlamadan önce

Firebase'i web uygulamanıza ekleyin:

Firebase konsolunda Authentication'ı etkinleştirin.

Projenizde henüz yoksa firebase'ı yükleyin:
```
npm install firebase
```
Modüler Firebase JS SDK'sını kullanın:
```
import { initializeApp } from 'firebase/app';

const app = initializeApp({
  /* your Firebase config */
});
```
Platformunuzu seçin ve FirebaseUI'yı yükleyin:

shadcn/ui tabanlı React uygulamaları için Firebase kayıt defterini components.json konumuna ekleyin:
```
{
  "registries": {
    "@firebase": "https://firebaseopensource.com/r/{name}.json"
  }
}
```
Bu kılavuzda kullanılan kimlik doğrulama bileşenleri (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 ve github-sign-in-button dahil) bu kayıt defterinde mevcuttur.

Ardından, kullanmak istediğiniz bileşenleri ekleyin:
```
npx shadcn@latest add @firebase/sign-in-auth-screen @firebase/google-sign-in-button
```
Bu işlem, temel React FirebaseUI bağımlılıklarını sizin için yükler.

shadcn/ui içermeyen React uygulamaları için şunları yükleyin:
```
npm install @firebase-oss/ui-react@beta @firebase-oss/ui-styles
```
Angular uygulamaları için şunları yükleyin:
```
npm install @angular/fire @firebase-oss/ui-angular@beta @firebase-oss/ui-core@beta @firebase-oss/ui-styles@beta
```

FirebaseUI'yı başlatma

initializeUI(...) ile paylaşılan bir kullanıcı arayüzü deposu oluşturun, ardından bunu çerçeve entegrasyonunuza iletin.

Tepki ver

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 ile aynı kurulumu kullanır. Bunun nedeni, arka planda @firebase-oss/ui-react kullanmasıdır:

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

Bu bileşenler mevcut shadcn stillerinizi kullanır. Shadcn kayıt defterini kullanırken genellikle FirebaseUI'nın paketlenmiş CSS'sini içe aktarmazsınız.

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

Stilleri dahil etme

FirebaseUI, React ve Angular için önceden oluşturulmuş kullanıcı arayüzü bileşenlerine sahiptir. Bileşenleri kullanmak için CSS'lerini eklemeniz gerekir:

React veya Angular ile Tailwind kullanıyorsanız:

Aksi takdirde, FirebaseUI stillerini ekleyin:

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

Web için FirebaseUI, CSS değişkeni geçersiz kılmaları aracılığıyla özel temalandırmayı destekler. Daha fazla ayrıntı için tema belgelerine bakın.

Kullanıcıların oturum açabilmesi için Firebase Console'da Authentication (Kimlik Doğrulama) -> Sign-in method (Oturum açma yöntemi) bölümünde istediğiniz her sağlayıcıyı etkinleştirin.

Web için FirebaseUI, doğrudan oluşturduğunuz ekranları, formları ve düğmeleri kullanır. Bu akışların paylaşılan yapılandırması, behaviors içinde bulunur ve initializeUI(...)'ye iletilir.

E-posta adresi ve şifre

Firebase konsolunda E-posta/Şifre'yi etkinleştirin.
React'te SignInAuthScreen veya SignUpAuthScreen, Shadcn'de oluşturulan sign-in-auth-screen veya sign-up-auth-screen bileşenleri ya da Angular'da fui-sign-in-auth-screen veya fui-sign-up-auth-screen oluşturun.

E-posta bağlantısı kimlik doğrulaması

Firebase konsolunda E-posta/Şifre ve E-posta bağlantısı (şifresiz oturum açma) seçeneklerini etkinleştirin.
React'te EmailLinkAuthScreen, Shadcn'de oluşturulan email-link-auth-screen bileşeni veya Angular'da fui-email-link-auth-screen olarak oluşturun.
Gerekirse temel yardımcıları kullanarak mevcut URL ile oturum açma işlemini tamamlayın.

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

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

OAuth sağlayıcıları

Web için FirebaseUI; Google, Apple, Facebook, GitHub, Microsoft ve X/Twitter gibi sağlayıcılar için yerleşik düğmeleri destekler.

Firebase konsolunda sağlayıcıyı etkinleştirin.
Gerekli durumlarda uygulama alanınızı Yetkilendirilmiş alanlar'a ekleyin.
OAuthScreen öğesini istediğiniz sağlayıcı düğmeleriyle (ör. GoogleSignInButton, AppleSignInButton, FacebookSignInButton, GitHubSignInButton, MicrosoftSignInButton veya TwitterSignInButton) React'te, uygulamanızda oluşturulan shadcn eşdeğerleriyle ya da fui-oauth-screen öğesini 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 veya fui-twitter-sign-in-button ile Angular'da oluşturun.

Telefon numarası

Firebase konsolunda Telefon'u etkinleştirin.
Uygulama alanınızı Yetkilendirilmiş alanlar'a ekleyin.
React'te PhoneAuthScreen veya PhoneAuthForm, Shadcn'de oluşturulan phone-auth-screen veya phone-auth-form bileşenleri ya da Angular'da fui-phone-auth-screen öğesini oluşturun.

İsteğe bağlı: İzin verilen ülkeleri, varsayılan ülkeyi veya reCAPTCHA davranışını yapılandırın:

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

Özelleştirme

behaviors uygulamasında yapılandırılan paylaşılan kimlik doğrulama davranışı initializeUI(...) uygulamasına aktarılır.

Kayıt sırasında görünen ad zorunlu olsun

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

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

Anonim kullanıcıların erişimini yükseltme

Anonim bir oturumu oturum açılmış bir hesapla birleştirmek için autoUpgradeAnonymousUsers(...) davranışını kullanın.

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

Taşıma ayrıntıları için MIGRATION.md başlıklı makaleyi inceleyin.

İstediğiniz kimlik doğrulama ekranını oluşturun ve bileşen geri çağırmalarında veya Angular çıkışlarında başarıyı yönetin.

Tepki ver

```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 ile aynı çalışma zamanını ve akışı kullanır. Tek fark, oluşturulan bileşeni @firebase-oss/ui-react yerine uygulamanızdan içe aktarmanızdır:

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

Oturumu kapat

Kullanıcıların oturumunu kapatmak için standart Firebase Authentication oturum kapatma API'sini kullanın:

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

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

Davranışlarla birlikte sağlayıcı oturum açma akışını seçin:

Pop-up akışları için providerPopupStrategy()
Yönlendirme akışları için providerRedirectStrategy()

Varsayılan olarak pop-up gösterilir. Bu nedenle, yönlendirmeyi yalnızca açıkça yapılandırmanız gerekir:

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

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

OAuth düğmelerini oluşturmak için bunları platforma özel ekranınıza ekleyin.

Tepki ver

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

Google One Tap'i etkinleştirmek için oneTapSignIn(...) davranışını kullanın:

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

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

Firebase konsolunda Google ile oturum açma özelliğinin etkin olduğundan emin olun ve Google sağlayıcı ayarlarından web istemcisi kimliğini kopyalayın.

Hizmet şartları ve gizlilik politikası

Platform sağlayıcı yapılandırması aracılığıyla politika bağlantılarını ekleyin.

Tepki ver

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

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

{children} ; ```

Shadcn

React ile aynı FirebaseUIProvider yapılandırmasını kullanın.

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

Çeviriler

Web için FirebaseUI, @firebase-oss/ui-translations aracılığıyla yerelleştirmeyi destekler.

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

Sonraki adımlar

API'nin tamamı, davranışlar ve bileşen referansı için README.md dosyasını okuyun.
Mevcut bir uygulamayı FirebaseUI for Web'e taşıyorsanız MIGRATION.md dosyasını okuyun.
packages/react/README.md, packages/shadcn/README.md ve packages/angular/README.md dosyalarındaki pakete özel dokümanlara bakın.
examples/react, examples/shadcn, ve examples/angular klasörlerindeki örnekleri inceleyin.

FirebaseUI ile web uygulamanızda kolayca oturum açma olanağı ekleyin Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.

Başlamadan önce

FirebaseUI'yı başlatma

Tepki ver

Shadcn

Angular

Stilleri dahil etme

Oturum açma yöntemlerini ayarlama

E-posta adresi ve şifre

E-posta bağlantısı kimlik doğrulaması

OAuth sağlayıcıları

Telefon numarası

Özelleştirme

Kayıt sırasında görünen ad zorunlu olsun

Anonim kullanıcıların erişimini yükseltme

Oturum aç

Tepki ver

Shadcn

Angular

Oturumu kapat

OAuth sağlayıcıları: pop-up ve yönlendirme

Tepki ver

Shadcn

Angular

Google One Tap

Hizmet şartları ve gizlilik politikası

Tepki ver

Shadcn

Angular

Çeviriler

Sonraki adımlar

FirebaseUI ile web uygulamanızda kolayca oturum açma olanağı ekleyin