Naučme se, jak nainstalovat a nastavit AngularFire2 4.0

Sponzoruje: letsboot.com
Podívejte se na naše školení Angular In-House nebo veřejné kurzy Angular.
Vyzkoušejte fossilo.com, náš úhlový projekt pro archivaci kompletních webů.

nebo naše webová platforma „letslearn“ za účelem správy kurzů školení Angular jsme si pro vytvoření této nové aplikace samozřejmě vybrali Angular4 a Firebase4!

Zde se naučíme, jak vytvořit nový projekt s úhlovým / cli, Firebase Authentication pro přihlášení a Firebase Database pro čtení dat.

Koncem května 2017 byly vydány nové aktualizace AngularFire2, takže pro tento projekt byl použit AngularFire2 4.0.

Vytvořte nový Firebase

Vygenerujte dvě databáze Firebase: jednu pro vývoj (letslearn-dev) a druhou pro produkci (letslearn).

2 způsoby, jak to udělat:

> přidat projekt do konzole Firebase

> importujte existující projekt Google z platformy Google Cloud Platform

Zahájení nového projektu Angular

Namontujte úhlové cli pomocí npm.

npm install -g @ angular / cli

Vytvořte svůj nový projekt, přesuňte se do úložiště a spusťte server.

ng new letslearn - prefix lsl
cd letslearn
ng sloužit -o

Vaše lokální aplikace je nyní načtena do vašeho prohlížeče: http: // localhost: 4200 / Výchozí port můžete změnit pomocí volby - port. Měla by se zobrazit zpráva „Vítejte v lsl !!“!

Nainstalujte a nastavte Firebase

Nainstalujte nejnovější verzi AngularFire2 a Firebase s npm.

npm install angularfire2 firebase - save

Zkopírujte a vložte konfiguraci Firebase z části Přehled a přidejte ji do souborů proměnných prostředí:

> src / environment / environment.ts pro vývoj (letslearn-dev)

> src / environment / environment.prod.ts pro výrobu (letlearn)

export const environment = {
  produkce: nepravdivá,
  firebase: {
    apiKey: 'xxx',
    authDomain: 'xxx.firebaseapp.com',
    databaseURL: 'https://xxx.firebaseio.com',
    projectId: 'xxx',
    storageBucket: 'xxx.appspot.com',
    messagingSenderId: 'xxx'
  }
};

Nastavení a import modulů AngularFire

Chcete-li nastavit a importovat moduly, které potřebujete pro vaši aplikaci, přejděte na src / app / app.module.ts.

Importujte AngularFireModule, AngularFireDatabaseModule a AngularFireAuthModule z angularfire2 a prostředí a získejte nastavení Firebase.

importovat {AngularFireModule} z 'angularfire2';
importovat {AngularFireDatabaseModule} z 'angularfire2 / database';
importovat {AngularFireAuthModule} z 'angularfire2 / auth';
importovat {environment} z 'prostředí / prostředí';

Poté přidejte moduly do NgModule. Název Firebase lze upravit pomocí „initialiazeApp“.

@NgModule ({
  prohlášení: [
    AppComponent
  ],
  import: [
    BrowserModule,
    AngularFireModule.initializeApp (environment.firebase, 'letslearn-dev'),
    AngularFireDatabaseModule,
    AngularFireAuthModule
  ],
  bootstrap: [AppComponent]
})
exportovat třídu AppModule {}

Vytvořte službu AuthService pro správu autentizace.

Můžete ji vytvořit ve sdílené složce.

ng generovat sdílenou / autorizovanou službu

Poté jej importujte do src / app / app.module.ts a zaregistrujte službu AuthService u poskytovatelů.

importovat {AuthService} z './shared/auth.service';
@NgModule ({
  poskytovatelé: [AuthService],
})

V src / app / shared / auth.service.ts importujte AngularFireAuth z angularfire2, firebase z firebase a Observable. Vstříkněte AngularFireAuth a přihlaste se k odběru aktuálního uživatele do konstruktéra služby.

importovat {AngularFireAuth} z 'angularfire2 / auth';
importovat * jako firebase z 'firebase / app';
importovat {Observable} z 'rxjs / Observable';
exportovat třídu AuthService {
  soukromý authState: Pozorovatelný 
  private currentUser: firebase.User = null;
konstruktor (public afAuth: AngularFireAuth) {
    this.authState = this.afAuth.authState;
    this.authState.subscribe (user => {
      if (user) {
        this.currentUser = user;
      } jinde {
        this.currentUser = null;
      }
    });
  }
  getAuthState () {
    vrátit this.authState;
  }
}

Implementujte ověřování

Vložte komponentu Firebase Auth do komponenty aplikace.

importovat {AuthService} z './shared/auth.service';
exportovat třídu AppComponent implementuje OnInit {
  user = null;
konstruktor (
    soukromý autor: AuthService) {}
ngOnInit () {
    this.auth.getAuthState ().
      (user) => this.user = user);
  }
}

Přidejte přihlašovací údaje pomocí funkce Google

V src / app / shared / auth.service.ts přidejte tuto funkci a aktivujte poskytovatele přihlášení do konzoly Firebase> Ověřování> karta Metoda přihlášení.

loginWithGoogle () {
  vrátit this.afAuth.auth.signInWithPopup (
    new firebase.auth.GoogleAuthProvider ());
}

Ve vašem src / app / app.component.ts

exportovat třídu AppComponent implementuje OnInit {
konstruktor (
    soukromý autor: AuthService) {}
loginWithGoogle () {
    this.auth.loginWithGoogle ();
  }
}

Přidejte AngularFireDatabase

Vložte do své komponenty AngularFireDatabase.

Otevřete src / app / app.component.ts

Importujte AngularFireDatabase z angularfire2. Pokud potřebujete navázat seznam nebo objekt, importujte také FirebaseListObservable a / nebo FirebaseObjectObservable.

importovat {Component, OnInit} z '@ úhlové / jádro';
importovat {AuthService} z './shared/auth.service';
importovat {AngularFireDatabase, FirebaseListObservable} z 'angularfire2 / database';
importovat * jako firebase z 'firebase / app';

Vložte injektor AngularFireDatabase do konstruktoru komponenty.

konstruktor (
  soukromý autor: AuthService,
  public db: AngularFireDatabase) {}

Poté nastavte proměnnou témat jako FirebaseListObservable a nastavte seznam témat uvnitř funkce ngOnInit.

exportovat třídu AppComponent implementuje OnInit {
  témata: FirebaseListObservable ;
  ngOnInit () {
    this.auth.getAuthState ().
      (user) => this.user = user);
    this.topics = this.db.list ('/ topic');
  }
}

Při spuštění serveru se může v konzoli prohlížeče zobrazit chyba, například „Klient nemá oprávnění k přístupu k požadovaným datům“. Nemáte dobrá pravidla pro čtení a / nebo zápis dat z / do Firebase. Chcete-li to vyřešit, přejděte do konzoly Firebase> Sekce databáze> karta Pravidla a změňte pravidla!

Příklad pravidel v konzole Firebase.

Upravte šablonu

Otevřete src / app / app.component.html

Chcete-li se přihlásit pomocí Google, přidejte tlačítko a připojte se k přihlášení pomocí funkce Google.

Zobrazte seznam témat pomocí smyčky For a nezapomeňte na asynchronní trubku.

      
  •     {{topic. $ value}}   

A je to! Je to snadné? Nyní můžete vytvořit nový projekt s databází Firebase, pro autentizaci použít AngularFireAuth a pro čtení dat z databáze AngularFireDatabase. Implementujte jej do svého projektu a otestujte různé metody přihlášení!

Nyní pojďme kód!

Až příště uděláme více s Firebase, Angular4 a daty. Následujte mě na webu Media.com nebo Twitter a získejte další články!