@firebase/app-check: FirebaseError: AppCheck: ReCAPTCHA 错误

标签：firebase-authentication firebase-app-check recaptcha-enterprise

我在我的 javascript 网络应用程序中实施了 App Check reCAPTCHA Enterprise 流程。我遵循了文档中提到的所有步骤。在 Firebase 控制台中启用 AppCheck，注册 Web 应用程序，并在 GCP 控制台中启用 reCAPTCHA Enterprise API。创建网站密钥，并在 Firebase 应用程序检查控制台中添加该密钥。在我的项目中添加了依赖项，并为 AppCheck 编写了代码。

问题是在本地主机上运行代码时，我添加了下面一行，以便按照文档中的说明在本地主机上运行。运行正常

self.FIREBASE_APPCHECK_DEBUG_TOKEN = true；

当我部署代码时，我删除了这一行并部署了它。删除该行后，出现了以下错误。我漏掉了什么？

 @firebase/app-check：FirebaseError：AppCheck：ReCAPTCHA 错误。(appCheck/recaptcha-error).
        at ReCaptchaEnterpriseProvider.getToken (providers.ts:173:22)
        at async getToken$2 (internal-api.ts:156:42)
        在 async Promise.all (index 1)

    获取文档时出错：  FirebaseError：缺少权限或权限不足。

我在下面添加了 js 文件的代码，并使用模块类型调用该文件作为我的 HTML 文件。

var key = "SITE-KEY-HERE"；
        
import { initializeApp } from 'https://www.gstatic.com/firebasejs/10.12.2/firebase-app.js'；
import { getAuth, signInWithPhoneNumber, RecaptchaVerifier } from 'https://www.gstatic.com/firebasejs/10.12.2/firebase-auth.js'；
import { getFirestore }from 'https://www.gstatic.com/firebasejs/10.12.2/firebase-firestore.js'；
import { collection, getDocs, addDoc, Timestamp } from "https://www.gstatic.com/firebasejs/10.12.2/firebase-firestore.js"；
import { query, orderBy, limit, where, onSnapshot } from "https://www.gstatic.com/firebasejs/10.12.2/firebase-firestore.js"；
import { getMessaging } from 'https://www.gstatic.com/firebasejs/10.12.2/firebase-messaging.js'；
import { initializeAppCheck, getToken, ReCaptchaEnterpriseProvider } from 'https://www.gstatic.com/firebasejs/10.12.2/firebase-app-check.js'；

var firebaseConfig={
    apiKey:"API-KEY"、
    authDomain:"deyapaylive1.firebaseapp.com"、
    databaseURL:"https://SOME.firebaseio.com"、
    projectId:"PROJECTID"、
    storageBucket:"SOME.appspot.com"、
    messagingSenderId:"ID"、
    appId:"......"；
};

// 初始化 Firebase
const app = initializeApp(firebaseConfig)；

// 初始化其他 Firebase 服务
const auth = getAuth(app)；
const db = getFirestore(app)；
const messaging = getMessaging(app)；

// self.FIREBASE_APPCHECK_DEBUG_TOKEN = true；

// 初始化应用程序检查
const appCheck = initializeAppCheck(app, {
    provider: new ReCaptchaEnterpriseProvider(key)、
    isTokenAutoRefreshEnabled: false
});

export { app, db, collection, getDocs, Timestamp, addDoc }；
export { query, orderBy, limit, where, onSnapshot }；

export { auth, messaging, appCheck, signInWithPhoneNumber, RecaptchaVerifier }；

特定文档的安全规则

我的 HTML 代码

 const q = query(collection(db, "PhoneAuthdeyaPayUsers"), where("PhoneNumber", "==", userphonum))；
    
    const querySnapshot = await getDocs(q)；
    querySnapshot.forEach((doc) => {
        // 对于查询文档快照，doc.data() 永远不会未定义
        console.log(doc.id, " => ", doc.data())；
    
        如果 (doc.exists) {
           console.log("Document data:", doc.data())；
           var FailedACHTransactionsCount = doc.data().FailedACHTransactionsCount；
           var AccountStatus = doc.data().AccountStatus || "Active"；
        }
  });

看起来的 App Check 设置正确，但在部署时忘记删除调试模式，这会导致 “ReCAPTCHA 错误”。让我们来修复它：

问题:

在本地主机上使用了 self.FIREBASE_APPCHECK_DEBUG_TOKEN = true; ，它会绕过 App Check 的验证。部署时，需要删除这一行，以便 App Check 可以正常工作。

解决方案:

确认已删除调试行: 确保在部署的 JavaScript 代码中完全删除了 self.FIREBASE_APPCHECK_DEBUG_TOKEN = true; 这一行。
检查 reCAPTCHA Enterprise 密钥: 确认在 Firebase App Check 控制台中使用的 reCAPTCHA Enterprise 网站密钥与在 GCP 控制台中创建的密钥完全一致。
检查服务帐户权限: 确保的 Firebase 项目的默认服务帐户具有访问 reCAPTCHA Enterprise API 的权限。可以在 GCP 控制台的 “IAM 和管理” 部分中检查和更改服务帐户权限。
缓存问题: 有时浏览器缓存会导致问题。尝试清除浏览器缓存或使用隐身模式访问的网站，以确保不是缓存问题。
代码示例修改:

无需在 HTML 代码中直接使用 getDocs 查询 Firestore。可以使用 onSnapshot 监听文档的变化，并在文档加载完成后获取数据。以下是一个修改后的代码示例:

```javascript import { initializeApp } from 'https://www.gstatic.com/firebasejs/10.12.2/firebase-app.js'; import { getAuth, signInWithPhoneNumber, RecaptchaVerifier } from 'https://www.gstatic.com/firebasejs/10.12.2/firebase-auth.js'; import { getFirestore, collection, query, where, onSnapshot } from 'https://www.gstatic.com/firebasejs/10.12.2/firebase-firestore.js'; import { getMessaging } from 'https://www.gstatic.com/firebasejs/10.12.2/firebase-messaging.js'; import { initializeAppCheck, ReCaptchaEnterpriseProvider } from 'https://www.gstatic.com/firebasejs/10.12.2/firebase-app-check.js';

// ... other code ...

// 初始化应用程序检查 const appCheck = initializeAppCheck(app, { provider: new ReCaptchaEnterpriseProvider(key), isTokenAutoRefreshEnabled: false });

// ... other code ...

const q = query(collection(db, "PhoneAuthdeyaPayUsers"), where("PhoneNumber", "==", userphonum));

// 使用 onSnapshot 监听文档变化 const unsubscribe = onSnapshot(q, (querySnapshot) => { querySnapshot.forEach((doc) => { if (doc.exists()) { console.log("Document data:", doc.data()); var FailedACHTransactionsCount = doc.data().FailedACHTransactionsCount; var AccountStatus = doc.data().AccountStatus || "Active"; // 在这里使用获取到的数据更新的应用程序 } else { console.log("No such document!"); } }); }, (error) => { console.error("Error getting documents: ", error); });

// 当不再需要监听文档变化时，调用 unsubscribe() 停止监听 // unsubscribe(); ```

如果问题仍然存在，请提供以下信息：

使用的部署平台（例如：Firebase Hosting、Netlify、Vercel 等）。
收到的完整错误消息和堆栈跟踪信息。
的 Firebase 项目 ID。

这将有助于我更好地了解问题并提供更准确的帮助。

标签：firebase-authentication,firebase-app-check,recaptcha-enterprise
From： 78585572

@firebase/app-check: FirebaseError: AppCheck: ReCAPTCHA 错误

相关文章

赞助商

阅读排行