使用 firebaseui-web 的 Firebase Auth 在驗證後不會重新導向

Question

我目前正在使用 Firebase Auth 和 Web 小工具庫 firebaseui-web 對基於 VueJS 的登入流程進行原型設計。

成功驗證後（password 或google 提供者），小工具載入列會無限重複，且firebaseui-web 不會觸發其signInSuccessWithAuthResult 回調。但是對 identitytoolkit.googleapis.com 的網路呼叫顯然似乎已經識別並驗證了我的用戶（請參閱螢幕截圖）

配置物件如下所示：

const uiConfig = {
  signInSuccessUrl: "#/loggedin",
  signInOptions: [
    EmailAuthProvider.PROVIDER_ID,
    GoogleAuthProvider.PROVIDER_ID,
  ],
  tosUrl: "http://example.com",
  privacyPolicyUrl: "http://example.com",
  signInFlow: "redirect",
  callbacks: {
    signInSuccessWithAuthResult: function (authResult, redirectUrl) {
      console.log("signInSuccessWithAuthResult:", authResult, redirectUrl);
      return true;
    },
    uiShown: function () {
      console.log("uiShown");
    },
  },
};

VUeJS程式碼：

export default {
  name: "Home",
  data: function () {
    return {
      fbUI: {},
    };
  },
  methods: {
    initFBUI: function () {
      const uiReference = firebaseui.auth.AuthUI.getInstance("demoUI");
      console.log("uiReference ", uiReference);
      this.fbUI =
        uiReference !== null
          ? uiReference
          : new firebaseui.auth.AuthUI(this.$fbAuth, "demoUI");
      console.log("this.fbUI", this.fbUI);
    },
    startAuthUI: function () {
      console.log("ui.isPendingRedirect()", this.fbUI.isPendingRedirect());
      this.fbUI.start("#firebaseui-auth-container", uiConfig);
      console.log("this.fbUI started");
    },
  },
  mounted() {
    this.initFBUI();
    this.startAuthUI();
  },
};

可複製的示範和完整程式碼位於 https://github.com/perelin/firebase-auth-providerdata-test。

這是該代表的CodeSandbox：https://codesandbox.io/s/github/perelin/firebase-auth-providerdata-test （有時它會拋出Unexpected token '{' 錯誤。然後只需重新載入/重建頁面。

如果我知道接下來要嘗試什麼，我將不勝感激！

Answer 1

所以，我發現了這個問題。看來 firebaseui.auth.AuthUI 傳回的 firebaseui 實例不喜歡成為 Vue 資料屬性 [1]

很想知道為什麼，但尋找 bug 耗費了我足夠的精力。我完成了:)

這是我的修復https://github.com /perelin/firebase-auth-providerdata-test/commit/e8c31aecb4d3bc8bcd93928c55c439201a965c65

[1] https://v3.vuejs.org/guide/data-方法.html

#