Firebase-Authentifizierung in Angular (Codebeispiel)

Firebase bietet eine sehr einfache Möglichkeit, die Authentifizierung einzurichten. In diesem Artikel erfahren Sie, wie Sie mit AngularFire2 einen einfachen E-Mail-/Passwort-Registrierungs- und Authentifizierungs-Workflow für Angular 2+-Anwendungen einrichten.

Erstellen Sie zunächst ein neues Firebase-Projekt und aktivieren Sie die E-Mail-/Passwort-Anmeldemethode im Abschnitt „Authentifizierung“ der Firebase-Konsole.

Beginnen wir mit der Installation der erforderlichen Pakete mit npm und fügen Firebase SDK, AngularFire2 und Promise-Polyfill-Abhängigkeiten zu Ihrem Projekt hinzu:

$ npm install firebase angularfire2 --save

rrree

Jetzt fügen wir die Firebase-API und die Projektanmeldeinformationen hinzu. Fügen Sie es dem hinzu Umgebungsvariablen des Projekts. Wenn Sie auf „Firebase zu Ihrer Web-App hinzufügen“ klicken, finden Sie diese Werte in der Firebase-Konsole:

src/environments/environment.ts

$ npm install promise-polyfill --save-exact

Then we Unser App-Modul wird mit AngularFireModule und AngularFireAuthModule konfiguriert. Beachten Sie außerdem, dass wir einen AuthService importieren und bereitstellen, den wir als Nächstes erstellen werden:

app.module.ts

export const environment = {
  production: false,
  firebase: {
    apiKey: 'XXXXXXXXXXX',
    authDomain: 'XXXXXXXXXXX',
    databaseURL: 'XXXXXXXXXXX',
    projectId: 'XXXXXXXXXXX',
    storageBucket: 'XXXXXXXXXXX',
    messagingSenderId: 'XXXXXXXXXXX'
  }
};

Authentifizierungsdienst erstellen

Unser Dienst wird ein zentraler Ort sein, an dem sich unsere Benutzer anmelden, registrieren oder abmelden können, damit wir diese drei Operationen definieren Methoden. Die gesamte Authentifizierungslogik wird im Dienst enthalten sein, wodurch wir Komponenten erstellen können, die keine Authentifizierungslogik implementieren müssen, und die Komponenten einfach halten.

Verwenden Sie Angular CLI, um ein Gerüst für den Dienst zu erstellen, wie folgt:

// ...

import { AngularFireModule } from 'angularfire2';
import { environment } from '../environments/environment';
import { AngularFireAuthModule } from 'angularfire2/auth';

import { AuthService } from './auth.service';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    // ...
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireAuthModule
  ],
  providers: [AuthService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Das Folgende ist die Implementierung des Dienstes mit AngularFireAuth:

auth. service.ts

$ ng g s auth

Sie werden feststellen, dass die auf AngularFireAuth.auth verfügbaren Methoden alle Versprechen zurückgeben, sodass wir then und Catch verwenden können, um den Erfolgs- bzw. Fehlerstatus zu behandeln.

Hier verwenden wir createUserWithEmailAndPassword und signInWithEmailAndPassword.

Komponentenklassen und Vorlagen

Da unser Authentifizierungsdienst nun bereit ist, ist es einfach, eine Komponente zu erstellen, die die Anmeldung, Registrierung oder Abmeldung ermöglicht:

app.component.ts

import { Injectable } from '@angular/core';

import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app';

import { Observable } from 'rxjs/Observable';

@Injectable()
export class AuthService {
  user: Observable<firebase.User>;

  constructor(private firebaseAuth: AngularFireAuth) {
    this.user = firebaseAuth.authState;
  }

  signup(email: string, password: string) {
    this.firebaseAuth
      .auth
      .createUserWithEmailAndPassword(email, password)
      .then(value => {
        console.log(&#39;Success!&#39;, value);
      })
      .catch(err => {
        console.log(&#39;Something went wrong:&#39;,err.message);
      });    
  }

  login(email: string, password: string) {
    this.firebaseAuth
      .auth
      .signInWithEmailAndPassword(email, password)
      .then(value => {
        console.log(&#39;Nice, it worked!&#39;);
      })
      .catch(err => {
        console.log(&#39;Something went wrong:&#39;,err.message);
      });
  }

  logout() {
    this.firebaseAuth
      .auth
      .signOut();
  }

}

Wir injizieren den Dienst in den Konstruktor der Komponente und definieren dann lokale Methoden, die äquivalente Methoden im Authentifizierungsdienst aufrufen. Wir injizieren den Dienst mit dem Schlüsselwort public statt mit private, sodass wir auch direkt aus der Vorlage auf die Diensteigenschaften zugreifen können.

Die Vorlage ist sehr einfach und verwendet asynchrone Pipes für das Benutzerobjekt des authService, um festzustellen, ob ein angemeldeter Benutzer vorhanden ist:

app.component.html

import { Component } from '@angular/core';
import { AuthService } from './auth.service';

@Component({ ... })
export class AppComponent {
  email: string;
  password: string;

  constructor(public authService: AuthService) {}

  signup() {
    this.authService.signup(this.email, this.password);
    this.email = this.password = '';
  }

  login() {
    this.authService.login(this.email, this.password);
    this.email = this.password = '';    
  }

  logout() {
    this.authService.logout();
  }
}

Unsere Eingabefelder sind mithilfe von ngModel und Banana aus der Framework-Syntax bidirektional an die E-Mail- und Passwortwerte in der Komponentenklasse gebunden.

Verwandte Empfehlungen: „AngularJS-Tutorial“

Dieser Artikel ist eine relevante Einführung in die Firebase-Authentifizierung. Ich hoffe, er wird Freunden in Not hilfreich sein!

Das obige ist der detaillierte Inhalt vonFirebase-Authentifizierung in Angular (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!