Firebase-E-Mail- und Passwort-Authentifizierung in der Angular 8-Anwendung

Blog

Firebase-E-Mail- und Passwort-Authentifizierung in der Angular 8-Anwendung

Für alle Entwickler, die nach einer robusten Plattform zum schnelleren Erstellen von Mobil- und Webanwendungen gesucht haben, können Sie an Firebase denken. Firebase ist ein Backend-as-a-Service – BaaS –, das auf der Google Cloud Platform zu einer App-Entwicklungsplattform der nächsten Generation begann und zu dieser heranwuchs. Die Implementierung des Authentifizierungssystems mit Firebase in Web- und Mobile-Apps ist sehr einfach.



Karussell mehrere Elemente reagieren

Heute werde ich eine Beispielanwendung erstellen, um die Firebase-E-Mail- und Kennwortauthentifizierung mit der Angular 8-Anwendung anzuzeigen, in der sich der Benutzer mit E-Mail und Kennwort anmelden und mit E-Mail und Kennwort registrieren kann.

Wenn Sie kein Verständnis für die Verbindung von Angular-Anwendungen haben, lesen Sie den Artikel So verbinden Sie Firebase mit der Angular 8-Anwendung von Grund auf



Lasst uns anfangen

Schritt 1: Erstellen Sie eine Angular-Anwendung mit Angular CLI

Führen Sie den folgenden Befehl aus, um die Angular 8-Anwendung zu erstellen

ng new firebase-auth-angular-app

Geben Sie jetzt ein cd firebase-auth-angular-app auf dem Terminal, um in den Projektordner zu verschieben.



Schritt 1: Erstellen Sie eine Dienstdatei zum Konfigurieren der Firebase-Authentifizierung

Jetzt werde ich eine Dienstdatei erstellen, die eine Logik zum Aktivieren der Anmeldung, Anmeldung oder Abmeldung eines Benutzers von der Angular 8 Firebase-Authentifizierungs-App enthält.

Führen Sie den folgenden Befehl in der Angular-CLI aus, um eine Authentifizierungsdienstdatei ohne |_+_| . zu generieren Datei:

spec.ts

von g s-Diensten/Authentifizierung --spec = false

In dieser Datei haben wir eine vollständige Firebase-Authentifizierungsaufgabe mit AngularFireAuth, die für unsere Anwendung benötigt wird.

ng g s services/Authentication --spec=false

Schritt 3: Implementieren Sie Firebase Authentication Login, Anmelden und Abmelden in der Komponente

Nach dem Erstellen des Dienstes verwenden wir diesen in der Komponente. Wir importieren den Authentifizierungsdienst in die Komponente und erstellen die Anmelde-, Anmelde- und Abmeldefunktion. Fügen Sie nun den folgenden Code in app.komponente.ts Datei im App-Ordner.

import { Injectable } from '@angular/core'; import { AngularFireAuth } from '@angular/fire/auth'; import { Observable } from 'rxjs'; @Injectable({ providedIn: 'root' }) export class AuthenticationService { userData: Observable; constructor(private angularFireAuth: AngularFireAuth) { this.userData = angularFireAuth.authState; } /* Sign up */ SignUp(email: string, password: string) { this.angularFireAuth .auth .createUserWithEmailAndPassword(email, password) .then(res => { console.log('You are Successfully signed up!', res); }) .catch(error => { console.log('Something is wrong:', error.message); }); } /* Sign in */ SignIn(email: string, password: string) { this.angularFireAuth .auth .signInWithEmailAndPassword(email, password) .then(res => { console.log('You are Successfully logged in!'); }) .catch(err => { console.log('Something is wrong:',err.message); }); } /* Sign out */ SignOut() { this.angularFireAuth .auth .signOut(); } }

In der obigen Datei habe ich oben den Angular Firebase-Authentifizierungsdienst eingefügt. Dann deklariere ich die Authentifizierungsmethoden, um die Firebase-Authentifizierungsmethoden zu verwenden.

Jetzt am Ende müssen Sie die Komponentenvorlage aktualisieren. Geben Sie den folgenden Code ein app.komponente.html Datei

import { Component } from '@angular/core'; import { AuthenticationService } from './services/authentication.service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { constructor( private authenticationService:AuthenticationService ){ } email: string; password: string; signUp() { this.authenticationService.SignUp(this.email, this.password); this.email = ''; this.password = ''; } signIn() { this.authenticationService.SignIn(this.email, this.password); this.email = ''; this.password = ''; } signOut() { this.authenticationService.SignOut(); } }

In der obigen Datei dient die Schnittstelle zum Einloggen und Registrieren des Benutzers. async pipe wurde oben verwendet, um den eingeloggten Status des Benutzers zu bestimmen.

Schritt 4: Führen Sie die App aus

Schließlich sind alle erforderlichen Schritte erledigt. Führen Sie nun die eckige App mit **npm start ** aus und die App sieht im Browser wie unten aus.

Abschluss

Wir haben die Firebase-E-Mail- und Passwort-Authentifizierung sehr einfach in nur wenigen Minuten erfolgreich implementiert.

wie man eine Kryptowährung kauft

Danke schön!

Den vollständigen Code können Sie hier herunterladen. Code herunterladen

#Angular #Firebase #Authentifizierung #Sicherheit