Mantener en secreto las claves de API

Cualquiera puede leer el código de un widget publicado, así que nunca escribas en él una clave de API, una contraseña ni un token. Dónde va el secreto depende de a quién pertenezca.

Tu propia clave: una entrada privada

Cuando tu widget usa una misma clave para todo el mundo, como tu cuenta en un servicio meteorológico, guárdala como entrada privada. Solo tu widget puede leerla. Nadie puede verla, ni siquiera tú una vez guardada, y quienes añaden tu widget no tienen que rellenarla.

1. En el Estudio de widgets, elige Archivo > Entradas.
2. Abre la pestaña Entradas privadas y haz clic en Crear nuevo secreto.
3. Escribe un Nombre, como API_KEY, y el Valor, y haz clic en Añadir secreto.

Léela con useInputs, como cualquier otra entrada, y envíasela a la API en una cabecera:

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 },
});

Ten en cuenta lo siguiente:

• No puedes ver ni editar un valor guardado. Para cambiarlo, elimínalo y vuelve a añadirlo.
• Los cambios se aplican de inmediato, en todos los marcos, sin publicar. Todas las versiones de tu widget comparten las mismas entradas privadas.
• Los remixes no las reciben. Cuando alguien remixa tu widget, tiene que añadir las suyas.

Su propia clave: una entrada sensible

Cuando cada persona necesita su propia clave, por ejemplo para ver su propia cuenta, pídesela con una entrada Sensible. Funciona como cualquier otra entrada, pero oculta lo que se escribe, como un campo de contraseña.

Iniciar sesión en un servicio

Para los servicios en los que la gente inicia sesión, como Google, GitHub o Spotify, usa en su lugar una integración. La persona inicia sesión una vez y tu widget obtiene un token para llamar al servicio en su nombre.