Authentification Firebase en angulaire

Firebase offre un moyen simple de configurer l'authentification dans votre application. Ici, nous allons explorer comment configurer un flux de travail simple d'enregistrement et d'authentification par e-mail/mot de passe pour les applications Angular 2+ à l'aide de la bibliothèque AngularFire2.

La première étape consiste à créer un nouveau projet Firebase et à activer la méthode de connexion par e-mail/mot de passe dans la section Authentification de la console Firebase.

Commençons à installer les packages nécessaires à l'aide de npm. Cela ajoutera les dépendances Firebase SDK, AngularFire2 et promise-polyfill à votre projet :

$ npm install firebase angularfire2 --save

$ npm install promise-polyfill --save-exact

Ajoutons maintenant l'API Firebase et les informations d'identification du projet aux variables d'environnement du projet. Si vous cliquez sur Ajouter Firebase à votre application Web, vous pouvez trouver ces valeurs dans la console Firebase :

src/environments/environment.ts

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

Ensuite, nous configurerons notre module d'application en utilisant AngularFireModule et AngularFireAuthModule. Notez également que nous importons et fournissons AuthService. Nous allons ensuite créer le service :

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

Créer un service d'authentification

Nous Le Le service sera un emplacement central qui nous permettra de connecter, d'enregistrer ou de déconnecter les utilisateurs, nous définirons donc les méthodes pour ces 3 opérations. Toute la logique d'authentification sera dans le service, ce qui nous permettra de créer des composants qui n'auront pas besoin d'implémenter de logique d'authentification et contribueront à garder nos composants simples.

Vous pouvez utiliser cette commande pour créer un framework pour un service à l'aide de la CLI Angular :

$ ng g s auth

Il s'agit de l'implémentation du service, tirant parti d'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();
  }

}

Vous remarquerez que les méthodes disponibles sur AngularFireAuth.auth renvoient toutes des promesses, nous pouvons donc utiliser then et catch pour gérer respectivement le succès et l'état d'erreur.

Nous utilisons ici createUserWithEmailAndPassword et signInWithEmailAndPassword car nous configurons l'authentification par e-mail/mot de passe, mais la même méthode peut être utilisée pour s'authentifier via Twitter, Facebook ou Google.

Classes et modèles de composants

Maintenant que notre service d'authentification est en place, il est très simple de créer un composant qui permet la connexion, l'enregistrement ou la déconnexion :

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

On injecte le service dans le constructeur du composant puis on définit une méthode native qui appelle la méthode équivalente sur le service auth. Nous nous concentrons sur le service en utilisant le mot-clé public au lieu de private afin de pouvoir également accéder aux propriétés du service directement à partir du modèle.

Le modèle est très simple et utilise un canal asynchrone sur l'objet utilisateur de authService pour déterminer s'il y a un utilisateur connecté :

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>

Nos champs de saisie sont liés de manière bidirectionnelle aux valeurs d'e-mail et de mot de passe dans la classe de composant en utilisant ngModel et banane de la syntaxe du framework.

Fait ! Ajouter une authentification à votre application à l'aide de Firebase Authentication est aussi simple que cela !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!