Firebase Google 登录卡在 /__/auth/handler 路线上

Question

我正在按照此处的步骤尝试将 Google 登录添加到使用的项目中。 Firebase 身份验证。

• 我在 iframe 中运行代码（因为它是 Airtable 应用程序）。这会是问题吗？
• 我已在 firebase 控制台中启用 Google 登录。

• data-fetcher-dev.firebaseapp.com

  包含在 Firebase 授权域中。

我的代码：

firebase.initializeApp({
apiKey: 'AIzaSyCp8i_9lHCyLOREMIPSUM21342xXmb0F0Y',
authDomain: 'data-fetcher-dev.firebaseapp.com',
projectId: 'data-fetcher-dev',
});

const googleProvider = new firebase.auth.GoogleAuthProvider();

googleProvider.addScope('profile');
googleProvider.addScope('email');

...

const signInWithGoogle = async () => {
    try {
      const result = await firebase.auth().signInWithPopup(googleProvider);
      console.log('result: ', result);
    } catch (error) {
      console.log('error: ', error);
    }
  };

按下按钮时会调用

signInWithGoogle

。将打开一个新选项卡，我可以选择一个 Google 帐户/登录其中一个：

选择帐户后，我会被重定向到类似

https://data-fetcher-dev.firebaseapp.com/__/auth/handler?state=LONG_TOKEN_VALUE&scope=email+profile+openid+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.profile&authuser=3&prompt=consent

的 URL，并且 页面将永远加载：

我正在使用 firebase 托管，因此

https://data-fetcher-dev.firebaseapp.com

处有一个空项目。我需要在

/__/auth/handler

实现后端路由吗？我认为 Firebase 应该为我处理这个问题，因为他们在文档中没有提到它。

提前致谢。

Answer 1

添加其他人提到的内容，因为我花了很长时间才整理出所有这些内容，因为它与自定义域本身或 GCP 或 Firebase 中的授权域设置无关。

在

vite-plugin-pwa

中，您可以在

navigateFallbackDenylist

下传递工作箱设置，它接受 RegExp 数组：

const pwaOptions: Partial<VitePWAOptions> = {
  base: "/",
  manifest: {
     // ..
  },
  workbox: {
    navigateFallbackDenylist: [/__/], // Allows firebase auth routes to pass through service worker
  },
};

Answer 2

我刚刚面临这个问题，尽管使用自定义域并使用

signInWithRedirect

方法。

我们注意到身份验证处理程序 url

our.custom.domain/__/auth/handler

正在从我们的网站提供 html，而我们希望看到来自 google 身份验证处理服务的内容。

该问题是由我们正在处理请求的服务人员引起的。通过在 Service Worker 注册的路线上戳一个洞，我们能够解决悬挂的

__/auth/handler

路线。

我们在服务人员中使用工作箱。

// Poke a hole through the service worker for the firebase auth handlers.
registerRoute(({ url }) => url.pathname.startsWith('/__/'), new NetworkFirst());

Answer 3

我将 Vue2 应用程序从 Vue CLI 升级到 Vite，并将

"register-service-worker"

替换为

"vite-plugin-pwa"

，并在生产中遇到了这个问题。我可以在 Chrome 开发者网络选项卡中看到“__/auth/handler?”服务工作者正在提供 URL。

我按照@Darren Segal 的回答，将该选项添加到我的 Vite PWA 配置中。

vite.config.js

import {defineConfig} from "vite"
import {VitePWA} from 'vite-plugin-pwa'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        VitePWA({
            // Allow Firebase auth routes to pass through service worker
            workbox: {navigateFallbackDenylist: [/__/]},
        }),

我唯一不明白的是为什么这也没有发生在

"register-service-worker"

。我在旧的应用程序设置中看不到任何等效的路由异常。