S'authentifier avec Firebase de manière anonyme à l'aide de JavaScript

Vous pouvez utiliser l'authentification Firebase 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 vous inscrire à votre application, vous pouvez lier leur informations de connexion au compte anonyme afin qu'ils puissent continuer à travailler avec leurs données protégées dans les sessions futures.

Avant que tu commences

1. Ajouter Firebase à votre projet JavaScript .
2. Si vous n'êtes pas encore connecté votre application à votre projet Firebase, faites à partir de la console Firebase .
3. Activer l'authentification anonyme :
   1. Dans la console Firebase , ouvrez la section Auth.
   2. Sur la page de connexion méthodes, activez le signe dans Anonyme méthode.

S'authentifier avec Firebase de manière anonyme

Lorsqu'un utilisateur déconnecté utilise une fonctionnalité d'application qui nécessite une authentification avec Firebase, connectez-vous anonymement en procédant comme suit :

1. Appelez la signInAnonymously méthode:

   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 ont un regard sur les Auth Référence Docs .
2. Si la signInAnonymously méthode finalise sans erreur, l'observateur enregistré dans le onAuthStateChanged déclenchera et vous pouvez obtenir les données de compte de l'utilisateur anonyme de l' User objet:

   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 son travail avec son nouveau compte. panier d'achat du compte. Pour ce faire, procédez comme suit :

1. Lorsque l'utilisateur se connecte vers le haut, complètent le flux de connexion pour le fournisseur d'authentification de l'utilisateur jusqu'à, mais sans inclure, en appelant l' un des Auth.signInWith méthodes. Par exemple, obtenez le jeton d'identification Google, le jeton d'accès Facebook ou l'adresse e-mail et le mot de passe de l'utilisateur.

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 avec 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. Faire passer le AuthCredential objet à la page de connexion de l' utilisateur link méthode:

   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 à link réussit, un nouveau compte peut accéder aux données Firebase du compte anonyme de l'utilisateur.

Prochaines étapes

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