Join us in person and online for Firebase Summit on October 18, 2022. Learn how Firebase can help you accelerate app development, release your app with confidence, and scale with ease. Register now

Authentification avec Firebase en JavaScript à l'aide d'un système d'authentification personnalisé

Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.
Vous pouvez intégrer Firebase Authentication à un système d'authentification personnalisé en modifiant votre serveur d'authentification pour produire des jetons signés personnalisés lorsqu'un utilisateur se connecte avec succès. Votre application reçoit ce jeton et l'utilise pour s'authentifier auprès de Firebase.

Avant que tu commences

  1. Ajoutez Firebase à votre projet JavaScript .
  2. Obtenez les clés de serveur de votre projet :
    1. Accédez à la page Comptes de service dans les paramètres de votre projet.
    2. Cliquez sur Générer une nouvelle clé privée en bas de la section Firebase Admin SDK de la page Comptes de service .
    3. La paire de clés publique/privée du nouveau compte de service est automatiquement enregistrée sur votre ordinateur. Copiez ce fichier sur votre serveur d'authentification.

S'authentifier avec Firebase

  1. Lorsque les utilisateurs se connectent à votre application, envoyez leurs identifiants de connexion (par exemple, leur nom d'utilisateur et leur mot de passe) à votre serveur d'authentification. Votre serveur vérifie les informations d'identification et renvoie un jeton personnalisé si elles sont valides.
  2. Après avoir reçu le jeton personnalisé de votre serveur d'authentification, transmettez-le à signInWithCustomToken pour connecter l'utilisateur :

    Web version 9

    import { getAuth, signInWithCustomToken } from "firebase/auth";
    
    const auth = getAuth();
    signInWithCustomToken(auth, token)
      .then((userCredential) => {
        // Signed in
        const user = userCredential.user;
        // ...
      })
      .catch((error) => {
        const errorCode = error.code;
        const errorMessage = error.message;
        // ...
      });

    Web version 8

    firebase.auth().signInWithCustomToken(token)
      .then((userCredential) => {
        // Signed in
        var user = userCredential.user;
        // ...
      })
      .catch((error) => {
        var errorCode = error.code;
        var errorMessage = error.message;
        // ...
      });

Prochaines étapes

Lorsqu'un utilisateur se connecte pour la première fois, un nouveau compte d'utilisateur est créé et lié aux informations d'identification (c'est-à-dire le nom d'utilisateur et le mot de passe, le numéro de téléphone ou les informations du fournisseur d'authentification) avec lesquelles l'utilisateur s'est connecté. Ce nouveau compte est stocké dans le cadre de votre projet Firebase et peut être utilisé pour identifier un utilisateur dans chaque application de votre projet, quelle que soit la manière dont l'utilisateur se connecte.

  • Dans vos applications, la méthode recommandée pour connaître le statut d'authentification de votre utilisateur consiste à définir un observateur sur l'objet Auth . Vous pouvez ensuite obtenir les informations de base du profil de l' User à partir de l'objet Utilisateur. Voir Gérer les utilisateurs .

  • Dans vos règles de sécurité Firebase Realtime Database et Cloud Storage, vous pouvez obtenir l'ID utilisateur unique de l'utilisateur connecté à partir de la variable auth et l'utiliser pour contrôler les données auxquelles un utilisateur peut accéder.

Vous pouvez autoriser les utilisateurs à se connecter à votre application à l'aide de plusieurs fournisseurs d'authentification en liant les informations d'identification du fournisseur d'authentification à un compte d'utilisateur existant.

Pour déconnecter un utilisateur, appelez signOut :

Web version 9

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

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});

Web version 8

firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});