Créer une authentification personnalisée avec Appsmith et APISIX

Le flux d'authentification est une partie fondamentale des applications web. Il garantit la sécurité et la confidentialité des données des utilisateurs lorsqu'ils utilisent votre application. Bien qu'il existe de nombreuses solutions d'authentification prêtes à l'emploi, la création d'un système d'authentification en utilisant une plateforme de développement d'interface utilisateur low-code et une solution de gestion d'API vous permet de créer des applications web sécurisées avec facilité. Vous pouvez créer une application sans avoir besoin de connaissances approfondies en technologies frontend et backend. Vous n'avez pas besoin de connaître Python, Java, HTML, CSS ou d'autres frameworks JavaScript. Dans cet article, vous apprendrez comment créer un flux de connexion personnalisé et des pages d'interface utilisateur pour sécuriser votre application en utilisant Appsmith, Apache APISIX, et JWT.

Appsmith est une plateforme de développement low-code puissante qui permet aux utilisateurs de créer facilement des applications web et des tableaux de bord. Elle fournit une interface visuelle et un ensemble complet de composants prédéfinis, la rendant accessible aux développeurs et aux non-développeurs.

Objectifs d'apprentissage

Vous apprendrez les éléments suivants tout au long de cet article :

• Concevoir un processus d'authentification dans un environnement low-code.
• Configurer l'API d'authentification backend avec APISIX.
• Créer des pages d'interface utilisateur en utilisant des widgets dans Appsmith.
• Activer l'authentification basée sur des tokens.

Concevoir l'architecture d'authentification

Avant de plonger dans l'implémentation, il est important de concevoir d'abord l'architecture de votre système d'authentification pour votre application. Considérez les composants clés tels que l'inscription des utilisateurs, la connexion, le mot de passe, la gestion des sessions et l'authentification basée sur des tokens JWT. Définissez le flux d'informations entre Appsmith et APISIX, en assurant un workflow d'authentification clair et efficace.

Nous allons créer une application mobile simple qui comporte 3 pages respectivement Inscription, Connexion et Principale. Les tâches sont divisées en deux parties. Dans la première partie, nous allons configurer l'API backend avec la passerelle API Apache APISIX qui gérera les demandes d'authentification. Nous utilisons des points de terminaison existants de la passerelle API pour réaliser les flux d'inscription des utilisateurs, de connexion et de génération de tokens. Dans la deuxième partie, nous utilisons l'interface de glisser-déposer d'Appsmith avec des composants d'interface utilisateur prêts à l'emploi pour créer les pages Inscription, Connexion et Principale et enfin, nous les connectons à l'API pour gérer les soumissions de formulaire. Commençons par construire ces composants dans les sections suivantes.

Partie 1 : Configurer l'API d'authentification backend

Nous commençons par configurer l'API backend qui gérera les demandes d'authentification de l'application mobile. APISIX peut être utilisé pour appliquer l'authentification afin de protéger les points de terminaison de l'API. APISIX vous permet de valider les informations d'identification des utilisateurs, d'émettre des tokens d'authentification et de contrôler l'accès à vos API. En intégrant APISIX à votre système d'authentification mobile, vous pouvez ajouter une couche de sécurité supplémentaire et vous assurer que seuls les utilisateurs authentifiés peuvent accéder à vos ressources protégées.

Prérequis

• Docker est utilisé pour installer etcd et APISIX conteneurisés.
• curl est utilisé pour envoyer des requêtes à l'API Admin d'APISIX. Vous pouvez également utiliser des outils tels que Postman pour interagir avec l'API.

Étape 1 : Installer Apache APISIX

APISIX peut être facilement installé et démarré avec le script de démarrage rapide suivant :

curl -sL https://run.api7.ai/apisix/quickstart | sh

Étape 2 : Configurer le service backend (upstream)

Ensuite, nous configurons notre service backend. À des fins de démonstration, il peut s'agir de n'importe quel service API qui sert notre logique backend. Vous pouvez le remplacer par votre propre service. J'utilise un serveur public fictif http://httpbin.org/ qui génère des réponses aléatoires. Pour simplifier, nous aurons un seul point de terminaison qui renvoie l'adresse IP publique de notre machine à ce point de terminaison http://httpbin.org/ip.

Pour acheminer les requêtes vers le service backend pour l'API fictive, vous devrez le configurer en ajoutant un serveur upstream dans Apache APISIX via l'API Admin.

curl http://127.0.0.1:9180/apisix/admin/upstreams/1 -X PUT -d '
{
   "name":"Mock API upstream",
   "desc":"Register Mock API as the upstream",
   "nodes":{
      "httpbin.org:80":1
   }
}'

Étape 3 : Créer une nouvelle configuration de plugin

Cette étape consiste à configurer un plugin (en utilisant l'objet Plugin Config) pour une route que nous créons à l'étape suivante. Ainsi, APISIX active le plugin JWT pour sécuriser nos points de terminaison. Chaque fois que nous demandons le point de terminaison, il vérifie les informations d'identification JWT dans l'en-tête de la requête.

curl http://127.0.0.1:9180/apisix/admin/plugin_configs/1 -X PUT -d '
{
   "plugins":{
      "jwt-auth": {}
   }
}'

Étape 4 : Créer une Route pour l'API backend

Nous créons un nouvel objet Route dans APISIX qui intercepte toutes les requêtes GET vers l'URI /ip, et utilise les configurations upstream et de plugin existantes pour activer le mécanisme de routage et les politiques d'authentification. Il vérifie la présence du plugin JWT dans l'en-tête, et s'il existe et est valide, il transmet la requête à notre serveur fictif. Sinon, il renvoie immédiatement une erreur non autorisée et la requête n'atteindra pas le service réel.

curl -i http://127.0.0.1:9180/apisix/admin/routes/1 -X PUT -d '
{
   "name":"Mock API server route",
   "desc":"Create a new route in APISIX for the mock server endpoint",
   "methods":[
      "GET"
   ],
   "uri":"/ip",
   "upstream_id":"1",
   "plugin_config_id":1
}'

Étape 5 : Créer une Route pour signer le token JWT

Nous avons implémenté l'authentification basée sur des tokens pour notre API. APISIX peut également agir comme un fournisseur d'identité pour générer et valider des tokens. Pour ce faire, vous devez configurer une Route pour un nouveau point de terminaison d'API qui signe le token en utilisant le plugin public-api :

curl http://127.0.0.1:9180/apisix/admin/routes/login -X PUT -d '
{
    "uri": "/login",
    "plugins": {
        "public-api": {
            "uri": "/apisix/plugin/jwt/sign"
        }
    }
}'

En exécutant la commande curl ci-dessus, nous avons enregistré une nouvelle route appelée login avec le chemin d'URI /login qui signe un nouveau token chaque fois qu'un utilisateur existant tente de se connecter depuis la page de connexion de l'application mobile en utilisant son adresse e-mail.

Partie 2 : Créer des formulaires d'inscription et de connexion dans Appsmith

En utilisant l'interface low-code d'Appsmith, nous pouvons créer des formulaires d'inscription et de connexion pour les utilisateurs. Appsmith fournit une large gamme de widgets prédéfinis qui peuvent être facilement personnalisés. Concevez les formulaires avec des champs de saisie pour le nom d'utilisateur, le mot de passe et toute autre information que vous souhaitez inclure dans le tableau de bord.

Avant de commencer

Je vais passer outre la partie installation d'Appsmith sur votre machine. Vous pouvez apprendre comment installer Appsmith en utilisant Docker sur le site web d'Appsmith. Assurez-vous qu'Appsmith est installé et que vous pouvez y accéder à l'adresse http://localhost. Lorsque vous déployez et exécutez Appsmith, une application intitulée My first application est ajoutée par défaut. Vous pouvez utiliser cette application pour créer votre première application.

Étape 1 : Créer une page d'inscription

Dans notre cas, un nouvel utilisateur s'inscrit d'abord sur l'application mobile depuis la page d'inscription. Commencez par créer une nouvelle page appelée RegistrationPage dans votre application. Ajoutez des widgets Input pour l'e-mail (nommé EmailInput), le nom d'utilisateur (nommé UsernameInput) et le mot de passe (PasswordInput). Ajoutez également des widgets Button pour l'inscription (nommé RegisterButton) et la connexion (nommé LoginButton) au tableau de dessin. Le résultat final ressemble à ceci :

Lorsqu'un utilisateur appuie sur le bouton d'inscription avec les détails fournis, vous aurez besoin d'une requête pour gérer la communication avec le point de terminaison de l'API Admin d'APISIX pour enregistrer un nouveau consommateur d'API dans la passerelle API. Créez une requête API (nommée APISIX_Admin_Add_Consumer_API) avec l'URI du point de terminaison des consommateurs d'APISIX /apisix/admin/consumers. Placez le texte des widgets Input dans le corps de votre requête. L'accès aux widgets Input devrait ressembler à ceci :

Notez que nous utilisons l'adresse host.docker.internal au lieu de localhost car APISIX fonctionne dans son propre conteneur sur un réseau Docker différent de celui d'Appsmith.

Une fois la requête envoyée à APISIX, elle enregistre le nouveau consommateur, et l'objet consommateur utilisera le plugin jwt-auth avec une clé et un secret. Vous pouvez tester si le consommateur est enregistré avec succès dans le système en récupérant le consommateur spécifié par le nom d'utilisateur appsmithuser. Exécutez cette commande curl :

curl http://127.0.0.1:9180/apisix/admin/consumers/appsmithuser

Les utilisateurs existants peuvent se rendre directement à la page de connexion. Voir la section suivante.

Étape 2 : Créer une page de connexion

Revenez sur le canevas de l'application, ajoutez une nouvelle page appelée Login page et configurez le formulaire de connexion avec des widgets Input (pour saisir l'e-mail de l'utilisateur) et Button (pour la connexion).

Ensuite, créez une requête API (nommée login_api) pour le chemin d'URI de la route de connexion d'APISIX /login et définissez le paramètre key sur {{EmailInput.text}}. Si vous testez la requête et appuyez sur le bouton d'exécution, en cas de réponse réussie, notre point de terminaison de passerelle API d'authentification devrait renvoyer un token d'accès valide. Dans l'exemple ci-dessous, la clé jwt est un token qui indique que l'utilisateur a été authentifié du côté d'APISIX.

Pour exécuter la requête login_api via le bouton Login, vous devez définir la propriété onClick de la requête.

Il est également possible de stocker le token JWT dans le store Appsmith puis de rediriger l'utilisateur vers la MainPage. Pour ce faire, insérez le code ci-dessous dans l'action login_api de la Login page dans la propriété onClick :

{{login_api.run(() => {
  const jwt = login_api?.data;
  if (jwt) {
    storeValue('jwt', jwt);
    navigateTo('MainPage', {});
  } else {
    showAlert('Login failed!', 'error');
  }
})}}

Si l'utilisateur échoue à s'authentifier avec APISIX, affichez un message d'alerte en tant que rappel pour informer l'utilisateur qu'il y a eu une erreur.

Étape 3 : Créer une page principale

Enfin, il est temps de configurer la MainPage de l'application mobile pour permettre l'accès aux utilisateurs connectés et afficher certaines données. Vous pouvez utiliser le même canevas pour construire votre interface utilisateur à partir de widgets. Une fois que l'utilisateur s'est connecté avec succès, notre logique le redirige vers la MainPage, et lors du premier chargement de la page, elle effectue automatiquement un appel API à la route http://127.0.0.1:9080/ip dans APISIX en utilisant la requête que vous ajoutez (nommée main_page_data_api) et récupère l'adresse IP du serveur upstream (que nous avons créé dans la Partie 1 à l'étape 2).

Vous remarquerez peut-être dans l'en-tête Authorization la valeur {{appsmith.store.jwt}} la valeur jwt que nous avons enregistrée dans le store Appsmith à l'étape précédente, qui est utilisée pour prouver à votre application que l'utilisateur est reconnu. Si la valeur jwt n'existe pas dans le store Appsmith, nous affichons une erreur non autorisée à l'utilisateur.

Dans mon cas, j'ai ajouté deux widgets Text à la MainPage et défini la valeur du champ de texte du second sur {{main_page_data_api.data}} qui est simplement la sortie des données de l'appel main_page_data_api. Voir le résultat.

Prochaines étapes

Vous pouvez également ajouter une page Non autorisée pour rediriger les utilisateurs non autorisés vers cette page, afficher l'erreur et leur suggérer de se connecter ou de s'inscrire pour créer un nouveau compte. Offrez à vos utilisateurs la possibilité de se déconnecter de votre application avec un widget bouton lorsqu'ils ont terminé, ce qui peut aider à augmenter la sécurité de vos données.

Conclusion

En suivant les étapes ci-dessus, nous avons créé un système d'authentification personnalisé en utilisant Appsmith et APISIX. Appsmith est adapté à un large éventail de cas d'utilisation, de la construction d'outils internes et de tableaux de bord d'administration au prototypage et au développement d'applications complètes. Avec APISIX, vous pouvez non seulement appliquer l'authentification pour vos utilisateurs, mais également introduire des mesures de sécurité supplémentaires telles que la limitation du débit, le blocage d'IP et la restriction des consommateurs pour maintenir la sécurité de notre solution d'authentification personnalisée.

Ressources connexes

• Authentification de la passerelle API.
• Politique d'autorisation d'Apache APISIX : Protégez vos API.
• Plongée en profondeur dans l'authentification dans les microservices.