Maison > interface Web > js tutoriel > le corps du texte

Authentification Firebase dans Angular (exemple de code)

藏色散人
Libérer: 2020-08-21 10:41:16
original
2764 Les gens l'ont consulté

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+.

Authentification Firebase dans Angular (exemple de code)

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
Copier après la connexion
$ npm install promise-polyfill --save-exact
Copier après la connexion

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'
  }
};
Copier après la connexion

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 { }
Copier après la connexion

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
Copier après la connexion

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

}
Copier après la connexion

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 &#39;@angular/core&#39;;
import { AuthService } from &#39;./auth.service&#39;;

@Component({ ... })
export class AppComponent {
  email: string;
  password: string;

  constructor(public authService: AuthService) {}

  signup() {
    this.authService.signup(this.email, this.password);
    this.email = this.password = &#39;&#39;;
  }

  login() {
    this.authService.login(this.email, this.password);
    this.email = this.password = &#39;&#39;;    
  }

  logout() {
    this.authService.logout();
  }
}
Copier après la connexion

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>
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal