Firebase et Astro
Firebase est une plate-forme de développement d’applications qui fournit une base de données NoSQL, une authentification, des souscriptions en temps réel, des fonctions et un stockage.
Consultez notre guide dédié au déploiement sur Firebase hosting.
Initialisation de Firebase dans Astro
Titre de la section Initialisation de Firebase dans AstroPrérequis
Titre de la section Prérequis- Un projet Firebase avec une application Web configurée.
- Un projet Astro avec
output: 'server'
pour un rendu à la demande (EN) activée. - Des identifiants Firebase : vous aurez besoin de deux ensembles d’identifiants pour connecter Astro à Firebase :
- Les identifiants de l’application Web : ces informations d’identification seront utilisées par le côté client de votre application. Vous pouvez les trouver dans la console Firebase sous Paramètres du projet > Général. Faites défiler jusqu’à la section Vos applications et cliquez sur l’icône Application Web.
- Les informations d’identification du projet : ces informations d’identification seront utilisées par le côté serveur de votre application. Vous pouvez les générer dans la console Firebase sous Paramètres du projet > Comptes de service > Firebase Admin SDK > Générer une nouvelle clé privée.
Ajouter les informations d’identification Firebase
Titre de la section Ajouter les informations d’identification FirebasePour ajouter vos informations d’identification Firebase à Astro, créez un fichier « .env » à la racine de votre projet avec les variables suivantes :
Désormais, ces variables d’environnement sont disponibles pour être utilisées dans votre projet.
Si vous souhaitez disposer d’IntelliSense pour vos variables d’environnement Firebase, modifiez ou créez le fichier « env.d.ts » dans votre répertoire « src/ » et configurez vos types :
Apprenez-en plus sur les variables d’environnement et les fichiers .env
dans Astro.
Votre projet devrait à présent inclure les fichiers suivants :
Répertoiresrc/
- env.d.ts
- .env
- astro.config.mjs
- package.json
Installer les dépendances
Titre de la section Installer les dépendancesPour connecter Astro à Firebase, installez les paquets suivants à l’aide de la commande ci-dessous dans votre gestionnaire de paquets préféré :
firebase
- le SDK Firebase pour le côté clientfirebase-admin
- le SDK Firebase Admin pour le côté serveur
Ensuite, créez un dossier nommé firebase
dans le répertoire src/
et ajoutez deux nouveaux fichiers à ce dossier : client.ts
et server.ts
.
Dans client.ts
, ajoutez le code suivant pour initialiser Firebase côté client à l’aide des informations d’identification de votre application Web et du paquet « firebase » :
N’oubliez pas de remplacer l’objet firebaseConfig
par vos propres informations d’identification d’application Web.
Dans server.ts
, ajoutez le code suivant pour initialiser Firebase côté serveur à l’aide des informations d’identification de votre projet et du package firebase-admin
:
N’oubliez pas de remplacer l’objet serviceAccount
par vos propres informations d’identification de projet.
À présent, votre projet devrait inclure les fichiers suivants :
Répertoiresrc
- env.d.ts
Répertoirefirebase
- client.ts
- server.ts
- .env
- astro.config.mjs
- package.json
Ajouter l’authentification avec Firebase
Titre de la section Ajouter l’authentification avec FirebasePrérequis
Titre de la section Prérequis- Un projet Astro initialisé avec Firebase.
- Un projet Firebase avec l’authentification par e-mail/mot de passe activée dans la console Firebase sous la méthode Authentification > Connexion.
Créer les points de terminaison du serveur d’authentification
Titre de la section Créer les points de terminaison du serveur d’authentificationL’authentification Firebase dans Astro nécessite les trois points de terminaison du serveur Astro suivants :
GET /api/auth/signin
- pour connecter un utilisateurGET /api/auth/signout
- pour déconnecter un utilisateurPOST /api/auth/register
- pour enregistrer un utilisateur
Créez trois points de terminaison liés à l’authentification dans un nouveau répertoire src/pages/api/auth/
: signin.ts
, signout.ts
et register.ts
.
signin.ts
contient le code nécessaire pour connecter un utilisateur via Firebase :
Firebase n’autorise que l’utilisation d’un seul cookie, qui doit être nommé __session
. Tout autre cookie envoyé par le client ne sera pas visible par votre application.
Il s’agit d’une implémentation de base du point de terminaison de connexion. Vous pouvez ajouter plus de logique à ce point de terminaison en fonction de vos besoins.
signout.ts
contient le code nécessaire pour déconnecter un utilisateur en supprimant le cookie de session :
Il s’agit d’une implémentation de base du point de terminaison de déconnexion. Vous pouvez ajouter plus de logique à ce point de terminaison en fonction de vos besoins.
register.ts
contient le code nécessaire pour enregistrer un utilisateur via Firebase :
Il s’agit d’une implémentation de base du point de terminaison d’enregistrement d’utilisateur. Vous pouvez ajouter plus de logique à ce point de terminaison en fonction de vos besoins.
Après avoir créé les points de terminaison serveur concernant l’authentification, votre projet devrait inclure les fichiers suivants :
Répertoiresrc
- env.d.ts
Répertoirefirebase
- client.ts
- server.ts
Répertoirepages
Répertoireapi
Répertoireauth
- signin.ts
- signout.ts
- register.ts
- .env
- astro.config.mjs
- package.json
Création des pages
Titre de la section Création des pagesCréation des pages qui utiliseront les points de terminaison Firebase :
src/pages/register
- contiendra le formulaire d’enregistrement utilisateursrc/pages/signin
- contiendra le formulaire de connexion utilisateursrc/pages/dashboard
- contiendra un tableau de bord uniquement accessible à un utilisateur authentifié
L’exemple src/pages/register.astro
ci-dessous inclut un formulaire qui enverra une requête POST
au point de terminaison /api/auth/register
. Ce point de terminaison créera un nouvel utilisateur en utilisant les données du formulaire, puis redirigera l’utilisateur vers la page /signin
.
src/pages/signin.astro
utilise l’application serveur Firebase pour vérifier le cookie de session de l’utilisateur. Si l’utilisateur est authentifié, la page redirigera l’utilisateur vers la page /dashboard
.
La page d’exemple ci-dessous contient un formulaire qui enverra une requête « POST » au point de terminaison « /api/auth/signin » avec le token d’identification généré par l’application client Firebase.
Le point de terminaison vérifiera le token d’identification et créera un nouveau cookie de session pour l’utilisateur. Ensuite, le point de terminaison redirigera l’utilisateur vers la page « /dashboard ».
src/pages/dashboard.astro
vérifiera le cookie de session de l’utilisateur à l’aide de l’application serveur Firebase. Si l’utilisateur n’est pas authentifié, la page redirigera l’utilisateur vers la page /signin
.
La page d’exemple ci-dessous affiche le nom de l’utilisateur et un bouton pour se déconnecter. Cliquer sur le bouton enverra une requête GET
au point de terminaison /api/auth/signout
.
Le point de terminaison supprimera le cookie de session de l’utilisateur et redirigera l’utilisateur vers la page « /signin ».
Ajout des fournisseurs OAuth
Titre de la section Ajout des fournisseurs OAuthPour ajouter des fournisseurs OAuth à votre application, vous devez les activer dans la console Firebase.
Dans la console Firebase, accédez à la section Authentification et cliquez sur l’onglet Méthode de connexion. Ensuite, cliquez sur le bouton Ajouter un nouveau fournisseur et activez les fournisseurs que vous souhaitez utiliser.
L’exemple ci-dessous utilise le fournisseur Google.
Modifiez la page signin.astro
pour ajouter :
- un bouton pour se connecter avec Google sous le formulaire existant
- un écouteur d’événement sur le bouton pour gérer le processus de connexion dans le
<script>
existant.
Lorsque vous cliquez dessus, le bouton de connexion Google ouvrira une fenêtre contextuelle (popup) pour vous connecter avec Google. Une fois que l’utilisateur s’est connecté, il enverra une requête POST
au endpoint /api/auth/signin
avec le token d’identification généré par le fournisseur OAuth.
Le endpoint vérifiera le token d’identification et créera un nouveau cookie de session pour l’utilisateur. Ensuite, le endpoint redirigera l’utilisateur vers la page /dashboard
.
Connexion à Firestore Database
Titre de la section Connexion à Firestore DatabasePrérequis
Titre de la section Prérequis-
Un projet Astro initialisé avec Firebase comme décrit dans la section Initialisation de Firebase dans Astro.
-
Un projet Firebase avec une base de données Firestore. Vous pouvez suivre la documentation Firebase pour créer un nouveau projet et configurer une base de données Firestore.
Dans cette recette, la collection Firestore s’appellera friends et contiendra des documents avec les champs suivants :
id
: généré automatiquement par Firestorename
: un champ de type stringage
: un champ de type numberisBestFriend
: un champ de type booléen
Création des points de terminaison serveur
Titre de la section Création des points de terminaison serveurCréez deux nouveaux fichiers dans un nouveau répertoire src/pages/api/friends/
: index.ts
et [id].ts
. Ceux-ci créeront deux points de terminaison de serveur pour interagir avec la base de données Firestore des manières suivantes :
POST /api/friends
: pour créer un nouveau document dans la collection “friends”.POST /api/friends/:id
: pour mettre à jour un document dans la collection “friends”.DELETE /api/friends/:id
: pour supprimer un document dans la collection “friends”.
index.ts
contiendra le code pour créer un nouveau document dans la collection “friends” :
Il s’agit d’une implémentation de base du point de terminaison friends
. Vous pouvez ajouter plus de logique à ce point de terminaison en fonction de vos besoins.
[id].ts
contiendra le code pour mettre à jour et supprimer un document dans la collection “friends” :
Il s’agit d’une implémentation de point de terminaison friends/:id
. Vous pouvez ajouter plus de logique à ce point de terminaison en fonction de vos besoins.
Après avoir créé les points de terminaison du serveur pour Firestore, votre répertoire de projet doit maintenant inclure ces nouveaux fichiers :
Répertoiresrc
- env.d.ts
Répertoirefirebase
- client.ts
- server.ts
Répertoirepages
Répertoireapi
Répertoirefriends
- index.ts
- [id].ts
- .env
- astro.config.mjs
- package.json
Création des pages
Titre de la section Création des pagesCréez les pages qui utiliseront les points de terminaison Firestore:
src/pages/add.astro
- contiendra un formulaire permettant d’ajouter un nouvel ami (“friend”).src/pages/edit/[id].astro
- contiendra un formulaire permettant de modifier un ami et un bouton permettant de supprimer un ami.src/pages/friend/[id].astro
- contiendra les informations d’un ami.src/pages/dashboard.astro
- affichera une liste d’amis.
Ajouter une nouvelle entrée
Titre de la section Ajouter une nouvelle entréeL’exemple src/pages/add.astro
ci-dessous inclut un formulaire qui enverra une requête POST
au point de terminaison /api/friends
. Ce point de terminaison créera un nouvel ami en utilisant les données du formulaire, puis redirigera l’utilisateur vers la page /dashboard
.
Modifier ou supprimer une entrée
Titre de la section Modifier ou supprimer une entréesrc/pages/edit/[id].astro
contiendra un formulaire pour modifier les données d’un ami et un bouton pour supprimer un ami. Lors de la soumission, cette page enverra une requête POST
au point de terminaison /api/friends/:id
pour mettre à jour les données d’un ami.
Si l’utilisateur clique sur le bouton Supprimer, cette page enverra une requête DELETE
au point de terminaison /api/friends/:id
pour supprimer un ami.
Afficher une entrée individuelle
Titre de la section Afficher une entrée individuellesrc/pages/friend/[id].astro
affichera les détails d’un ami.
Affiche une liste d’entrées avec un bouton d’édition
Titre de la section Affiche une liste d’entrées avec un bouton d’éditionPour terminer, src/pages/dashboard.astro
affichera une liste d’amis. Chaque ami aura un lien vers sa page de détails et un bouton d’édition qui redirigera l’utilisateur vers la page de modification.
Après avoir créé toutes les pages, vous devriez avoir la structure de fichiers suivante :
Répertoiresrc
- env.d.ts
Répertoirefirebase
- client.ts
- server.ts
Répertoirepages
- dashboard.astro
- add.astro
Répertoireedit
- [id].astro
Répertoirefriend
- [id].astro
Répertoireapi
Répertoirefriends
- index.ts
- [id].ts
- .env
- astro.config.mjs
- package.json
Ressources communautaires
Titre de la section Ressources communautaires- Exemple d’application utilisant Astro et Firebase SSR
- Utilisation de la base de données en temps réel Firebase dans Astro avec Vue : un guide étape par étape