Intégrer l’authentification des utilisateurs dans vos applications Qodly

Dans le blog de cette semaine, nous allons nous concentrer sur le sujet crucial de l’authentification. Pour illustrer notre propos, nous prendrons l’exemple d’une application destinée à la rédaction des entretiens annuels d’évaluation des employés. Cette application permet aux utilisateurs d’accéder à leurs comptes en toute sécurité en s’authentifiant à l’aide de leur adresse électronique et de leur mot de passe.

Application d’évaluation des performances

Aperçu de l’authentification

L’authentification est la pierre angulaire de toute application web, car elle garantit que seuls les utilisateurs autorisés peuvent accéder à des informations sensibles ou effectuer des actions spécifiques. Dans notre exemple, le processus de connexion est simple mais efficace, démontrant comment 4D Qodly Pro gère l’authentification de manière sécurisée et efficace.

Le processus de connexion

Le formulaire de connexion se trouve sur la page « login » et se compose de :

  • Deux champs de saisie : liés à l’adresse électronique et au mot de passe de la source de données.
  • Un bouton « Sign in » : déclenche le processus d’authentification.

 

This is a login page for a "Performance Review" system. The design is split into two sections:
* Left Side (Red Background)
        Displays the Performance Review title with an icon of a building and a person.

* Right Side (White Background)
        Contains a "Welcome!" message.
        Two input fields for Email and Password, with the password field having an eye icon to toggle visibility.
        A "Forgot your password?" link.
        A red "Sign in" button for user authentication.

Dans Qodly Studio, d’autres modèles de formulaires préconstruits pour la fonctionnalité de connexion sont disponibles dans la section dédiée aux modèles. Ces modèles peuvent être personnalisés pour répondre aux besoins spécifiques de votre application.

Fonction : authentify()

Lorsque l’utilisateur clique sur le bouton « Se connecter », la fonction « ds.authentify() » est appelée avec l’adresse électronique et le mot de passe comme paramètres.

The OnClick function in this UI is set up to authenticate a user when they click a button. Here’s how it works:
1. Event Trigger
* The function is executed onClick of the button.
2. Function Call
* Calls an exposed function named ds.authentify, which likely handles authentication.
3. Parameters Passed
* email (Text) → Taken from the page input.
* password (Text) → Also taken from the page input.
* pageName (set to "app") → Likely specifies which page or context the authentication is for.
4. Result Handling
* The function returns a result (Text), which could be used to verify if authentication was successful.

Les informations relatives à l’utilisateur, telles que l’adresse électronique et le mot de passe, sont stockées dans la base de données, dans la table « Employee ». Dans la fonction « authentify() », une simple requête de base de données est effectuée pour vérifier les informations.

Voici un code qui illustre ce processus :

exposed Function authentify($email: Text; $password: Text) : Text
$employee:=This.Employee.query("Email = :1" ; $email).first()
If ($employee#Null)
If (Verify password hash($password; $employee.Password))
Session.setPrivileges("user")
Web Form.setMessage("Authentication successful")
Else
Web Form.setError("Authentication failed")
End if
Else
Web Form.setError("Authentication failed")
End if

Gestion des privilèges des utilisateurs

Avant d’authentifier un utilisateur, il est essentiel de restreindre l’accès aux données et fonctions sensibles. Cette sécurité est assurée par la gestion des privilèges.

Tout d’abord, nous avons un privilège intitulé « none », qui possède tous les droits sur la source de données (ds), garantissant ainsi un accès complet à la base de données. Ce privilège n’est attribué à aucun utilisateur, ce qui permet de maintenir un environnement sécurisé. Lorsque des droits sont accordés à un privilège, ils sont automatiquement révoqués pour tous les autres, ce qui sécurise efficacement le système.

This screenshot shows a privilege management interface where a set of permissions are assigned to a data source (ds).
Read: Allowed
Create: Allowed
Update: Allowed
Delete: Allowed
Execute: Allowed

Nous avons ensuite ajouté un privilège appelé « authentify ». L’option « Promote » est attribuée à la fonction « ds.authentify() ». Cela signifie que chaque fois que cette fonction est appelée, le privilège « authentifier » est automatiquement appliqué.

Ensuite, nous nous assurons que les permissions requises pour l’authentification sont ajoutées à la classe de données pertinente ou aux fonctions utilisées. Dans notre exemple, nous attribuons les permissions « Read » et « Execute » à la classe de données « Employee ».

Assigned permissions to ds.authentify
Read: Enabled
Create: Disabled
Update: Disabled
Delete: Disabled
Execute: Disabled
Promote: Enabled

Assigned permissions to Employee
Read: Enabled
Create: Disabled
Update: Disabled
Delete: Disabled
Execute: Enabled
Promote: Disabled

Enfin, nous activons l’option« Force login« . Cette option vous permet de contrôler le nombre de sessions web ouvertes qui nécessitent des licences 4D Client. Vous pouvez également déconnecter l’utilisateur à tout moment pour décrémenter le nombre de licences conservées.

Ce système de privilèges à plusieurs niveaux permet d’empêcher les accès non autorisés et de garantir un fonctionnement sécurisé de l’application.

Pour en savoir plus, consultez notre article de blog : Force Login Becomes Default for all REST Auth.

Ajouter une fonction de déconnexion

Pour améliorer l’expérience utilisateur et la sécurité, il est important de proposer une option de déconnexion. Dans notre exemple :

  • Un bouton de déconnexion est placé dans le coin supérieur droit de la page « Main ».
  • L’action « Logout » est ajoutée à ce bouton dans l’événement « On Click ».

 

Assigned permissions to ds.authentify
Read: Enabled
Create: Disabled
Update: Disabled
Delete: Disabled
Execute: Disabled
Promote: Enabled

Assigned permissions to Employee
Read: Enabled
Create: Disabled
Update: Disabled
Delete: Disabled
Execute: Enabled
Promote: Disabled

Cela permet aux utilisateurs de mettre fin à leur session en toute sécurité, en supprimant tous les privilèges actifs et en protégeant les données sensibles.

Prochaines étapes

L’authentification et la gestion des privilèges sont essentielles à la création d’applications web sécurisées. Pour approfondir les capacités d’authentification et de gestion des privilèges, consultez les ressources suivantes :

 

Nous vous encourageons à essayer de mettre en œuvre ces concepts dans vos propres applications. Vous avez des questions ou des idées ? Rejoignez la discussion dans le forum ou partagez vos réactions dans les commentaires ci-dessous. Restez à l’écoute pour le prochain article de notre série !

Vanessa Talbot
- Product Owner -Vanessa Talbot a rejoint l'équipe du programme 4D en juin 2014. En tant que Product Owner, elle est chargée de rédiger les user stories puis de les traduire en spécifications fonctionnelles. Son rôle est également de s'assurer que l'implémentation des fonctionnalités livrées répond aux besoins des clients.Depuis son arrivée, elle a travaillé à la définition des fonctionnalités clés de 4D. Elle a travaillé sur la plupart des nouvelles fonctionnalités de multithreading préemptif et aussi sur un sujet très complexe : la nouvelle architecture pour les applications enginées. Vanessa est diplômée de Telecom Saint-Etienne. Elle a commencé sa carrière à l'Institut de Recherche Criminelle en tant que développeur pour le département audiovisuel. Elle a également travaillé dans les domaines des médias et du médical en tant qu'experte en support technique, en production ainsi qu'en documentation de nouvelles fonctionnalités.