Français

oidc
supabase
auth
rls
jwt

Intégration avec Supabase

Apprenez à intégrer Logto avec Supabase pour améliorer l'expérience d'authentification de vos applications.

Yijun

Developer

5/16/2024

Arrêtez de perdre des semaines sur l'authentification des utilisateurs

Lancez des applications sécurisées plus rapidement avec Logto. Intégrez l'authentification des utilisateurs en quelques minutes et concentrez-vous sur votre produit principal.

Commencer

Logto est un fournisseur de services d'authentification d'identité moderne qui offre un support de connexion sécurisé, complet et convivial pour les applications. Il propose également une multitude de SDK et de guides d'intégration pour divers frameworks et langages de programmation, vous permettant d'intégrer sans effort des services d'authentification d'identité de niveau entreprise dans votre application en quelques minutes.

Cet article se concentre principalement sur la manière d'intégrer Supabase avec Logto.

Bases de Supabase

Supabase utilise la sécurité au niveau des lignes de Postgres pour contrôler les permissions d'accès aux données. En termes simples, en créant des politiques de sécurité au niveau des lignes pour les tables dans la base de données, nous pouvons restreindre et gérer qui peut lire, écrire et mettre à jour les données dans une table.

Supposons que vous ayez une table nommée "posts" dans votre base de données, avec le contenu suivant :

Le champ user_id dans la table représente l'utilisateur auquel chaque donnée de post appartient. Vous pouvez restreindre chaque utilisateur à accéder uniquement à ses propres données en vous basant sur le champ user_id.

Cependant, avant que cela puisse être mis en œuvre, Supabase doit être capable d'identifier l'utilisateur actuel accédant à la base de données.

Ajouter des données utilisateur aux requêtes Supabase

Grâce au support de Supabase pour JWT, lorsque notre application interagit avec Supabase, nous pouvons générer un JWT contenant les données utilisateur à l'aide du secret JWT fourni par Supabase. Nous utilisons ensuite ce JWT comme en-tête d'authentification lors de la création des requêtes. Une fois la requête reçue, Supabase vérifie automatiquement la validité du JWT et permet l'accès aux données qu'il contient tout au long des processus suivants.

Premièrement, nous pouvons obtenir le secret JWT fourni par Supabase à partir des "Paramètres du projet" dans le tableau de bord Supabase :

Ensuite, lorsque nous utilisons le SDK de Supabase pour envoyer les requêtes à Supabase, nous utilisons ce secret pour générer notre JWT et l'attacher en tant qu'en-tête d'autorisation à la requête. (Veuillez noter que ce processus se déroule dans le service backend de votre application, et le secret JWT ne doit jamais être exposé à des tiers).

Ensuite, accédez à l'Éditeur SQL dans le tableau de bord Supabase et créez une fonction pour récupérer le userId porté dans la requête :

Le code utilisé dans l'image est le suivant :

Comme le montre le code, dans Supabase, vous pouvez récupérer la charge utile du JWT que nous générons en appelant request.jwt.claims. Le champ userId à l'intérieur de la charge utile est la valeur que nous avons définie.

Avec cette fonction, Supabase peut déterminer l'utilisateur qui accède actuellement à la base de données.

Créer une politique de sécurité au niveau des lignes

Ensuite, nous pouvons créer une politique de sécurité au niveau des lignes pour restreindre chaque utilisateur à accéder uniquement à ses propres données en fonction du champ user_id dans la table posts.

Naviguez vers la page Éditeur de Table dans le tableau de bord Supabase et sélectionnez la table posts.
Cliquez sur "Ajouter une politique RLS" en haut de la table.
Dans la fenêtre qui s'affiche, cliquez sur "Créer une politique".
Entrez un nom de politique et choisissez la commande SELECT Policy.
Dans le bloc using du code ci-dessous, entrez :

En utilisant de telles politiques, le contrôle d'accès aux données dans Supabase est réalisé.

Dans des applications réelles, vous créeriez diverses politiques pour restreindre les actions utilisateur telles que l'insertion et la modification de données. Cependant, cela dépasse le cadre de cet article. Pour plus d'informations sur la sécurité au niveau des lignes (RLS), veuillez consulter Sécuriser vos données avec la sécurité au niveau des lignes de Postgres.

Processus d'intégration de base avec Logto

Comme mentionné précédemment, parce que Supabase utilise la RLS pour son contrôle d'accès, la clé de l'intégration avec Logto (ou tout autre service d'authentification) réside dans l'obtention de l'id utilisateur de l'utilisateur autorisé et son envoi à Supabase. Le processus entier est illustré dans le diagramme ci-dessous :

Ensuite, nous expliquerons comment intégrer Logto avec Supabase en nous basant sur ce diagramme de processus.

Intégration de Logto

Logto propose des guides d'intégration pour divers frameworks et langages de programmation.

En général, les applications développées avec ces frameworks et langages se divisent en catégories telles que les applications natives, les SPA (applications monopage), les applications web traditionnelles et les applications M2M (machine à machine). Vous pouvez visiter la page Démarrages rapides de Logto pour intégrer Logto à votre application en fonction de la pile technologique que vous utilisez. Ensuite, suivez les instructions ci-dessous pour intégrer Logto à votre projet en fonction du type de votre application.

Application native ou SPA

Les applications natives et les SPA fonctionnent toutes deux sur votre appareil, et les identifiants (jeton d'accès) obtenus après la connexion sont stockés localement sur votre appareil.

Par conséquent, lors de l'intégration de votre application avec Supabase, vous devez interagir avec Supabase via votre service backend car vous ne pouvez pas exposer des informations sensibles (comme le secret JWT Supabase) sur chaque appareil utilisateur.

Supposons que vous construisez votre SPA en utilisant React et Express. Vous avez réussi à intégrer Logto à votre application en suivant le Guide du SDK React Logto (vous pouvez vous référer au code dans notre exemple react). De plus, vous avez ajouté la validation du jeton d'accès Logto à votre serveur backend selon la documentation Protéger votre API sur Node (Express).

Ensuite, vous utiliserez le jeton d'accès obtenu de Logto pour demander des données utilisateur à votre serveur backend :

Dans votre serveur backend, vous avez déjà extrait l'identifiant de l'utilisateur connecté à partir du jeton d'accès à l'aide d'un middleware :

Maintenant, vous pouvez utiliser le getSupabaseClient décrit ci-dessus pour attacher le userId au JWT utilisé dans les requêtes suivantes à Supabase. Alternativement, vous pouvez créer un middleware pour créer un client Supabase pour les requêtes nécessitant d'interagir avec Supabase :

Dans le flux de traitement suivant, vous pouvez directement appeler ctx.supabase pour interagir avec Supabase :

Dans ce code, Supabase ne renverra que les données de post appartenant à l'utilisateur actuel en fonction des politiques définies précédemment.

Application web traditionnelle

La principale différence entre une application web traditionnelle et une application native ou SPA est qu'une application web traditionnelle rend et met à jour les pages uniquement sur le serveur web. Par conséquent, les identifiants utilisateur sont gérés directement par le serveur web, tandis que dans les applications natives et SPA, ils résident sur l'appareil de l'utilisateur.

Lorsque vous intégrez Logto avec une application web traditionnelle dans Supabase, vous pouvez directement récupérer l'identifiant de l'utilisateur connecté depuis le backend.

En prenant un projet Next.js comme exemple, après avoir intégré Logto à votre projet en suivant le Guide du SDK Next.js, vous pouvez utiliser le SDK Logto pour récupérer les informations utilisateur et construire le JWT correspondant pour interagir avec Supabase.

Application machine à machine

Le machine-to-machine (M2M) est souvent utilisé lorsque votre application doit communiquer directement avec des serveurs de ressources, comme un service statique qui extrait les posts quotidiens, etc.

Vous pouvez utiliser le guide Machine-to-machine : Auth avec Logto pour l'authentification des applications machine à machine. L'intégration entre Supabase et les applications machine à machine est similaire à celle des applications natives et SPA (comme décrit dans la section "Application native ou application monopage"). Il s'agit d'obtenir un jeton d'accès de Logto et de le valider via une API backend protégée.

Cependant, il est important de noter que les applications natives et SPA sont généralement conçues pour les utilisateurs finaux, donc l'ID utilisateur obtenu représente l'utilisateur lui-même. Cependant, le jeton d'accès pour les applications machine à machine représente l'application elle-même, et le champ sub dans la charge utile du jeton d'accès est l'identifiant client de l'application M2M, pas un utilisateur spécifique. Par conséquent, lors du développement, il est crucial de distinguer quelles données sont destinées aux applications M2M.

De plus, si vous souhaitez qu'une application M2M spécifique accède à Supabase au nom de l'ensemble du service pour contourner les restrictions RLS, vous pouvez utiliser le secret service_role de Supabase pour créer un client Supabase. Cela est utile lorsque vous souhaitez effectuer certaines tâches administratives ou automatisées nécessitant un accès à toutes les données sans être limité par les politiques de sécurité au niveau des lignes configurées pour les utilisateurs individuels.

Le secret service_role peut être trouvé sur la même page que le secret JWT :

Lors de la création d'un client Supabase, utilisez le secret service_role, puis ce client peut accéder à toutes les données dans la base de données :

Résumé

Dans cet article, nous avons exploré l'intégration de Logto avec Supabase, en mettant en lumière des idées clés et des aspects critiques de l'intégration. Nous avons exploré des concepts tels que l'authentification JWT et les politiques de sécurité au niveau des lignes, vous guidant tout au long du processus d'incorporation transparente de Logto dans vos applications alimentées par Supabase. Avec ces connaissances, nous espérons que vous pourrez renforcer en toute confiance la sécurité de votre application, sa fonctionnalité, et même étendre vos projets avec des fonctionnalités supplémentaires.

Essayez Logto Cloud gratuitement

Bases de Supabase#

Ajouter des données utilisateur aux requêtes Supabase#

Créer une politique de sécurité au niveau des lignes#

Processus d'intégration de base avec Logto#

Intégration de Logto#

Application native ou SPA#

Application web traditionnelle#

Application machine à machine#

Résumé#

Bases de Supabase#

Ajouter des données utilisateur aux requêtes Supabase#

Créer une politique de sécurité au niveau des lignes#

Processus d'intégration de base avec Logto#

Intégration de Logto#

Application native ou SPA#

Application web traditionnelle#

Application machine à machine#

Résumé#

Bases de Supabase

Ajouter des données utilisateur aux requêtes Supabase

Créer une politique de sécurité au niveau des lignes

Processus d'intégration de base avec Logto

Intégration de Logto

Application native ou SPA

Application web traditionnelle

Application machine à machine

Résumé

Bases de Supabase

Ajouter des données utilisateur aux requêtes Supabase

Créer une politique de sécurité au niveau des lignes

Processus d'intégration de base avec Logto

Intégration de Logto

Application native ou SPA

Application web traditionnelle

Application machine à machine

Résumé