Google, içerikleri tercih ettiğiniz dile çevirmek için yapay zeka teknolojisini kullanır. Yapay zeka çevirilerinde hata olabilir.

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 şu 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 için destek.
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 faktörlü akışlar için yerleşik destek.

Bu kılavuzda; React, Shadcn ve Angular uygulamaları için yükleme, başlatma, oturum açma yöntemleri ve yaygın yapılandırma işlemleri adım adım açıklanmaktadır.

Başlamadan önce

Firebase'i web uygulamanıza ekleyin:

Firebase konsolunda Authentication'ı etkinleştirin.

Projenizde 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 şunu 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, Shadcn'nin de 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 et

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:

Tailwind'i React veya Angular ile 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 bilgi için tema belgelerine bakın.

Kullanıcıların oturum açabilmesi için Firebase konsolundaki Kimlik doğrulama -> 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 yer alır 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 öğesini 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ı Yetkili alanlar'a ekleyin.
OAuthScreen öğesini istediğiniz sağlayıcı düğmeleriyle (ör. GoogleSignInButton, AppleSignInButton, FacebookSignInButton, GitHubSignInButton, MicrosoftSignInButton veya TwitterSignInButton) oluşturun. React'te, uygulamanızda oluşturulan shadcn eşdeğerleri veya Angular'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 oluşturun.

Telefon numarası

Firebase konsolunda Telefon'u etkinleştirin.
Uygulama alanınızı Yetkili 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 içinde initializeUI(...)'a iletilen paylaşılan kimlik doğrulama davranışını yapılandırın.

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 dosyasına bakın.

İ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);

Aşağıdaki davranışları içeren 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 istemci kimliğini kopyalayın.

Hizmet şartları ve gizlilik politikası

Platform sağlayıcı yapılandırması üzerinden 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 adreslerindeki 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 et

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