[Angular] AuthService and AngularFire integration
Angular and Integration
2023-09-14 08:59:18 时间
Config AngularFire, we need database and auth module from firebase.
import {NgModule} from '@angular/core'; import {CommonModule} from '@angular/common'; import {RouterModule, Routes} from '@angular/router'; import {AngularFireModule, FirebaseAppConfig} from 'angularfire2'; import {AngularFireAuthModule} from 'angularfire2/auth'; import {AngularFireDatabaseModule} from 'angularfire2/database'; import {SharedModule} from './shared/shared.module'; export const ROUTES: Routes = [ { path: 'auth', children: [ {path: '', pathMatch: 'full', redirectTo: 'login'}, {path: 'login', loadChildren: './login/login.module#LoginModule'}, {path: 'register', loadChildren: './register/register.module#RegisterModule'} ] } ]; export const forebaseConfig: FirebaseAppConfig = { apiKey: "xxxxxxxx", authDomain: "fitness-app-a26ed.firebaseapp.com", databaseURL: "https://fitness-app-a26ed.firebaseio.com", projectId: "fitness-app-a26ed", storageBucket: "fitness-app-a26ed.appspot.com", messagingSenderId: "781493219422" }; @NgModule({ imports: [ CommonModule, AngularFireModule.initializeApp(forebaseConfig), AngularFireAuthModule, AngularFireDatabaseModule, SharedModule, RouterModule.forChild(ROUTES) ] }) export class AuthModule {}
For the SharedModule:
import {ModuleWithProviders, NgModule} from '@angular/core'; import {CommonModule} from '@angular/common'; import {ReactiveFormsModule} from '@angular/forms'; import { AuthFormComponent } from './components/auth-form/auth-form.component'; import {AuthService} from './services/auth/auth.service'; @NgModule({ imports: [ CommonModule, ReactiveFormsModule ], declarations: [ AuthFormComponent ], exports: [ AuthFormComponent ] }) export class SharedModule { // We don't want multi instance for AuthService, so we need forRoot method static forRoot(): ModuleWithProviders { return { ngModule: SharedModule, providers: [ AuthService ] } } }
We use forRoot method to register our AuthSerivce, so there won't be multi instances for it.
But in the AuthModule, we need to change a little bit:
import {NgModule} from '@angular/core'; import {CommonModule} from '@angular/common'; import {RouterModule, Routes} from '@angular/router'; import {AngularFireModule, FirebaseAppConfig} from 'angularfire2'; import {AngularFireAuthModule} from 'angularfire2/auth'; import {AngularFireDatabaseModule} from 'angularfire2/database'; import {SharedModule} from './shared/shared.module'; export const ROUTES: Routes = [ { path: 'auth', children: [ {path: '', pathMatch: 'full', redirectTo: 'login'}, {path: 'login', loadChildren: './login/login.module#LoginModule'}, {path: 'register', loadChildren: './register/register.module#RegisterModule'} ] } ]; export const forebaseConfig: FirebaseAppConfig = { apiKey: "xxxxxxxx", authDomain: "fitness-app-a26ed.firebaseapp.com", databaseURL: "https://fitness-app-a26ed.firebaseio.com", projectId: "fitness-app-a26ed", storageBucket: "fitness-app-a26ed.appspot.com", messagingSenderId: "781493219422" }; @NgModule({ imports: [ CommonModule, AngularFireModule.initializeApp(forebaseConfig), AngularFireAuthModule, AngularFireDatabaseModule, SharedModule.forRoot(), RouterModule.forChild(ROUTES) ] }) export class AuthModule {}
AuthService is the serivce which talk to Firebase Auth Module:
import {Injectable} from '@angular/core'; import {AngularFireAuth} from 'angularfire2/auth'; @Injectable() export class AuthService { constructor( private af: AngularFireAuth ) { } createUser(email: string, password: string) { return this.af.auth.createUserWithEmailAndPassword(email, password); } loginUser(email: string, password: string) { return this.af.auth.signInWithEmailAndPassword(email, password) } }
Register user:
import {Component} from '@angular/core'; import {FormGroup} from '@angular/forms'; import {AuthService} from '../../../shared/services/auth/auth.service'; @Component({ selector: 'register', template: ` <div> <auth-form (submitted)="registerUser($event)"> <h1>Register</h1> <a routerLink="/auth/login">Already have an account?</a> <button type="submit">Create account</button> <div class="error" *ngIf="error"> {{error}} </div> </auth-form> </div> ` }) export class RegisterComponent { error: string; constructor( private authService: AuthService ) { } async registerUser(event: FormGroup) { const {email, password} = event.value; try { await this.authService.createUser(email, password); } catch(err) { this.error = err.message; } } }
login user:
import {Component} from '@angular/core'; import {FormGroup} from '@angular/forms'; import {AuthService} from '../../../shared/services/auth/auth.service'; @Component({ selector: 'login', template: ` <div> <auth-form (submitted)="loginUser($event)"> <h1>Login</h1> <a routerLink="/auth/register">Not registered?</a> <button type="submit">Login</button> <div class="error" *ngIf="error"> {{error}} </div> </auth-form> </div> ` }) export class LoginComponent { error: string; constructor( private authService: AuthService ) { } async loginUser(event: FormGroup) { const {email, password} = event.value; try { await this.authService.loginUser(email, password); } catch(err) { this.error = err.message; } } }
相关文章
- [Angular] Preserve the current route’s query parameters when navigating with the Angular Router
- [Angular] *ngIf syntx
- [Angular] Create custom validators for formControl and formGroup
- [Angular] @ContentChild and ngAfterContentInit
- [Angular] Content Projection with ng-content
- [Angular2 Form] Create and Submit an Angular 2 Form using ngForm
- [Angular 2] ROUTING IN ANGULAR 2 REVISITED
- [Angular 2] Use Service use Typescript
- [Angular 14] Inject() function
- [Angular] Component architecture and Reactive Forms
- [Angular] AuthService and AngularFire integration
- [Angular] Setup automated deployment with Angular, Travis and Firebase
- [Angular] FadeIn and FadeOut animation in Angular
- [Angular] Zones and NgZone
- [Angular2 Form] Display Validation and Error Messaging in Angular 2
- [Angular 2] Move and Delete Angular 2 Components After Creation
- [AngularJS] angular-md-table for Angular material design
- [RxJS + AngularJS] Sync Requests with RxJS and Angular
- [Angular 2] ng-model and ng-for with Select and Option elements
- Angular.js Services
- Angular 项目里 angular.json 文件内容的学习笔记
- 从 Angular Component 和 Directive 的实例化,谈谈 Angular forRoot 方法的命令由来
- 一个用于 Angular 开发的 Chrome 扩展 - Angular Dev Tools
- Angular 项目里的 tsconfig.json
- Angular jasmine单元测试框架spied method的调用记录数据结构
- how is my Angular custom controller code executed
- Angular 项目工程文件结构介绍
- Angular No provider for EffectsRootModule错误消息的出现原因和修复方式
- Angular CLI创建的项目文件用途一栏