如何通过 VueFire、Vue3、Vite 和 Composition API 使用 Firebase appCheck

Question

我想弄清楚如何将 Firebase appCheck 与 VueFire 一起使用。我在 Firebase 后端设置了我的 recaptcha 密码。请注意，我的应用程序部署在 Netlify 上。

这里是 VueFire 文档。我认为需要在某处设置站点密钥，这就是为什么我尝试使用 useAppCheckToken 和 useAppCheck 都无法正常工作的原因。 VueFireAppCheck 使用 AppCheck

这是我得到的错误：Uncaught TypeError: Cannot read properties of undefined (reading 'debug')

这就是我的 main.j 的样子。

<script setup>
import { ref } from 'vue';
import { useFirebaseAuth, useAppCheckToken } from 'vuefire';
import { signInWithEmailAndPassword } from '@firebase/auth';
....

const app = createApp(App)
  .use(VueFire, {
    // imported above but could also just be created here
    firebaseApp,
    modules: [VueFireAuth(), VueFireAppCheck()],
  })
   ......
</script>

这是我在我的标志组件中尝试过的。

<script setup>
import { ref } from 'vue';
import { useFirebaseAuth, useAppCheckToken, useAppCheck } from 'vuefire';
import { signInWithEmailAndPassword } from '@firebase/auth';
import { useRouter } from 'vue-router';
....

const router = useRouter();
const auth = useFirebaseAuth();

const userInput = ref({
  email: '',
  password: '',
});

async function signInToFirebase() {
  // I tried this
  useAppCheck('window-counter-web');
  
// And I tried this
  useAppCheckToken('my site key');

 // I tried this
  useAppCheck('my site key');

 //This method works
  signInWithEmailAndPassword(auth, userInput.value.email, userInput.value.password)
    .then((userCredential) => {
      // Signed in

      const user = userCredential.user;
      router.push('/app/home');
      ...
    })
    .catch((error) => {
      const errorCode = error.code;
      const errorMessage = error.message;
    });
}
</script>