使用Firebaseui的firebase身份验证-web在身份验证后不会重定向

Question

我目前正在使用FirebaseAuth和web小部件库firebaseui web开发基于VueJS的登录流原型。

成功认证后(无论是< code>password还是< code>google provider ),小部件加载栏会不断重复，firebaseui-web不会触发其< code > signinseccesswithauthresult 回调。但是对< code > identity toolkit . Google APIs . com 的网络调用显然已经识别并验证了我的用户(见截图)

配置对象如下所示：

js prettyprint-override">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（有时它会引发意外令牌“{”错误。然后只需重新加载/重建页面。

如果知道接下来要尝试什么，我将不胜感激！

Answer 1

所以，我发现了问题。似乎 firebaseui.auth.AuthUI 返回的 firebaseui 实例不喜欢成为 Vue 数据属性 [1]

我很想知道为什么，但是捕虫花了我足够的精力。我说完了:)

这是我对该 https://github.com/perelin/firebase-auth-providerdata-test/commit/e8c31aecb4d3bc8bcd93928c55c439201a965c65 的修复

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