Premiers pas avec l'authentification Firebase sur les sites Web

Vous pouvez utiliser Firebase Authentication pour permettre aux utilisateurs de se connecter à votre application à l'aide d'une ou plusieurs méthodes de connexion, y compris la connexion par adresse e-mail et mot de passe, et les fournisseurs d'identité fédérés tels que Google Sign-in et Facebook Login. Ce didacticiel vous permet de démarrer avec Firebase Authentication en vous montrant comment ajouter une adresse e-mail et un mot de passe de connexion à votre application.

Ajouter et initialiser le SDK d'authentification

  1. Si vous ne l'avez pas déjà fait, installez le SDK Firebase JS et initialisez Firebase .

  2. Ajoutez le SDK Firebase Authentication JS et initialisez Firebase Authentication :

API Web modulaire

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);


// Initialize Firebase Authentication and get a reference to the service
const auth = getAuth(app);

API d'espace de noms Web

import firebase from "firebase/compat/app";
import "firebase/compat/auth";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);


// Initialize Firebase Authentication and get a reference to the service
const auth = firebase.auth();

(Facultatif) Prototypez et testez avec Firebase Local Emulator Suite

Avant de parler de la façon dont votre application authentifie les utilisateurs, présentons un ensemble d'outils que vous pouvez utiliser pour prototyper et tester la fonctionnalité d'authentification : Firebase Local Emulator Suite. Si vous décidez parmi les techniques et les fournisseurs d'authentification, essayez différents modèles de données avec des données publiques et privées à l'aide des règles de sécurité d'authentification et de Firebase, ou prototypez des conceptions d'interface utilisateur de connexion, pouvoir travailler localement sans déployer de services en direct peut être une excellente idée. .

Un émulateur d'authentification fait partie de la suite d'émulateurs locaux, qui permet à votre application d'interagir avec le contenu et la configuration de la base de données émulée, ainsi qu'éventuellement avec les ressources de votre projet émulé (fonctions, autres bases de données et règles de sécurité).

L'utilisation de l'émulateur d'authentification ne comporte que quelques étapes :

  1. Ajout d'une ligne de code à la configuration de test de votre application pour se connecter à l'émulateur.
  2. À partir de la racine de votre répertoire de projet local, exécutez firebase emulators:start .
  3. Utilisation de l'interface utilisateur Local Emulator Suite pour le prototypage interactif ou de l'API REST de l'émulateur d'authentification pour les tests non interactifs.

Un guide détaillé est disponible sur Connectez votre application à l'émulateur d'authentification . Pour plus d'informations, consultez l' introduction de Local Emulator Suite .

Continuons maintenant avec la façon d'authentifier les utilisateurs.

Inscrire de nouveaux utilisateurs

Créez un formulaire qui permet aux nouveaux utilisateurs de s'inscrire à votre application en utilisant leur adresse e-mail et un mot de passe. Lorsqu'un utilisateur remplit le formulaire, validez l'adresse e-mail et le mot de passe fournis par l'utilisateur, puis transmettez-les à la méthode createUserWithEmailAndPassword :

Web modular API

import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";

const auth = getAuth();
createUserWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    // Signed up 
    const user = userCredential.user;
    // ...
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
    // ..
  });
auth_signup_password.js

Web namespaced API

firebase.auth().createUserWithEmailAndPassword(email, password)
  .then((userCredential) => {
    // Signed in 
    var user = userCredential.user;
    // ...
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
    // ..
  });
email.js

Connectez-vous aux utilisateurs existants

Créez un formulaire permettant aux utilisateurs existants de se connecter à l'aide de leur adresse e-mail et de leur mot de passe. Lorsqu'un utilisateur remplit le formulaire, appelez la méthode signInWithEmailAndPassword :

Web modular API

import { getAuth, signInWithEmailAndPassword } from "firebase/auth";

const auth = getAuth();
signInWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    // Signed in 
    const user = userCredential.user;
    // ...
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
  });
auth_signin_password.js

Web namespaced API

firebase.auth().signInWithEmailAndPassword(email, password)
  .then((userCredential) => {
    // Signed in
    var user = userCredential.user;
    // ...
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
  });
email.js

Définir un observateur d'état d'authentification et obtenir des données utilisateur

Pour chacune des pages de votre application nécessitant des informations sur l'utilisateur connecté, attachez un observateur à l'objet d'authentification global. Cet observateur est appelé chaque fois que l'état de connexion de l'utilisateur change.

Attachez l'observateur à l'aide de la méthode onAuthStateChanged . Lorsqu'un utilisateur se connecte avec succès, vous pouvez obtenir des informations sur l'utilisateur dans l'observateur.

Web modular API

import { getAuth, onAuthStateChanged } from "firebase/auth";

const auth = getAuth();
onAuthStateChanged(auth, (user) => {
  if (user) {
    // User is signed in, see docs for a list of available properties
    // https://firebase.google.com/docs/reference/js/auth.user
    const uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});
auth_state_listener.js

Web namespaced API

firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    // User is signed in, see docs for a list of available properties
    // https://firebase.google.com/docs/reference/js/v8/firebase.User
    var uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});
index.js

Prochaines étapes

Découvrez comment ajouter la prise en charge d'autres fournisseurs d'identité et comptes invités anonymes :