0
553
ViewsCómo usar Firebase App Check en React. error 403
Quiero usar Firebase App Check en Gatsby Project. Completé el registro de la aplicación en Firebase console.
En mi proyecto:
import { initializeApp } from "firebase/app"; import { initializeAppCheck, ReCaptchaV3Provider, getToken } from "firebase/app-check"; const app = initializeApp({ // My firebase configuration object }); const appCheck = initializeAppCheck(app, { provider: new ReCaptchaV3Provider('MY_RECAPTCHA_PUBLIC_KEY'), isTokenAutoRefreshEnabled: true }); getToken(appCheck) .then(() => { console.log('success') }) .catch((error) => { console.log(error.message) })Pero, no funciona y obtuvo el error:
@firebase/app-check: FirebaseError: AppCheck: el servidor Fetch devolvió un estado de error HTTP. Estado HTTP: 403. (appCheck/fetch-status-error).
Entonces, ¿alguien puede ayudarme a verificar dónde está el problema? ¿Cómo resolver?
¡Gracias!
3 answers
Answer question0
Vaya a su Proyecto Firebase en Google Cloud Console: https://console.cloud.google.com/apis/credentials
Haga clic en el nombre de su clave de API de Firebase en "Claves de API".
"Restricciones de API"
Si está restringiendo el uso de su clave API, asegúrese de incluir:
API seleccionadas : Firebase App Check API
0
NO agregue localhost a los dominios aceptados de ReCaptcha. Los documentos de Google Firebase son claros: NO DEBE agregar localhost a los dominios permitidos como @uponly ref sugerida: https://firebase.google.com/docs/app-check/web/debug-provider?authuser=0&hl=en#web -version-9
Use los pasos más claramente descritos en la sección "Usar el proveedor de depuración en localhost" aquí
TLDR;
- Configure
window.FIREBASE_APPCHECK_DEBUG_TOKEN=truejusto antes de llamar ainitializeAppCheckpara decirle a su código que solicite un token de depuración - Abra la consola en el navegador web de su aplicación e imprima el token allí siguiendo el
AppCheck debug token: - Vaya al portal web de Firebase Console y vaya a Configuración del proyecto -> Comprobación de la aplicación . Haga clic en los tres puntos al final de la fila de la aplicación para la que está configurando AppCheck y agregue el token de depuración en la ventana emergente.
0
Agregando a la respuesta de @ jprio:
Si utiliza una clave de API sin restricciones y utiliza ReCaptchaEnterprise, debe asegurarse de tener configurados correctamente los dominios adecuados para su clave de sitio de Recaptcha Enterprise.
- En la consola de Google Cloud, vaya a Seguridad, luego reCAPTCHA Enterprise: https://console.cloud.google.com/security/recaptcha
- Haga clic en los tres puntos y presione "Editar clave" en su clave generada
- En Lista de dominios , ingrese el dominio de su sitio web, no es necesario agregar prefijos HTTP/HTTPS/WWW ni números de puerto.
- Si está desarrollando localmente, asegúrese de agregar localhost/127.0.0.1. Esto es lo que resolvió el problema para mí. Guardar cambios. NO OLVIDE eliminarlos antes de implementarlos en su sitio web
- Presione actualizar en su cliente después de unos 5 minutos, lo que permite que los cambios se propaguen. Asegúrese de estar usando ReCaptchaEnterpriseProvider en su cliente si está usando ReCaptcha Enterprise.