Authentification Firebase dans Angular (exemple de code)

Firebase fournit un moyen très simple de configurer l'authentification. Cet article vous expliquera comment utiliser AngularFire2 pour configurer un flux de travail simple d'enregistrement et d'authentification par e-mail/mot de passe pour les applications Angular 2+.

Commencez par créer un nouveau projet Firebase et activez la méthode de connexion par e-mail/mot de passe dans la section Authentification de la console Firebase.

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

$ npm install firebase angularfire2 --save

$ npm install promise-polyfill --save-exact

Maintenant, ajoutons l'API et le projet Firebase les informations d'identification sont ajoutées 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 l'AuthService, que nous créerons ensuite :

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 Service d'authentification

Notre service sera un emplacement central qui nous permettra de connecter, enregistrer ou déconnecter nos utilisateurs, donc Des méthodes seront définies pour ces trois 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 les composants simples.

Utilisez Angular CLI pour créer un squelette pour le service, comme suit :

$ ng g s auth

Ce qui suit est l'implémentation du service, en utilisant 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.

Ici, nous utilisons createUserWithEmailAndPassword et signInWithEmailAndPassword.

Classes et modèles de composants

Maintenant que notre service d'authentification est prêt, il est 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();
  }
}

Nous injectons le service dans le constructeur du composant puis définissons des méthodes locales qui appellent des méthodes équivalentes sur le service d'authentification. Nous injectons 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, utilisant des canaux asynchrones 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">
    注册
  </button>

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

<button (click)="logout()" *ngIf="authService.user | async">
  注销
</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.

Recommandations associées : "Tutoriel AngularJs"

Cet article est une introduction pertinente à l'authentification Firebase. J'espère qu'il sera utile aux amis dans le besoin !

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!