Firebase Auth 与 firebaseui-web 在身份验证后不会重定向

Posted 2023-02-22

【中文标题】Firebase Auth 与 firebaseui-web 在身份验证后不会重定向

【英文标题】：Firebase Auth with firebaseui-web does not redirect after authentication

【发布时间】：2021-12-28 15:18:38

【问题描述】：

我目前正在使用 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 '' 错误。然后只需重新加载/重建页面。

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

【问题讨论】：

能否请您在代码沙箱中提供代码而不是共享存储库？这比克隆和构建你的存储库要快得多。

感谢您的提示。这是此代表的 CodeSandbox：codesandbox.io/s/github/perelin/firebase-auth-providerdata-test（有时会引发 Unexpected token '' 错误。然后只需重新加载页面/重建应用程序。

【参考方案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