Удостоверяване на имейл и парола на Firebase в приложението Angular 8

Блог

Удостоверяване на имейл и парола на Firebase в приложението Angular 8

За всички разработчици, които търсят стабилна платформа за по -бързо изграждане на мобилни и уеб приложения, можете да помислите за Firebase. Firebase е Backend-as-a-a-Service-BaaS-който стартира и прерасна в платформа за разработка на приложения от следващо поколение в Google Cloud Platform. Внедряването на системата за удостоверяване с Firebase в уеб и мобилни приложения е много лесно.

въпроси за интервю за ъглово маршрутизиране

Днес ще създам примерно приложение, което да показва удостоверяването на имейл и парола на Firebase с приложението Angular 8, в което потребителят ще може да влезе с имейл и парола и да се регистрира с имейл и парола.

Ако нямате разбиране за връзката на приложението Angular, прочетете статията Как да свържете Firebase с приложението Angular 8 от нулата

Нека започнем

Стъпка 1: Създайте Angular приложение, използвайки ъглов CLI

Изпълнете командата по -долу, за да създадете приложение Angular 8

ng new firebase-auth-angular-app

Сега въведете cd firebase-auth-angular-app на терминала, за да се преместите в папката на проекта.

Стъпка 1: Създайте служебен файл за конфигуриране на удостоверяване на Firebase

Сега ще създам служебен файл, който ще има логика за разрешаване на влизане, регистрация или излизане от потребител от приложението за удостоверяване на Angular 8 Firebase.

Изпълнете командата по -долу в Angular CLI, за да генерирате служебен файл за удостоверяване без | _+_ | файл:

spec.ts

на g s услуги/Удостоверяване --spec = false

В този файл ще имаме пълна задача за удостоверяване на firebase, използваща AngularFireAuth, необходима за нашето приложение.

ng g s services/Authentication --spec=false

Стъпка 3: Внедрете влизане, регистрация и изход в компонент на Firebase Authentication

След като създадем услуга, ще я използваме в компонента. Ще импортираме услугата за удостоверяване в компонент и ще създадем функционалност за регистрация, влизане и излизане. Сега добавете кода по -долу app.component.ts файл в папката на приложението.

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

В горния файл в горната част инжектирах услугата за удостоверяване на Angular Firebase. След това декларирам методите за удостоверяване, за да използвам методите за удостоверяване на firebase.

Сега в края трябва да актуализирате шаблона на компонента. Въведете кода по -долу app.component.html файл

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

В горния файл интерфейсът е там за влизане и регистрация на потребителя. async pipe е бил използван по-горе за определяне на състоянието на влизане на потребителя.

Стъпка 4: Стартирайте приложението

И накрая, всички необходими стъпки са направени. Сега стартирайте ъгловото приложение с ** npm start ** и приложението ще изглежда както по -долу в браузъра.

Заключение

Успешно въведохме удостоверяване на имейл и парола на firebase много лесно само за няколко минути.

трябваше да купуват вар

Благодаря ти!

Можете да изтеглите пълния код от тук. Изтеглете код

#Angular #Firebase #Authentication #security