Authentification anonyme auprès de Firebase à l'aide de JavaScript

Vous pouvez utiliser Firebase Authentication pour créer et utiliser des comptes anonymes temporaires pour vous authentifier auprès de Firebase. Ces comptes anonymes temporaires peuvent être utilisés pour permettre aux utilisateurs qui ne se sont pas encore inscrits à votre application de travailler avec des données protégées par des règles de sécurité. Si un utilisateur anonyme décide de s'inscrire à votre application, vous pouvez lier ses identifiants de connexion au compte anonyme afin qu'il puisse continuer à utiliser ses données protégées lors de sessions futures.

Avant que tu commences

1. Ajoutez Firebase à votre projet JavaScript .
2. Si vous n'avez pas encore connecté votre application à votre projet Firebase, faites-le depuis la console Firebase .
3. Activer l'authentification anonyme :
   1. Dans la console Firebase , ouvrez la section Auth .
   2. Sur la page Méthodes de connexion, activez la méthode de connexion anonyme .

Authentifiez-vous anonymement auprès de Firebase

Lorsqu'un utilisateur déconnecté utilise une fonctionnalité d'application qui nécessite une authentification auprès de Firebase, connectez-le de manière anonyme en procédant comme suit :

1. Appelez la méthode signInAnonymously :

   Web version 9

   import { getAuth, signInAnonymously } from "firebase/auth";
   
   const auth = getAuth();
   signInAnonymously(auth)
     .then(() => {
       // Signed in..
     })
     .catch((error) => {
       const errorCode = error.code;
       const errorMessage = error.message;
       // ...
     });
   auth_anon_sign_in.js

   Web version 8

   firebase.auth().signInAnonymously()
     .then(() => {
       // Signed in..
     })
     .catch((error) => {
       var errorCode = error.code;
       var errorMessage = error.message;
       // ...
     });
   anonymous.js

   C'est également là que vous pouvez détecter et gérer les erreurs. Pour une liste des codes d'erreur, consultez la documentation de référence Auth .
2. Si la méthode signInAnonymously termine sans erreur, l'observateur enregistré dans onAuthStateChanged se déclenchera et vous pourrez obtenir les données de compte de l'utilisateur anonyme à partir de l'objet User :

   Web version 9

   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/firebase.User
       const uid = user.uid;
       // ...
     } else {
       // User is signed out
       // ...
     }
   });
   auth_state_listener.js

   Web version 8

   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/firebase.User
       var uid = user.uid;
       // ...
     } else {
       // User is signed out
       // ...
     }
   });
   index.js

Convertir un compte anonyme en compte permanent

Lorsqu'un utilisateur anonyme s'inscrit à votre application, vous souhaiterez peut-être lui permettre de continuer à travailler avec son nouveau compte. Par exemple, vous souhaiterez peut-être que les articles que l'utilisateur a ajoutés à son panier avant de s'inscrire soient disponibles dans son nouveau compte. panier d'achat du compte. Pour ce faire, procédez comme suit :

1. Lorsque l'utilisateur s'inscrit, terminez le flux de connexion pour le fournisseur d'authentification de l'utilisateur jusqu'à, mais non compris, l'appel de l'une des méthodes Auth.signInWith . Par exemple, obtenez le jeton d'identification Google de l'utilisateur, le jeton d'accès Facebook ou l'adresse e-mail et le mot de passe.

2. Obtenez un AuthCredential pour le nouveau fournisseur d'authentification :

   Connexion Google

   Web version 9

   import { GoogleAuthProvider } from "firebase/auth";
   
   const credential = GoogleAuthProvider.credential(
     googleUser.getAuthResponse().id_token);
   auth_make_google_credential.js

   Web version 8

   var credential = firebase.auth.GoogleAuthProvider.credential(
     googleUser.getAuthResponse().id_token);
   index.js

   Identifiant Facebook

   Web version 9

   import { FacebookAuthProvider } from "firebase/auth";
   
   const credential = FacebookAuthProvider.credential(
     response.authResponse.accessToken);
   auth_make_facebook_credential.js

   Web version 8

   var credential = firebase.auth.FacebookAuthProvider.credential(
     response.authResponse.accessToken);
   index.js

   Connexion par e-mail et mot de passe

   Web version 9

   import { EmailAuthProvider } from "firebase/auth";
   
   const credential = EmailAuthProvider.credential(email, password);
   auth_make_email_credential.js

   Web version 8

   var credential = firebase.auth.EmailAuthProvider.credential(email, password);
   link-multiple-accounts.js

3. Transmettez l'objet AuthCredential à la méthode de link de l'utilisateur connecté :

   Web version 9

   import { getAuth, linkWithCredential } from "firebase/auth";
   
   const auth = getAuth();
   linkWithCredential(auth.currentUser, credential)
     .then((usercred) => {
       const user = usercred.user;
       console.log("Anonymous account successfully upgraded", user);
     }).catch((error) => {
       console.log("Error upgrading anonymous account", error);
     });
   auth_anonymous_link.js

   Web version 8

   auth.currentUser.linkWithCredential(credential)
     .then((usercred) => {
       var user = usercred.user;
       console.log("Anonymous account successfully upgraded", user);
     }).catch((error) => {
       console.log("Error upgrading anonymous account", error);
     });
   link-multiple-accounts.js

Si l'appel au link réussit, le nouveau compte de l'utilisateur peut accéder aux données Firebase du compte anonyme.

Prochaines étapes

Maintenant que les utilisateurs peuvent s'authentifier auprès de Firebase, vous pouvez contrôler leur accès aux données de votre base de données Firebase à l'aide des règles Firebase .