Module Admin — installation

0 Tout de suite

Essayez avant de configurer quoi que ce soit

Le dossier fonctionne déjà. Servez-le avec n'importe quel serveur local :

npx http-server -p 8080 .
# ou, si vous avez Python :
python3 -m http.server 8080

Puis ouvrez http://localhost:8080/index.html?admin. N'importe quelle adresse et n'importe quel mot de passe ouvrent l'éditeur : dans cet état, tout est enregistré dans votre navigateur, sans compte ni serveur.

La page index.html livrée est vierge : un assistant s'ouvre, vous pose trois questions — une page ou plusieurs, à quoi elle sert, quelle allure lui donner — et construit la page à partir de vos réponses. Vous arrivez ensuite sur le Guide : la page de haut en bas, une étape par partie, avec sous chaque champ une phrase qui dit quoi y mettre. Pour voir l'outil sur un vrai site, ouvrez plutôt demo/index.html?admin.

Vous avez déjà un site ? Rien à refaire : copiez admin/ à sa racine et ajoutez les deux lignes de l'étape 4. Votre code reste tel quel, le module s'y accroche. L'assistant ne s'ouvre que sur une page vide, et l'ambiance ne s'applique par défaut qu'aux parties que vous ajoutez : votre feuille de style n'est pas touchée.

Pourquoi un serveur local ? Un double-clic sur le fichier l'ouvre en file://, où le navigateur interdit les modules JavaScript. Toute commande ci-dessus suffit.

Quand l'outil vous convient, passez à la suite : c'est ce qui rend les modifications réelles, partagées et publiées.

1 10 minutes

Créer le projet Firebase

C'est la base de données qui garde le contenu. Le plan gratuit suffit largement pour un site vitrine.

Sur console.firebase.google.com :

Ajouter un projet. Vous pouvez refuser Google Analytics.
Paramètres du projet (roue dentée) ▸ Vos applications ▸ icône </> ▸ enregistrer l'application. Gardez l'objet firebaseConfig affiché : c'est l'étape 2.
Authentication ▸ Commencer ▸ activer E-mail/Mot de passe.
Authentication ▸ Users ▸ Ajouter un utilisateur : l'adresse et le mot de passe que vous donnerez au client. Notez l'UID affiché dans la liste.
Firestore Database ▸ Créer une base ▸ mode production ▸ région eur3 ou europe-west1.

À ne pas oublier — Authentication ▸ Settings ▸ Authorized domains ▸ Add domain : ajoutez le domaine du site. Sans ça, la connexion échoue même avec le bon mot de passe. C'est l'oubli le plus fréquent.

2 2 minutes

Fabriquer la configuration

Recopiez ici les valeurs de firebaseConfig. Le fichier se fabrique au fur et à mesure, en bas.

Identifiant du site un site = un identifiant, à vous de choisir

apiKey

projectId

authDomain

storageBucket

appId

L'hébergement du site

Ça décide de deux choses : la réécriture du fichier .html à chaque publication, et le téléversement des médias.

Le fichier à déposer

Ce fichier remplace le admin-config.js livré dans le dossier, à côté de index.html.

3 3 minutes

Publier les règles de sécurité

Sans cette étape, votre base est ouverte à tous. Dans la console : Firestore Database ▸ onglet Règles, remplacez tout, puis Publier.

Le fichier est aussi dans le dossier : firebase/firestore.rules.

Donner l'accès au client

Toujours dans Firestore, créez le document qui autorise son compte :

Collection	Document	Champ
sites	mon-site	—
└ members	l'UID noté à l'étape 1	`role` (chaîne) = `owner`

4 2 minutes

Brancher le module sur les pages

Sur chaque page du site, juste avant </body> :

<script src="/admin-config.js"></script>
<script type="module" src="/admin/runtime.js"></script>

La page index.html livrée dans le dossier les contient déjà. Si vous partez d'un site existant, c'est la seule modification à apporter à son code.

Le script serveur

Déposez admin-endpoint.php à la racine du site, ouvrez-le et renseignez la première ligne de réglage :

$PROJECT_ID   = 'votre-projet';

Créez à côté un dossier medias/ accessible en écriture (chmod 755, 775 si votre hébergeur l'exige).

Apache en CGI/FastCGI supprime l'en-tête Authorization, ce qui ferait échouer toute écriture avec une erreur 401. Dans le doute, ajoutez au .htaccess : SetEnvIf Authorization "(.*)" HTTP_AUTHORIZATION=$1

5 1 minute

Vérifier

Cette page peut interroger Firebase avec les valeurs saisies plus haut, et vous dire ce qui manque encore.

Puis, sur le site

https://ledomaine/ — le site s'affiche normalement
https://ledomaine/?admin — l'écran de connexion apparaît, le compte du client ouvre l'éditeur
Modifiez un texte, Publier, rechargez sans ?admin : la modification est en ligne pour tout le monde
En FTP, index.html contient la modification en clair dans le HTML, et un index.src.html est apparu à côté : la copie du code d'origine, gardée comme référence

? Si ça coince

Les pannes courantes

Symptôme	Cause la plus probable
« Connexion impossible » avec le bon mot de passe	domaine non autorisé dans Authentication ▸ Settings ▸ Authorized domains
« Ce compte n'a pas accès à ce site »	document `sites/<siteId>/members/<UID>` absent, ou `role` ≠ `owner`
`Missing or insufficient permissions`	règles de sécurité non publiées (étape 3)
Rien ne se passe avec `?admin`	`siteId` ou `projectId` erroné — la console du navigateur le dit
« Le serveur a répondu 401 » à la publication	en-tête `Authorization` supprimé par Apache (étape 4)
« Écriture impossible »	droits du dossier : le site doit être inscriptible par PHP
Le téléversement d'une vidéo échoue	`upload_max_filesize` et `post_max_size` du `php.ini`, souvent à 2 Mo
L'historique reste vide	Firestore réclame un index : le lien pour le créer en un clic est dans la console du navigateur

Le module trace ce qu'il fait quand debug: true : ouvrez la console du navigateur, elle dit combien d'éléments ont été détectés et ce qui a été appliqué.