Firebase Auth mit firebaseui-web führt nach der Authentifizierung keine Umleitung durch
P粉311089279
P粉311089279 2024-03-27 19:47:11
0
1
467

Ich erstelle derzeit einen Prototyp eines VueJS-basierten Anmeldeablaufs mit Firebase Auth und der Web-Widget-Bibliothek firebaseui-web.

Nach erfolgreicher Authentifizierung (passwordgoogle 提供商),小部件加载栏会无限重复,并且 firebaseui-web 不会触发其 signInSuccessWithAuthResult 回调。但是对 identitytoolkit.googleapis.com) scheint der Netzwerkaufruf meinen Benutzer eindeutig identifiziert und authentifiziert zu haben (siehe Screenshot)

Das Konfigurationsobjekt lautet wie folgt:

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-Code:

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();
  },
};

Reproduzierbare Demo und vollständiger Code unter https://github.com/perelin/firebase-auth-providerdata-test.

Hier ist die CodeSandbox, die Folgendes darstellt: https://codesandbox.io/s/github/perelin/firebase-auth-providerdata-test (manchmal wird ein Unexpected token '{' Fehler ausgegeben. Dann laden/erstellen Sie die Seite einfach neu.

Wenn ich weiß, was ich als nächstes ausprobieren soll, wäre ich wirklich dankbar!

P粉311089279
P粉311089279

Antworte allen(1)
P粉868586032

所以,我发现了这个问题。看来 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

Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage