Garder les clés d’API secrètes
Tout le monde peut lire le code d’un widget publié : n’y écrivez donc jamais de clé d’API, de mot de passe ni de jeton. L’endroit où placer un secret dépend de la personne à qui il appartient.
Votre propre clé : une Entrée privée
Lorsque votre widget utilise une même clé pour tout le monde, par exemple celle de votre compte auprès d’un service météo, stockez-la comme Entrée privée. Seul votre widget peut la lire. Personne ne peut la voir, pas même vous une fois qu’elle est enregistrée, et les personnes qui ajoutent votre widget n’ont pas à la remplir.
- Dans le Studio de widgets, choisissez Fichier > Entrées.
- Ouvrez l’onglet Entrées privées et choisissez Créer un secret.
- Saisissez un Nom, par exemple
API_KEY, et la Valeur, puis choisissez Ajouter un secret.
Lisez-la avec useInputs, comme toute autre entrée, et envoyez-la à l’API dans un en-tête :
import { useFetch } from "~lib/use-fetch";
import { useInputs } from "~lib/use-inputs";
const { API_KEY } = useInputs();
const { data } = useFetch<Weather>("https://api.example.com/weather", {
headers: { "X-Api-Key": API_KEY },
});
À savoir :
- Vous ne pouvez ni voir ni modifier une valeur enregistrée. Pour la changer, supprimez-la et ajoutez-la de nouveau.
- Les modifications s’appliquent tout de suite, sur chaque cadre, sans publier. Toutes les versions de votre widget partagent les mêmes Entrées privées.
- Les remix ne les reçoivent pas. Quand quelqu’un remixe votre widget, il doit ajouter les siennes.
La clé de chacun : une entrée sensible
Lorsque chaque personne a besoin de sa propre clé, par exemple pour voir son propre compte, demandez-la avec une entrée Sensible. Elle fonctionne comme toute autre entrée, mais masque ce qui est saisi, comme un champ de mot de passe.
Se connecter à un service
Pour les services auxquels on se connecte, comme Google, GitHub ou Spotify, utilisez plutôt une intégration. La personne se connecte une seule fois, et votre widget obtient un jeton pour appeler le service en son nom.