Authentification (Firebase)

Le composant Authentification (Firebase) permet d'insérer un formulaire d'authentification, de gérer une base de données utilisateurs et d'associer des données à vos utilisateurs (score, progression, type de compte...). 

Les utilisateurs se connectent facilement à votre application à l'aide d'un formulaire. Vous pouvez gérer le parcours utilisateurs grâce à des événements définis en fonction des données de l'utilisateur.

Dans cet article

Configurer la console Firebase

Créer un compte gratuit 

Ce composant Authentification nécessite la création d'un compte Firebase pour sa configuration et son utilisation. La création de compte est gratuite.

Firebase est la plateforme mobile de Google qui permet la création d'un backend scalable et performant, dédiée principalement aux applications mobiles. Le backend représente la partie Serveur de l'application qui gère des responsabilités comme l'authentification, le stockage, les notifications, etc...

Voici le lien pour créer un compte : https://console.firebase.google.com/

Créer un nouveau projet

Pour chaque application, vous avez besoin d'un projet spécifique. 

Suivez les instructions ci-dessous pour créer un nouveau projet dans Firebase. Vous aurez besoin de certaines de ces informations dans PandaSuite Studio.

cre_er-un-projet-firebase.png

Choisissez un nom pour votre projet.

choisir-un-nom-projet-firebase.png

Suivez les étapes et validez. 

e_tape-2-projet-firebase.png

C'est bon, votre projet est désormais créé.

Activer la connexion Email / Mot de passe

Rendez-vous dans Authentication et dans l'onglet Sign-in method

Cliquez sur Activer pour l'option Adresse email/Mot de passe comme indiqué ci-dessous.

autoriser-email-mot-de-passe-firebase.png

Vous avez désormais une procédure d'authentification. 

Configurer Cloud Firestore

Si vous souhaitez collecter d'autres champs utilisateurs (Poste, Entreprise) lors de l'inscription ou associer des données à vos utilisateurs (Score, Progression), vous devez également configurer Cloud Firebase. Cloud Firestore est une base de données spécifiques à Firebase.

Rendez-vous dans l'onglet  Database. Cliquez sur Créer une base de données.

cre_er-une-base-de-donne_es-firebase.png

Choisissez le mode  Commencer en mode test.

commencer-en-mode-test.png

nouvelle-database.png

Rendez-vous dans l'onglet  Rules : il vous faut mettre à jour les règles de sécurité afin de ne pas être bloqué après 30 jours. Copiez-collez le code ci-dessous :

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /users/{userId} {
      allow read, write: if request.auth.uid == userId
    }
  }
}

mettre-a_-jour-re_gles.png

Votre configuration Cloud Firestore est prête.

Insérer un formulaire d'authentification

En parallèle, ouvrez PandaSuite Studio. Cliquez sur Composants et choisissez Authentification

Le composant Authentification vous permet d'afficher le formulaire d'authentification. Insérez le composant Authentification dans l'écran de votre choix. 

Insérer le composant Authentification

Dans la fenêtre Propriétés, copiez/collez l'ID du projet (projectID) et la Clé API Web (apiKey) depuis la console Firebase. 

Ces informations sont accessibles depuis les Paramètres du projet sur Firebase.

parame_tres-du-projet-firebase.png

identifiants-projet-firebase.png

Personnaliser l'apparence 

Vous pouvez personnaliser le style CSS du formulaire en cliquant sur le bouton Editer de la fenêtre Propriétés.

Les options du composant Authentification

Le composant Authentification contient d'autres options : 

Forcer l'authentification après (heures) 

Cette option indique le nombre d'heures (après l'identification) pendant lesquelles la session reste valide, même sans connexion internet. Au-delà de ce nombre d'heures, une connexion internet sera nécessaire pour continuer. Lorsque la session est toujours valide, l'utilisateur n'aura pas besoin de se reconnecter. Par défaut, la valeur 0 crée une session infinie.

Forcer la vérification d'email

Il s'agit d'une étape supplémentaire de validation de l'email dans laquelle la personne reçoit un email avec un lien web de validation. Cette étape est nécessaire avant d'accéder à l'application.

Champs utilisateur avancés

Ces champs sont requis lors de l'enregistrement de l'utilisateur : Poste et Entreprise.

Si vous choisissez cette option, vous devez avoir effectué la configuration Cloud Firestore (voir ci-dessus). 

Afficher les conditions de communication et d'utilisation

Cette option ajoute une case à cocher pour la validation des conditions d'utilisation. Un nouvel événement déclencheur est exposé (Conditions cliquées) sur le composant Authentification : il permet d'associer une action dans le parcours utilisateur. 

Déclencher et créer une action liée à l'authentification

Le composant Authentification expose des événements déclencheurs que vous pouvez utiliser dans votre parcours utilisateur : 

  • Utilisateur connecté : ce déclencheur permet de passer à l'écran d'accueil si l'utilisateur est connecté
  • Utilisateur déconnecté : ce déclencheur permet d'afficher l'écran d'authentification si l'utilisateur n'est pas connecté
  • Conditions cliquées (si vous avez activé l'option Afficher les conditions de communication et d'utilisation)

Vous pouvez également ajouter des actions sur le composant Authentification : 

  • Se déconnecter : pour déconnecter l'utilisateur de sa session
  • Modifier la donnée : pour modifier une donnée liée à vos utilisateurs (par exemple un score)

Gérer vos utilisateurs

Une fois que vous avez mis en place votre formulaire d'authentification, vous pouvez gérer votre base de données utilisateurs directement sur Firebase.

Rendez-vous dans  Authentication et dans l'onglet Utilisateurs pour retrouver votre base d'utilisateurs. Vous avez accès aux données suivantes : l'email, la date de création, la date de dernière connexion et son identifiant unique (ID utilisateur). 

Vous pouvez ajouter manuellement un ou plusieurs utilisateurs. 

Associer des données à l'utilisateur

Grâce à ce composant, vous pouvez également associer des données à vos utilisateurs pour personnaliser son parcours dans l'application. Vous pouvez ainsi associer un score à chacun de vos utilisateurs, définir différents types d'utilisateurs, connaître leur progression dans l'application etc... 

Ces données sont accessibles depuis votre base Firebase et réutilisables pour d'autres occasions. Vous pouvez par exemple établir un classement (leaderboard) ou établir des statistiques. Il faut avoir au préalable configuré Cloud Firestore (voir ci-dessus).

Associer une donnée

Prenons l'exemple d'un score. Il suffit de créer l'action d'incrémenter le score depuis PandaSuite Studio pour que la donnée score soit automatiquement créée dans la base.

Sélectionnez la bonne réponse et l'action Agir sur un composant > Authentification > Modifier la donnée

Donnée : /score
Fonction : Incrémenter
Valeur : 1

Pour en savoir plus sur comment créer un score : Score

Suivre une donnée

Vous pouvez suivre le score de vos utilisateurs depuis Firebase.

Rendez-vous dans  Firestore et dans l'onglet Données pour retrouver votre base users. Chaque utilisateur est présenté sous la forme de son identifiant unique. Vous retrouvez le champ Score

Vous avez encore besoin d'aide ? Contactez-nous Contactez-nous