Aller au contenu principal

Supabase 🆙

Supabase, crĂ©ation du projet​

Naviguez sur la page de connexion de Supabase. Nous vous recommendons de vous connecter avec votre compte GitHub.

Les libellés de l'interface de Supabase sont en anglais. Les noms entre guillemets dans les étapes ci-dessous correspondent exactement au texte lu par votre lecteur d'écran.

CrĂ©er l'organisation​

Sur la page « Create a new organization » :

  1. Dans le champ Name, inscrivez le nom de votre organisation (par exemple SuperProjet).
  2. Laissez Type of organization à « Personal » et Plan à « Free - $0/month ».
  3. Cliquez sur le bouton Create organization.
  4. Vous aboutissez sur la page de création de projet.

CrĂ©er le projet​

Sur la page « Create a new project » :

  1. Dans la liste Organization, vérifiez que l'organisation créée à l'étape précédente est sélectionnée.
  2. Vous pouvez Connect to GitHub, mais ce n'est pas nécessaire pour l'usage que nous allons en faire dans ce projet.
  3. Dans le champ Project name, donnez un nom Ă  votre projet.
  4. Dans le champ Database Password, inscrivez un mot de passe fort et conservez-le en lieu sûr. La robustesse du mot de passe est indiquée seulement par une ligne de couleur sous le champ. Le lien « Generate a password », situé prÚs du champ, produit un mot de passe fort automatiquement.
  5. Laissez la Region proposée (par exemple « Americas »).
  6. Les options de sécurité à cocher n'importent pas pour notre cas.
  7. Cliquez sur le bouton Create new project. La création du projet peut prendre quelques minutes.

RĂ©cupĂ©rer l'URL et la clĂ© du projet​

  1. Dans la zone du haut, cliquez sur le bouton vert Connect. Le raccourci avec les touches o puis c fonctionne aussi. Un panneau devrait souvrir Ă  droite de l'Ă©cran.
  2. Sélectionnez l'option Framework - Use a client library si ce n'est pas déjà fait.
  3. Dans le menu à dérouler pour choisir le framework, sélectionnez Flutter.
  4. Suivez les instructions, donc l'installation du package supabase_flutter et pour le fichier lib/main.dart.
astuce

Les valeurs fournies ne devraient pas se retrouver directement dans main. Pour un projet propre, extrayez la valeur de url dans une configuration, et celle de anonKey dans des secrets.

Supabase, configurer les droits d'accùs​

Il faut créer deux politiques d'accÚs (policies) : une pour les buckets et une pour les objets (les fichiers) qu'ils contiennent.

Ajouter les droits pour les buckets​

  1. Dans le menu de navigation principal Ă  gauche, cliquez sur Storage. Ce menu peut n'afficher que des icĂŽnes; chaque lien porte tout de mĂȘme un nom accessible, comme « Storage ».
  2. Dans le panneau secondaire de Storage, Files devrait ĂȘtre dĂ©jĂ  sĂ©lectionn. SĂ©lectionnez la rubrique Policies la rubrique.
  3. Repérez la section Policies under storage.buckets, puis cliquez sur le bouton New policy de cette section.
  4. Dans la boßte de dialogue « Adding new policy to storage.buckets », choisissez l'option For full customization (« Create a policy from scratch »).
  5. Remplissez le formulaire :
    • Policy name : Everything for all;
    • Allowed operation : sĂ©lectionnez ALL;
    • Target roles : ne sĂ©lectionnez rien (tous les rĂŽles publics sont visĂ©s par dĂ©faut);
    • USING expression : inscrivez true. Ce champ est un Ă©diteur de code : placez-y le focus, puis tapez true.
    • USING CHECK expression : laissez vide.
  6. Cliquez sur Review.
  7. Vérifiez le code SQL affiché, qui doit correspondre à celui-ci, puis cliquez sur Save policy.
CREATE POLICY "Everything for all" ON "storage"."buckets"
AS PERMISSIVE FOR ALL
TO public
USING (true)

Ajouter les droits pour les objets (images) dans les buckets​

  1. Toujours dans Storage > Policies, repérez la section Other policies under storage.objects, puis cliquez sur le bouton New policy de cette section.
  2. Dans la boßte de dialogue « Adding new policy to storage.objects », choisissez l'option For full customization (« Create a policy from scratch »).
  3. Remplissez le formulaire de la mĂȘme façon que pour les buckets :
    • Policy name : Everything for all;
    • Allowed operation : sĂ©lectionnez ALL;
    • Target roles : ne sĂ©lectionnez rien (tous les rĂŽles publics sont visĂ©s par dĂ©faut);
    • USING expression : inscrivez true. Ce champ est un Ă©diteur de code : placez-y le focus, puis tapez true.
    • USING CHECK expression : laissez vide.
  4. Cliquez sur Review, puis sur Save policy.
  5. Vérifiez le code SQL affiché, qui doit correspondre à celui-ci, puis cliquez sur Save policy.
CREATE POLICY "Everything for all" ON "storage"."objects"
AS PERMISSIVE FOR ALL
TO public
USING (true)
attention

Ces politiques donnent tous les droits Ă  tout le monde. Elles conviennent pour un exercice, mais pas pour une application en production.

Supabase, crĂ©er un bucket public​

CrĂ©er le bucket par l'interface​

  1. SĂ©lectionnez l'onglet Buckets.
  2. Cliquez sur le bouton New bucket.
  3. Dans la boßte de dialogue « Create storage bucket » :
    • sous Name of bucket, inscrivez le nom du bucket (par exemple supabucket). Ce nom ne peut plus ĂȘtre modifiĂ© par la suite et n'accepte que des lettres minuscules, des chiffres, des points et des tirets;
    • activez l'interrupteur Public bucket, pour que tout le monde puisse lire les fichiers sans autorisation. L'interrupteur est activĂ© lorsque votre lecteur d'Ă©cran l'annonce comme cochĂ©.
    • Pour un usage ouvert au public, les options Restrict file size et Restrict MIME types devraient ĂȘtre cochĂ©es. Quelqu'un pourrait dĂ©cider de mettre des Ă©normes fichiers de n'importe quels types louches dans votre systĂšme. Par contre ça supposerait qu'il y aurait une gestion des cas problĂ©matiques fait par votre systĂšme, en amont.
  4. Cliquez sur Create.
danger

Comme c'est indiqué, un bucket public est accessible en lecture sans autorisation, mais les autres opérations (téléversement, suppression) restent soumises aux politiques d'accÚs créées plus haut.

Tout est prĂȘt pour que des images puissent ĂȘtre envoyĂ©es de votre projet Ă  Supabase.

Ajouter une image​

final supabase = Supabase.instance.client;

//TODO doc: https://supabase.com/docs/reference/dart/storage-from-upload
final String fullPath = await supabase
  .storage
  .from('le-nom-de-mon-bucket')
  .upload(
    //TODO Mettre un nom unique
    "nom-du-fichier",
    File("path-du-fichier")
  );

RĂ©cupĂ©rer une image​

final supabase = Supabase.instance.client;

//TODO doc: https://supabase.com/docs/reference/dart/storage-from-getpublicurl
string url = supabase
  .storage
  .from('le-nom-de-mon-bucket')
  // TODO le bucket doit ĂȘtre public pour qu'on puisse rĂ©cupĂ©rer l'URL public
  .getPublicUrl("nom-du-fichier");

Exemple de code​

Vous pouvez regarder l'exemple de code supabase_storage.