Angular ile Firebase Authentication entegrasyonu nasıl yapılır?

Angular ile Firebase Authentication Entegrasyonu

Angular uygulamanızda Firebase Authentication kullanmak için aşağıdaki adımları izleyebilirsiniz:

1. Firebase Projesi Oluşturma

- Firebase Console'da yeni bir proje oluşturun. - Proje ayarlarında "Authentication" sekmesine gidin ve oturum açma yöntemlerini yapılandırın.

2. Angular Uygulaması İçin Firebase Bağlantısı

- Angular projenize Firebase ve AngularFire kütüphanelerini ekleyin. - Terminalde şu komutları çalıştırın: - npm install firebase @angular/fire

3. Firebase Yapılandırması

- Firebase projeniz için gerekli yapılandırma bilgilerini alın. - Angular uygulamanızda bu bilgileri içeren bir ortam dosyası oluşturun (örneğin, `environment.ts`): ```typescript export const environment = { production: false, firebaseConfig: { apiKey: 'YOUR_API_KEY', authDomain: 'YOUR_PROJECT_ID.firebaseapp.com', projectId: 'YOUR_PROJECT_ID', storageBucket: 'YOUR_PROJECT_ID.appspot.com', messagingSenderId: 'YOUR_SENDER_ID', appId: 'YOUR_APP_ID', }, }; ```

4. Firebase'i Başlatma

- `app.module.ts` dosyasını açın ve Firebase'i başlatın: ```typescript import { AngularFireModule } from '@angular/fire'; import { AngularFireAuthModule } from '@angular/fire/auth'; import { environment } from '../environments/environment'; @NgModule({ imports: [ AngularFireModule.initializeApp(environment.firebaseConfig), AngularFireAuthModule, ], }) export class AppModule {} ```

5. Authentication Servisi Oluşturma

- Kullanıcı kayıt ve giriş işlemleri için bir servis oluşturun: ```typescript import { Injectable } from '@angular/core'; import { AngularFireAuth } from '@angular/fire/auth'; @Injectable({ providedIn: 'root', }) export class AuthService { constructor(private afAuth: AngularFireAuth) {} async signUp(email: string, password: string) { return this.afAuth.createUserWithEmailAndPassword(email, password); } async signIn(email: string, password: string) { return this.afAuth.signInWithEmailAndPassword(email, password); } async signOut() { return this.afAuth.signOut(); } } ```

6. Kullanıcı Arayüzü Oluşturma

- Giriş ve kayıt formlarını oluşturun. - Kullanıcıların giriş yapabildiği ve kayıt olabildiği bileşenler geliştirin.

7. Kullanıcı Durumunu Takip Etme

- Kullanıcının oturum açma durumunu takip etmek için `AuthService` içinde bir yöntem ekleyin: ```typescript getUser() { return this.afAuth.authState; } ``` Bu adımları takip ederek Angular uygulamanızda Firebase Authentication entegrasyonunu gerçekleştirebilirsiniz.