Saya sedang membuat prototaip aliran log masuk berasaskan VueJS menggunakan Firebase Auth dan perpustakaan widget web firebaseui-web.
Selepas pengesahan berjaya (password
或 google
提供商),小部件加载栏会无限重复,并且 firebaseui-web 不会触发其 signInSuccessWithAuthResult
回调。但是对 identitytoolkit.googleapis.com
) panggilan rangkaian jelas kelihatan telah mengenal pasti dan mengesahkan pengguna saya (lihat tangkapan skrin)
Objek konfigurasi adalah seperti berikut:
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"); }, }, };
Kod 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(); }, };
Demo boleh diterbitkan semula dan kod penuh di https://github.com/perelin/firebase-auth-providerdata-test.
Berikut ialah CodeSandbox yang mewakili: https://codesandbox.io/s/github/perelin/firebase-auth-providerdata-test (Kadangkala ia melemparkan ralat Unexpected token '{'
. Kemudian cuma muat semula/bina semula halaman.
Sekiranya saya tahu apa yang perlu saya cuba seterusnya, saya akan sangat berterima kasih!
Jadi, saya dapati masalah ini. Nampaknya tika firebaseui dikembalikan oleh
firebaseui.auth.AuthUI tidak suka menjadi sifat data Vue [1]
Saya ingin tahu sebabnya, tetapi mencari pepijat memerlukan tenaga yang mencukupi. Saya dah habis :)
Inilah pembaikan sayahttps://github.com/perelin/firebase-auth-providerdata-test/commit/e8c31aecb4d3bc8bcd93928c55c439201a965c65
[1] https://v3.vuejs.org/guide/data-method.html