AngularJS vers Angular 7 et plus ... mon parcours personnel ❤️☕️

Bienvenue à nouveau 👋

C'est la suite de nombreuses histoires qui ont toutes commencé à partir de ce premier post Medium.

Apprendre Angular 7 et plus… mon parcours personnel ❤️☕

Aperçu

Je veux écrire sur l'authentification Firebase, mais je me suis rendu compte qu'il y avait beaucoup de parties à couvrir. Je dois donc diviser cela en histoires plus petites. Nous allons apprendre comment configurer et construire les composants du processus d'authentification. Nous utiliserons l'authentification Firebase (connexion, enregistrement, mot de passe oublié et confirmation de réinitialisation). Découvrez également comment écrire dans Firestore et verrouiller ces données à l'aide de règles de sécurité.

Pourquoi fais-tu ça?

N'y a-t-il pas des écrits partout sur Internet sur ce concept?

Oui. J'ai pu trouver de nombreux articles décrivant comment utiliser signInWithPopup. Pourtant, nous n'avons pas pu trouver de didacticiels détaillés sur l'utilisation de signInWithRedirect . C'est l'une des raisons pour lesquelles j'ai choisi d'écrire ceci. Sans oublier que c'est une partie de mon parcours que je souhaite documenter.

Nous allons faire des petits pas et commencer à configurer Firebase / AngularFire 😃

Conditions préalables

Je commence cette histoire en supposant que vous avez créé votre projet Angular. Si vous avez besoin d'un rappel, vous pouvez toujours lire mon histoire, « Premiers pas ».

Je vais construire sur le projet que j'ai couvert dans l'histoire, « Welcome Page ».

Êtes-vous tous prêts? D'accord, commençons…

Configuration de Firebase / AngularFire

La première chose que nous devons faire est d'installer nos packages. Ouvrez une console et exécutez la commande suivante:

npm install @angular/fire@^5.1.3 firebase@^5.8.6 --save

Pourquoi AngularFire … ne puis-je pas faire cela avec Firebase ? Bien sûr que vous pouvez, mais j'aime utiliser AngularFire. Il intègre les observables RxJS et d'autres modèles réactifs avec Firebase. Ces éléments ne sont pas disponibles par défaut dans vanilla Firebase.

Configurer le projet Firebase

Accédez à votre console Firebase et cliquez sur votre projet ou sur «Ajouter un projet».

Ajouter un nouveau projet

Suivez l'assistant de configuration et lorsque vous avez terminé, vous recevrez une invite pour ajouter Firebase à votre application.

Nous passerons par un processus en deux étapes:

Projet existant

Si vous avez déjà créé un projet, vous devrez vous rendre dans l'onglet «Général» sous «Paramètres du projet»… comment y arriver?

Si vous avez déjà une configuration d'application, vous verrez un écran comme celui illustré ci-dessous. Copiez les informations de firebaseConfig:

Sinon, vous verrez un écran comme celui illustré ci-dessous. Suivez les étapes décrites ci-dessus dans «Ajouter un nouveau projet»

Ajouter les informations d'identification de l'environnement Firebase à votre projet

Nous avons copié les informations de firebaseConfig dans le presse-papiers. Où mettons-nous cela dans notre projet?

Dans le dossier, src/environmentsnous avons deux fichiers:

• environment.ts
• environment.prod.ts

export const environment = {
    production: false,
    firebase: {
        apiKey: '<your-key>',
        authDomain: '<your-project-authdomain>',
        databaseURL: '<your-database-URL>',
        projectId: '<your-project-id>',
        storageBucket: '<your-storage-bucket>',
        messagingSenderId: '<your-messaging-sender-id>',
        appId: '<your-app-id>'
   }
}

Importez maintenant les modules Firebase dont nous avons besoin et la référence d'environnement dans notre app.module.ts

// Firebase
import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { AngularFireAuthModule } from '@angular/fire/auth';
// Environments
import { environment } from '../environments/environment';

imports: [
  BrowserModule,
  BrowserAnimationsModule,
  AngularFireModule.initializeApp(environment.firebase),
  AngularFirestoreModule,
  AngularFireAuthModule,
  SharedModule,
  AppRoutingModule
]

Branche du référentiel

Conclusion

Merci d'avoir pris le temps de lire mes histoires et si vous êtes un adepte, je vous en suis reconnaissant ❤️.

Si vous avez apprécié cet article, pensez à applaudir 👏!

La prochaine histoire couvrira comment générer le HTML / CSS pour nos différentes pages d'authentification. Gardez un œil sur le lien.