Firebase-Authentifizierung in Angular

Firebase bietet eine einfache Möglichkeit, die Authentifizierung in Ihrer App einzurichten. Hier erfahren Sie, wie Sie mithilfe der AngularFire2-Bibliothek einen einfachen E-Mail-/Passwort-Registrierungs- und Authentifizierungsworkflow für Angular 2+-Anwendungen einrichten.

Der erste Schritt besteht darin, ein neues Firebase-Projekt zu erstellen und die E-Mail-/Passwort-Anmeldemethode im Abschnitt „Authentifizierung“ der Firebase-Konsole zu aktivieren.

Beginnen wir mit der Installation der erforderlichen Pakete mit npm. Dadurch werden die Firebase SDK-, AngularFire2- und Promise-Polyfill-Abhängigkeiten zu Ihrem Projekt hinzugefügt:

$ npm install firebase angularfire2 --save

$ npm install promise-polyfill --save-exact

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

src/environments/environment.ts

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

Then we wird unser App-Modul mit AngularFireModule und AngularFireAuthModule konfigurieren. Beachten Sie außerdem, dass wir den AuthService importieren und bereitstellen. Als nächstes werden wir den Dienst erstellen:

app.module.ts

// ...

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

Authentifizierungsdienst erstellen

Unser Dienst Da wird ein zentraler Ort sein, der es uns ermöglicht, einen Benutzer anzumelden, zu registrieren oder abzumelden, daher werden wir Methoden für diese drei Aktionen definieren. Die gesamte Authentifizierungslogik wird im Dienst enthalten sein, wodurch wir Komponenten erstellen können, die keine Authentifizierungslogik implementieren müssen, und unsere Komponenten einfach halten.

Mit diesem Befehl können Sie ein Framework für einen Dienst mithilfe der Angular-CLI erstellen:

$ ng g s auth

Dies ist die Implementierung des Dienstes unter Nutzung von AngularFireAuth:

auth.service.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();
  }

}

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.

Wir verwenden hier createUserWithEmailAndPassword und signInWithEmailAndPassword, weil wir die E-Mail-/Passwort-Authentifizierung einrichten, aber die gleiche Methode kann zur Authentifizierung über Twitter, Facebook oder Google verwendet werden.

Komponentenklassen und Vorlagen

Nachdem unser Authentifizierungsdienst eingerichtet ist, ist es sehr einfach, eine Komponente zu erstellen, die die Anmeldung, Registrierung oder Abmeldung ermöglicht:

app.component.ts

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

Wir injizieren den Dienst in den Konstruktor der Komponente und definieren dann eine native Methode, die die entsprechende Methode im Authentifizierungsdienst aufruft. Wir konzentrieren uns auf den Dienst, indem wir das Schlüsselwort public anstelle von private verwenden, damit wir auch direkt über die Vorlage auf die Diensteigenschaften zugreifen können.

Die Vorlage ist sehr einfach und verwendet eine asynchrone Pipe auf dem Benutzerobjekt des authService, um festzustellen, ob ein angemeldeter Benutzer vorhanden ist:

app.component.html

<h1 *ngIf="authService.user | async">Welcome {{ (authService.user | async)?.email }}!</h1>

<div *ngIf="!(authService.user | async)">
  <input type="text" [(ngModel)]="email" placeholder="email">
  <input type="password" [(ngModel)]="password" placeholder="email">

  <button (click)="signup()" [disabled]="!email || !password">
    Signup
  </button>

  <button (click)="login()" [disabled]="!email || !password">
    Login
  </button>
</div>

<button (click)="logout()" *ngIf="authService.user | async">
  Logout
</button>

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

Fertig! So einfach ist das Hinzufügen einer Authentifizierung zu Ihrer App mithilfe der Firebase-Authentifizierung!

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