Migration depuis Netlify Identity pour Decap CMS

Catégories :
  • technique
Geoffrey Le Meur avatar
Geoffrey Le Meur
•

Avec Netlify Identity désormais obsolète, trouver une alternative fiable pour gérer la routine authentification / gateway GitHub de Decap CMS est devenu urgent pour de nombreux développeurs, moi y compris, car j’utilise Decap CMS pour plusieurs de mes clients. Cet article vous guide à travers la migration vers DecapBridge, une solution gratuite et facile à mettre en place, conçue spécifiquement pour Decap CMS.

Pourquoi DecapBridge plutôt que d’autres solutions ?

La solution officiellement recommandée par Netlify implique un processus plutôt complexe nécessitant :

  1. La configuration d’Auth0 pour l’authentification des utilisateurs
  2. L’implémentation d’un client backend pour connecter Decap CMS au dépôt GitHub

J’étais plongé dans diverses documentations quand j’ai découvert DecapBridge, une solution plus simple créée par Alexandre Lotte de Millisecond Studio. Après qu’Alexandre nous ait contactés sur Discord à propos de son outil, nous avons été impressionnés par l’élégance avec laquelle il résout le problème d’authentification et de gestion du backend GitHub.

DecapBridge a beaucoup d’atouts :

  • Expérience fluide pour les clients : Je ne voulais pas avoir à demander à mes clients de créer un compte GitHub juste pour utiliser le CMS. DecapBridge vous permet d’inviter des utilisateurs par e-mail, et ils peuvent se connecter avec leur adresse e-mail.
  • Gratuit : DecapBridge est gratuit, ce qui en fait une option attrayante pour les développeurs et les équipes.
  • Pas de configuration complexe : Contrairement à la solution officielle de Netlify, DecapBridge ne nécessite pas la mise en place d’Auth0 ou d’un client backend.
  • Design attrayant : L’interface de Netlify Identity était un peu pénible, particulièrement la gestion des utilisateurs. DecapBridge offre un design plus moderne et convivial.

Prérequis

Avant de commencer le processus de migration, assurez-vous d’avoir :

  • Un site Decap CMS existant utilisant Netlify Identity
  • Votre dépôt de site hébergé sur GitHub
  • Un accès administrateur à votre compte Netlify
  • Un site déployé (pas nécessairement sur Netlify)

Processus de migration

Étape 1 : Supprimer Netlify Identity

Tout d’abord, vous devrez supprimer l’implémentation existante de Netlify Identity :

  1. Connectez-vous à votre compte Netlify
  2. Accédez à Projets > Votre-Site
  3. Allez dans Configuration du projet > Identity
  4. Supprimez l’instance Netlify Identity
  1. Dans votre code de projet, localisez /src/pages/admin.astro (ou équivalent) et supprimez le script Netlify Identity.

Étape 2 : Configurer DecapBridge

  1. Visitez https://decapbridge.com/ et créez un compte

  2. Depuis le tableau de bord, cliquez sur Créer un nouveau site. Vous verrez cet écran : Tableau de bord Decapbridge ajoutant un nouveau site

  3. Remplissez les champs requis :

    • Informations sur le dépôt GitHub

    Entrez votre dépôt au format utilisateur-ou-org/nom-du-dépôt

    • Générer un jeton d’accès personnel GitHub

    Pour créer un jeton d’accès personnel, suivez ces étapes :

    1. Connectez-vous à votre compte GitHub
    2. Cliquez sur votre photo de profil (en haut à droite) (pas le profil du dépôt) et sélectionnez Paramètres
    3. Faites défiler vers le bas et cliquez sur Paramètres développeur
    4. Sélectionnez Jetons d’accès personnels > Jetons à permissions précises
    5. Cliquez sur Générer un nouveau jeton et fournissez à nouveau votre mot de passe si nécessaire.
    6. Fournissez les détails suivants :
      • Note : Accès DecapBridge (ou tout nom significatif)
      • Expiration : Définir sur “Pas d’expiration”
      • Accès au dépôt : Sélectionnez “Uniquement les dépôts sélectionnés” et choisissez votre dépôt de site
      • Permissions :
        • Permissions du dépôt > Contenu : Lecture et écriture
        • Permissions du dépôt > Pull requests : Lecture et écriture
    7. Cliquez sur Générer le jeton et copiez la valeur du jeton (vous ne pourrez plus la voir par la suite)

    Permissions du jeton personnel GitHub

    • URL de Decap CMS

    Fournissez l’URL de votre tableau de bord Decap CMS, généralement au format https://votre-domaine-de-site.com/admin/

Étape 3 : Mettre à jour votre configuration Decap CMS

Dans votre dépôt, localisez votre fichier config.yml de Decap et remplacez la configuration backend existante par l’extrait fourni par DecapBridge :

# Utiliser l'authentification DecapBridge (requis)
backend:
  name: git-gateway
  repo: votre-nom-utilisateur/votre-dépôt # fourni par decapbridge
  branch: main
  identity_url: https://auth.decapbridge.com/sites/votre-id-de-site # fourni par decapbridge
  gateway_url: https://gateway.decapbridge.com # fourni par decapbridge

  # Optionnel : Messages de commit améliorés
  commit_messages:
    create: Création {{collection}} "{{slug}}" - {{author-name}} <{{author-login}}> via DecapBridge
    update: Mise à jour {{collection}} "{{slug}}" - {{author-name}} <{{author-login}}> via DecapBridge
    delete: Suppression {{collection}} "{{slug}}" - {{author-name}} <{{author-login}}> via DecapBridge
    uploadMedia: Téléchargement "{{path}}" - {{author-name}} <{{author-login}}> via DecapBridge
    deleteMedia: Suppression "{{path}}" - {{author-name}} <{{author-login}}> via DecapBridge
    openAuthoring: Message {{message}} - {{author-name}} <{{author-login}}> via DecapBridge

# Meilleur logo Decap + Bridge (optionnel)
logo_url: https://decapbridge.com/decapcms-with-bridge.svg

# Ajouter des liens de site dans DecapCMS (optionnel)
site_url: https://votre-domaine-de-site.com

Étape 4 : Vérifier et tester

  1. Committez et poussez vos modifications vers GitHub
  2. Déployez votre site avec la configuration mise à jour
  3. Naviguez vers votre page d’administration Decap CMS (généralement /admin/)
  4. Connectez-vous en utilisant vos identifiants DecapBridge

Ajouter des membres d’équipe et des clients

L’un des avantages de DecapBridge est sa gestion d’utilisateurs simplifiée :

  1. Allez sur votre tableau de bord DecapBridge
  2. Cliquez sur votre site
  3. Sélectionnez l’onglet Gérer les collaborateurs
  4. Entrez le nom et l’adresse e-mail de votre membre d’équipe ou client
  5. Cliquez sur Envoyer un e-mail d’invitation

Votre invité recevra un e-mail avec des instructions pour créer son compte DecapBridge et accéder au tableau de bord Decap CMS. Ses identifiants de connexion DecapBridge fonctionneront sur cette interface d’administration CMS.

Résolution des problèmes courants

Échecs d’authentification

Si vous rencontrez des problèmes d’authentification :

  1. Vérifiez que votre jeton GitHub possède les bonnes permissions
  2. Assurez-vous que le chemin du dépôt est correct dans votre config.yml
  3. Vérifiez que l’URL de votre site correspond à celle enregistrée dans DecapBridge

Contenu non sauvegardé

Si les modifications de contenu ne sont pas sauvegardées :

  1. Vérifiez la console de votre navigateur pour voir les erreurs
  2. Vérifiez que les permissions du jeton GitHub incluent “Pull requests”
  3. Assurez-vous que le nom de branche de votre dépôt correspond à celui dans config.yml

Conclusion

La migration de Netlify Identity vers DecapBridge offre une voie simple maintenant que Netlify Identity est obsolète. En tant que développeur front-end, j’étais très inquiet à l’idée de développer ma propre solution backend pour gérer l’authentification, et j’ai été soulagé de découvrir DecapBridge. Il offre l’approche la plus simple pour maintenir l’authentification de votre Decap CMS.

Merci à Alexandre Lotte d’avoir créé cet outil précieux qui nous évite d’implémenter un flux d’authentification beaucoup plus complexe.

Avez-vous essayé la migration ? Faites-moi savoir si vous rencontrez des problèmes ou si vous avez des questions.

Retour aux articles