Comment créer une application d'authentification Full-Stack

La plupart des applications web nécessitent une fonctionnalité d'inscription et de connexion. Mais pour les débutants, cela peut être un défi. Même les développeurs expérimentés préfèrent utiliser des services externes pour gérer l'authentification dès le départ. Lorsque nous parlons d'un flux d'authentification full-stack, cela signifie configurer la connexion et l'inscription des utilisateurs sur le frontend et sécuriser également l'API backend. Ainsi, vous devez travailler sur les deux parties.

Cet article vous guidera à travers la construction d'une application d'authentification full-stack avec Apache APISIX, Authgear, et OpenID Connect (OIDC). Vous pouvez trouver le code source du projet sur GitHub. Pour un démarrage rapide avec l'application, clonez simplement le dépôt et exécutez l'exemple de code, en suivant les étapes fournies dans le fichier README.md.

Objectif d'apprentissage

Ce contenu vise à montrer à tout le monde comment configurer l'authentification à la fois sur le backend et le frontend. De plus, il est conçu pour aider à la fois les débutants et les développeurs expérimentés qui souhaitent devenir des développeurs full-stack.

Le rôle d'APISIX, Authgear et OIDC dans l'authentification

Avant de plonger dans le guide, présentons brièvement les outils que nous allons utiliser.

• OIDC (OpenID Connect) est une couche d'identité simple construite sur le protocole OAuth 2.0. Il permet aux applications tierces de vérifier les utilisateurs et d'obtenir des informations de profil de base de manière standardisée.

• APISIX se distingue comme l'une des passerelles API open-source les plus populaires. Elle est conçue non seulement pour la gestion des API, mais aussi pour assurer la sécurité et la protection de ces API. L'une des fonctionnalités les plus importantes dans son arsenal de sécurité est la prise en charge d'OIDC via son plugin.

• Authgear est une plateforme d'identité en tant que service (IDaaS) hautement adaptable pour les applications web et mobiles. Vos utilisateurs peuvent se connecter à votre application via une interface utilisateur intégrée (vous n'avez pas besoin de créer une interface utilisateur pour les flux d'inscription et de connexion des utilisateurs), ce qui leur offre une expérience de connexion sécurisée et basée sur des standards que vous pouvez personnaliser avec votre propre branding et diverses méthodes d'authentification, telles que l'e-mail, les connexions sociales, l'authentification sans mot de passe, les connexions biométriques, le mot de passe à usage unique (OTP) avec SMS/WhatsApp, et l'authentification multifacteur (MFA). Il utilise OpenID Connect (OIDC) et OAuth 2.0 pour identifier qui est un utilisateur et accorder l'autorisation aux ressources protégées.

Le flux d'authentification

Voici un diagramme architectural de haut niveau du processus d'authentification :

Les étapes montrées dans le diagramme sont expliquées en détail ci-dessous :

Dans le diagramme ci-dessus, le Client est une application web, la Passerelle API est APISIX, le Fournisseur d'identité est Authgear et l'Upstream est une API backend.

1. Une application web peut prendre diverses formes, des applications à page unique (SPA) construites avec React, Vue ou Angular, aux applications web standard créées à l'aide de frameworks comme Express, NextJS et des plateformes similaires. L'application web est notre application cliente avec un frontend qui envoie une requête à un fournisseur d'identité (Authgear) avec un ID client, un secret client pour collecter un jeton d'accès comme les Jetons Web JSON (JWT).
2. Si les informations d'identification fournies sont correctes, Authgear répond avec un jeton JWT à l'application web. Vous pouvez créer autant d'utilisateurs que vous le souhaitez pour votre application dans le portail Authgear et les utilisateurs peuvent se connecter en utilisant les pages d'interface utilisateur hébergées par Authgear.
3. Après avoir obtenu le jeton JWT, le client envoie une requête à une passerelle API (APISIX) avec le jeton d'accès, et les API backend protégées par la passerelle.
4. Avant de traiter la requête, APISIX doit s'assurer que le jeton fourni est valide, n'a pas expiré et dispose des bonnes portées pour les données ou services demandés. Si APISIX ne peut pas valider localement le jeton, il envoie une requête d'introspection du jeton au serveur d'autorisation Authgear. Cette requête est généralement faite à l'endpoint introspection du serveur.
5. Authgear reçoit la requête d'introspection et la traite. Le serveur vérifie ses enregistrements pour déterminer la validité du jeton, son expiration et les portées associées, et après avoir déterminé l'état du jeton, il répond à APISIX.
6. Sur la base de la réponse d'introspection du jeton d'Authgear, APISIX peut alors prendre une décision éclairée. Si le jeton est valide, il transmet la requête à l'API backend, sinon, il rejette la requête du client avec un code d'état HTTP non autorisé.
7. APISIX envoie la réponse de l'API backend avec les ressources demandées.

Application d'authentification full-stack avec APISIX, Authgear et OIDC.

Pour le projet de démonstration, nous avons utilisé Docker pour installer et exécuter 3 composants (backend, passerelle API et frontend) avec une seule commande. Nous avons utilisé ExpressJS pour l'application web frontend, hébergeant notre application à page unique sur localhost:3000. La passerelle APISIX est accessible sur localhost:9080, tandis que notre API backend (elle peut être n'importe quelle API que vous construisez en utilisant Python, Java, NodeJS, etc.) est configurée sur localhost:9081.

Prérequis

Avant de commencer, vous aurez besoin de ce qui suit :

• Un compte Authgear gratuit. Inscrivez-vous si vous n'en avez pas encore.
• Docker est utilisé pour installer tous les services.

Configurer Authgear

Pour utiliser les services d'Authgear, vous devrez configurer une application dans le Tableau de bord d'Authgear et obtenir les informations du client OIDC d'Authgear. Cette configuration permet aux utilisateurs d'Authgear de se connecter automatiquement à l'application web une fois qu'ils sont authentifiés par Authgear.

Étape 1 : Créer une application dans Authgear

Pour configurer l'application, naviguez vers l'interface utilisateur du portail Authgear et sélectionnez Applications dans la barre de navigation de gauche. Utilisez le sélecteur interactif pour créer une nouvelle application client OIDC Authgear.

Étape 2 : Copier les informations d'identification de l'application

Chaque application dans Authgear se voit attribuer un ID CLIENT alphanumérique unique et un SECRET CLIENT que votre code d'application utilisera pour appeler les API d'Authgear dans l'application web. Enregistrez l'ÉMETTEUR généré par Authgear (par exemple, https://example-auth.authgear-apps.com), l'ID CLIENT, le SECRET CLIENT à partir de la sortie. Vous utiliserez ces valeurs à l'étape suivante pour la configuration de l'application web.

Étape 3 : Configurer l'URI de redirection

Un URI de redirection autorisé de votre application est l'URL vers laquelle Authgear redirigera après que l'utilisateur se soit authentifié afin que le middleware OpenID Connect puisse terminer le processus d'authentification. Dans notre cas, ce sera une page d'accueil pour notre frontend et elle fonctionnera sur http://localhost:3000.

Définissez http://localhost:3000 dans le champ URIs de redirection autorisés. ****Si ce n'est pas configuré, les utilisateurs ne seront pas redirigés vers votre application après leur connexion.

Étape 4 : Activer le jeton d'accès

Activez également l'option Émettre un JWT comme jeton d'accès dans la section Jeton d'accès de la configuration de l'application :

Étape 5 : Choisir une méthode de connexion

Après avoir créé l'application Authgear, vous choisissez comment les utilisateurs doivent s'authentifier sur la page de connexion. À partir de l'onglet Authentification, naviguez vers Méthodes de connexion, vous pouvez choisir une méthode de connexion parmi diverses options, notamment par e-mail, mobile, ou social, en utilisant simplement un nom d'utilisateur ou la méthode personnalisée que vous spécifiez. Pour cette démonstration, nous choisissons l'approche E-mail+Passwordless où nos utilisateurs sont invités à créer un compte et à se connecter en utilisant leurs e-mails. Ils recevront un mot de passe à usage unique (OTP) sur leurs e-mails et devront vérifier le code pour utiliser l'application.

Configurer et exécuter le projet de démonstration

Avec Authgear configuré avec succès, nous pouvons maintenant récupérer le dépôt GitHub, configurer les variables d'environnement et exécuter les services :

Commencez par cloner le projet sur votre machine locale :

git clone https://github.com/Boburmirzo/apisix-authgear-oidc-full-stack-auth.git

Faites du répertoire du projet votre répertoire de travail actuel :

cd apisix-authgear-oidc-full-stack-auth

Dans le répertoire racine de votre projet où se trouve le fichier Docker compose yaml, créez un fichier .env avec les variables d'environnement suivantes :

CLIENT_ID={AUTHGEAR_APP_CLIENT_ID}
CLIENT_SECRET={AUTHGEAR_APP_CLIENT_SECRET}
ISSUER={AUTHGEAR_ISSUER}
REDIRECT_URI=http://localhost:3000

Remplacez les valeurs entre crochets par les valeurs de configuration de votre application Authgear de la section Configurer Authgear ci-dessus, telles que Émetteur, ID Client, Secret Client.

Après avoir ajouté le fichier d'environnement, exécutez la commande docker compose up depuis le répertoire racine.

Tester le flux d'authentification

Pour la démonstration, nous avons utilisé Docker pour installer et exécuter 3 composants (backend, passerelle API et frontend) avec une seule commande. Nous avons utilisé ExpressJS pour l'application web frontend, hébergeant notre application à page unique sur localhost:3000. La passerelle APISIX est accessible sur localhost:9080, tandis que notre API backend (elle peut être n'importe quelle API que vous construisez en utilisant Python, Java, NodeJS, etc.) est configurée sur localhost:9081.

Après vous être inscrit en utilisant votre e-mail, vous recevrez un mot de passe à usage unique (OTP) :

Une fois que vous êtes authentifié, vous êtes autorisé à demander des ressources API et vous obtenez une réponse du service backend :

APISIX a appliqué l'authentification OIDC avec Authgear et a fourni un flux d'authentification sécurisé et rationalisé avec une configuration facile.

Prochaines étapes

Cette combinaison d'outils que nous avons utilisée a assuré la sécurité, permettant aux développeurs de se concentrer sur la logique métier principale au lieu des complexités du processus d'authentification. À partir de maintenant, vous avez la fonctionnalité d'authentification activée, vous pouvez commencer à construire votre interface utilisateur pour la page d'accueil, afficher les données de l'API et développer d'autres pages.

Ressources connexes

Politique d'autorisation d'Apache APISIX : Protégez vos API

Configurer l'authentification unique avec OIDC et Keycloak